/* =============================================================================
   Grippy Booking Public Styles — v2.0 Amelia-Inspired Design System
   Front-end theme matches Under Control website (sage green palette).
   The WordPress admin UI keeps the Grippy Code coral red palette separately.
   ============================================================================= */

/* ================================
   1. CSS Custom Properties
   ================================ */

:root {
    /* Brand Colors — Under Control site theme (sage green) */
    --grippy-primary: #94A5A3;
    --grippy-primary-hover: #7E908E;
    --grippy-primary-dark: #6B7D7B;
    --grippy-primary-deep: #333D29;
    --grippy-primary-light: #D9EBEB;
    --grippy-primary-tint: #EDF4F4;
    --grippy-primary-rgb: 148, 165, 163;

    /* Semantic Colors */
    --grippy-success: #16a34a;
    --grippy-success-light: #f0fdf4;
    --grippy-danger: #dc2626;
    --grippy-danger-light: #fef2f2;
    --grippy-warning: #f59e0b;
    --grippy-warning-light: #fffbeb;
    --grippy-info: #3b82f6;
    --grippy-info-light: #eff6ff;

    /* Text */
    --grippy-text: #1D2327;
    --grippy-text-light: #808A90;
    --grippy-text-muted: #9CA3AF;

    /* Borders & Backgrounds */
    --grippy-border: #E5E7EB;
    --grippy-border-strong: #D1D5DB;
    --grippy-bg: #FFFFFF;
    --grippy-bg-page: #F9FAFB;
    --grippy-bg-muted: #F3F4F6;

    /* Radius — Amelia uses tighter radii */
    --grippy-radius: 6px;
    --grippy-radius-lg: 8px;
    --grippy-radius-xl: 12px;
    --grippy-radius-full: 9999px;

    /* Shadows — Amelia uses very subtle shadows */
    --grippy-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --grippy-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --grippy-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --grippy-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06);

    /* Typography — Amelia uses Inter */
    --grippy-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Transitions */
    --grippy-transition: 200ms ease;
}

/* ================================
   2. Global Resets & Theme Overrides
   ================================ */

/* Kill ALL theme interference inside Grippy_Booking containers */
.grippy-auth,
.grippy-auth *,
.grippy-booking-flow,
.grippy-booking-flow *,
.grippy-client-dashboard,
.grippy-client-dashboard *,
.grippy-dietician-dashboard,
.grippy-dietician-dashboard *,
.grippy-packages-standalone,
.grippy-packages-standalone *,
.grippy-credit-balance-wrap,
.grippy-credit-balance-wrap * {
    font-family: var(--grippy-font) !important;
    box-sizing: border-box !important;
}

/* Kill theme pink/colored hover on links and buttons */
.grippy-auth a:hover,
.grippy-auth a:focus,
.grippy-auth a:active,
.grippy-auth button:hover,
.grippy-auth button:focus,
.grippy-booking-flow a:hover,
.grippy-booking-flow a:focus,
.grippy-booking-flow a:active,
.grippy-booking-flow button:hover,
.grippy-booking-flow button:focus,
.grippy-client-dashboard a:hover,
.grippy-client-dashboard a:focus,
.grippy-client-dashboard a:active,
.grippy-client-dashboard button:hover,
.grippy-client-dashboard button:focus,
.grippy-dietician-dashboard a:hover,
.grippy-dietician-dashboard a:focus,
.grippy-dietician-dashboard a:active,
.grippy-dietician-dashboard button:hover,
.grippy-dietician-dashboard button:focus {
    color: inherit !important;
    text-decoration: none !important;
    background-color: inherit;
}

/* Hide page titles on Grippy_Booking shortcode pages */
.page-template-default .entry-title,
.page-template-default .entry-header,
body.page .grippy-page-title-hidden {
    display: none !important;
}

/* Content area spacing */
.grippy-auth,
.grippy-booking-flow,
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    margin-top: 48px;
    margin-bottom: 64px;
}

/* Mobile/tablet: vertically center the auth (sign-in) card between
   the theme header and footer so it doesn't sit right under the menu. */
@media (max-width: 1199px) {
    body #grippy-auth,
    body .grippy-auth {
        min-height: calc(100vh - 240px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body #grippy-auth > *,
    body .grippy-auth > * {
        width: 100%;
    }
}
@media (max-width: 640px) {
    body #grippy-auth,
    body .grippy-auth {
        min-height: calc(100vh - 200px) !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Headings inside Grippy_Booking */
.grippy-auth h1, .grippy-auth h2, .grippy-auth h3, .grippy-auth h4,
.grippy-booking-flow h1, .grippy-booking-flow h2, .grippy-booking-flow h3, .grippy-booking-flow h4,
.grippy-client-dashboard h1, .grippy-client-dashboard h2, .grippy-client-dashboard h3, .grippy-client-dashboard h4,
.grippy-dietician-dashboard h1, .grippy-dietician-dashboard h2, .grippy-dietician-dashboard h3, .grippy-dietician-dashboard h4 {
    color: var(--grippy-text);
    line-height: 1.3;
    margin: 0;
}

/* Paragraph defaults */
.grippy-auth p,
.grippy-booking-flow p,
.grippy-client-dashboard p,
.grippy-dietician-dashboard p {
    color: var(--grippy-text);
    line-height: 1.6;
}

/* ================================
   3. Buttons
   ================================ */

.grippy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--grippy-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color var(--grippy-transition), border-color var(--grippy-transition), color var(--grippy-transition), box-shadow var(--grippy-transition);
    line-height: 1.5;
    letter-spacing: 0;
    gap: 8px;
    white-space: nowrap;
    -webkit-appearance: none;
}

.grippy-btn--primary {
    background: var(--grippy-primary) !important;
    color: #fff !important;
    border: 1px solid var(--grippy-primary) !important;
}

.grippy-btn--primary:hover,
.grippy-btn--primary:focus {
    background: var(--grippy-primary-hover) !important;
    border-color: var(--grippy-primary-hover) !important;
    color: #fff !important;
}

.grippy-btn--primary:active {
    background: #6E807E !important;
    border-color: #6E807E !important;
}

.grippy-btn--secondary {
    background: var(--grippy-bg) !important;
    color: var(--grippy-text) !important;
    border: 1px solid var(--grippy-border-strong) !important;
}

.grippy-btn--secondary:hover,
.grippy-btn--secondary:focus {
    background: var(--grippy-bg-muted) !important;
    border-color: var(--grippy-border-strong) !important;
    color: var(--grippy-text) !important;
}

.grippy-btn--danger {
    background: var(--grippy-danger) !important;
    color: #fff !important;
    border: 1px solid var(--grippy-danger) !important;
}

.grippy-btn--danger:hover,
.grippy-btn--danger:focus {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}

.grippy-btn--outline {
    background: transparent !important;
    color: var(--grippy-primary) !important;
    border: 1px solid var(--grippy-primary) !important;
}

.grippy-btn--outline:hover,
.grippy-btn--outline:focus {
    background: var(--grippy-primary) !important;
    color: #fff !important;
}

.grippy-btn--ghost {
    background: transparent !important;
    color: var(--grippy-text-light) !important;
    border: 1px solid transparent !important;
}

.grippy-btn--ghost:hover,
.grippy-btn--ghost:focus {
    background: var(--grippy-bg-muted) !important;
    color: var(--grippy-text) !important;
}

.grippy-btn--success {
    background: var(--grippy-success) !important;
    color: #fff !important;
    border: 1px solid var(--grippy-success) !important;
}

.grippy-btn--success:hover,
.grippy-btn--success:focus {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
}

.grippy-btn:disabled,
.grippy-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.grippy-btn--full {
    width: 100%;
}

.grippy-btn--sm {
    padding: 6px 12px;
    font-size: 13px;
}

.grippy-btn--lg {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
}

.grippy-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--grippy-radius);
}

/* ================================
   4. Notice / Alert Boxes
   ================================ */

.grippy-notice {
    padding: 16px 20px;
    border-radius: var(--grippy-radius-lg);
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    margin: 24px auto;
    max-width: 560px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.grippy-notice p {
    margin: 0 0 8px;
}

.grippy-notice p:last-child {
    margin-bottom: 0;
}

.grippy-notice--error {
    background: var(--grippy-danger-light);
    border-color: #fca5a5;
    color: var(--grippy-danger);
}

.grippy-notice--success {
    background: var(--grippy-success-light);
    border-color: #86efac;
    color: var(--grippy-success);
}

.grippy-notice--warning {
    background: var(--grippy-warning-light);
    border-color: #fcd34d;
    color: #92400e;
}

.grippy-notice--info {
    background: var(--grippy-info-light);
    border-color: #93c5fd;
    color: var(--grippy-info);
}

/* Inline alert (non-centered, full-width) */
.grippy-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--grippy-radius-lg);
    border: 1px solid var(--grippy-border);
    background: var(--grippy-bg);
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.grippy-alert--error {
    background: var(--grippy-danger-light);
    border-color: #fca5a5;
}

.grippy-alert--success {
    background: var(--grippy-success-light);
    border-color: #86efac;
}

.grippy-alert--warning {
    background: var(--grippy-warning-light);
    border-color: #fcd34d;
}

.grippy-alert--info {
    background: var(--grippy-info-light);
    border-color: #93c5fd;
}

.grippy-alert-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
}

.grippy-alert-content {
    flex: 1;
}

/* ================================
   5. Loading Spinner
   ================================ */

.grippy-loading {
    text-align: center;
    padding: 48px 20px;
    color: var(--grippy-text-light);
    font-size: 14px;
}

.grippy-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--grippy-border);
    border-top-color: var(--grippy-primary);
    border-radius: 50%;
    animation: grippy-spin 0.7s linear infinite;
    margin-bottom: 12px;
}

.grippy-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.grippy-spinner--lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

@keyframes grippy-spin {
    to { transform: rotate(360deg); }
}

/* Loading overlay for sections */
.grippy-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

/* ================================
   6. Booking Flow Wizard
   ================================ */

.grippy-booking-flow {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Progress Bar — Amelia stepper style */
.grippy-progress-bar {
    display: flex;
    margin-bottom: 32px;
    position: relative;
}

/* Removed — was drawing a horizontal grey line spanning the entire
   progress bar at y=16px, which the per-step connector lines now
   handle correctly. The leftover global line was visible ABOVE the
   numbered dots and confused users. */
.grippy-progress-bar::before { content: none !important; display: none !important; }

.grippy-progress-step {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--grippy-text-light);
    position: relative;
    z-index: 1;
    background: transparent;
}

.grippy-progress-step::before {
    content: attr(data-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grippy-bg);
    border: 2px solid var(--grippy-border);
    margin: 0 auto 8px;
    transition: all var(--grippy-transition);
    font-size: 13px;
    font-weight: 600;
    color: var(--grippy-text-light);
}

.grippy-progress-step.active::before {
    background: var(--grippy-primary);
    border-color: var(--grippy-primary);
    color: #fff;
}

.grippy-progress-step.active {
    color: var(--grippy-text);
    font-weight: 600;
}

.grippy-progress-step.completed::before {
    background: var(--grippy-success);
    border-color: var(--grippy-success);
    color: #fff;
    content: '\2713';
}

.grippy-progress-step.completed {
    color: var(--grippy-success);
}

/* Step Content Card */
.grippy-step-content {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 32px;
    box-shadow: var(--grippy-shadow);
}

.grippy-step-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px;
    color: var(--grippy-text);
}

.grippy-step-subtitle {
    font-size: 14px;
    color: var(--grippy-text-light);
    margin: -16px 0 24px;
    line-height: 1.5;
}

/* Step Navigation */
.grippy-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--grippy-border);
}

/* ================================
   7. Dietician Selection Cards
   ================================ */

.grippy-dietician-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.grippy-dietician-card {
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--grippy-transition), box-shadow var(--grippy-transition);
    background: var(--grippy-bg);
    position: relative;
}

.grippy-dietician-card:hover {
    border-color: var(--grippy-primary);
    box-shadow: var(--grippy-shadow-md);
}

.grippy-dietician-card.selected {
    border-color: var(--grippy-primary);
    background: rgba(var(--grippy-primary-rgb), 0.04);
    box-shadow: 0 0 0 2px rgba(var(--grippy-primary-rgb), 0.15);
}

.grippy-dietician-card.selected::after {
    content: '\2713';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: var(--grippy-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.grippy-dietician-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 2px solid var(--grippy-border);
}

.grippy-dietician-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--grippy-text);
    margin-bottom: 4px;
}

.grippy-dietician-specialty {
    font-size: 13px;
    color: var(--grippy-text-light);
    line-height: 1.4;
}

.grippy-dietician-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--grippy-warning);
}

.grippy-dietician-rating span {
    color: var(--grippy-text-light);
    font-size: 12px;
}

/* ================================
   8. Package Pricing Cards
   ================================ */

.grippy-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 8px;
}

.grippy-package-card {
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 32px 24px 24px;
    text-align: center;
    transition: border-color var(--grippy-transition), box-shadow var(--grippy-transition), transform var(--grippy-transition);
    position: relative;
    background: var(--grippy-bg);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
}

.grippy-package-card > .grippy-package-savings {
    margin-left: auto;
    margin-right: auto;
}

.grippy-package-card .grippy-select-package {
    margin-top: auto;
    width: 100%;
}

.grippy-package-card:hover {
    border-color: var(--grippy-primary);
    box-shadow: var(--grippy-shadow-md);
}

.grippy-package-card.selected {
    border-color: var(--grippy-primary);
    background: rgba(var(--grippy-primary-rgb), 0.04);
    box-shadow: 0 0 0 2px rgba(var(--grippy-primary-rgb), 0.15);
}

.grippy-package-card.recommended {
    border-color: var(--grippy-primary);
    border-width: 2px;
}

.grippy-package-card.recommended::before {
    content: 'Recommended';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grippy-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 14px;
    border-radius: var(--grippy-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grippy-package-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--grippy-text);
}

.grippy-package-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--grippy-text);
    margin-bottom: 4px;
    line-height: 1.2;
}

.grippy-package-currency {
    font-size: 13px;
    font-weight: 400;
    color: var(--grippy-text-light);
}

.grippy-package-sessions {
    font-size: 14px;
    color: var(--grippy-text-light);
    margin-bottom: 4px;
}

.grippy-package-per-session {
    font-size: 13px;
    color: var(--grippy-text-muted);
    margin-bottom: 14px;
}

.grippy-package-savings {
    display: inline-block;
    background: var(--grippy-success-light);
    color: var(--grippy-success);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--grippy-radius-full);
    margin-bottom: 12px;
}

.grippy-package-features {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    text-align: left;
}

.grippy-package-features li {
    font-size: 13px;
    color: var(--grippy-text-light);
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.grippy-package-features li::before {
    content: '\2713';
    color: var(--grippy-success);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

/* ================================
   9. Calendar & Time Picker
   ================================ */

.grippy-schedule-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grippy-calendar {
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    overflow: hidden;
    background: var(--grippy-bg);
}

.grippy-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--grippy-bg);
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 6px 10px;
    border-radius: var(--grippy-radius);
    color: var(--grippy-text-light);
    transition: background var(--grippy-transition), color var(--grippy-transition);
    line-height: 1;
}

.grippy-calendar-header button:hover {
    background: var(--grippy-bg-muted) !important;
    color: var(--grippy-text) !important;
}

.grippy-calendar-month {
    font-weight: 600;
    font-size: 15px;
    color: var(--grippy-text);
}

.grippy-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 8px;
}

.grippy-calendar-day-label {
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--grippy-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grippy-calendar-day {
    padding: 0;
    font-size: 13px;
    cursor: default;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px auto;
    transition: all var(--grippy-transition);
    color: var(--grippy-text-muted);
}

.grippy-calendar-day.available {
    cursor: pointer;
    color: var(--grippy-text);
    font-weight: 500;
}

.grippy-calendar-day.available:hover {
    background: var(--grippy-bg-muted) !important;
    color: var(--grippy-text) !important;
}

.grippy-calendar-day.selected {
    background: var(--grippy-primary) !important;
    color: #fff !important;
    font-weight: 600;
}

.grippy-calendar-day.today {
    border: 1px solid var(--grippy-primary);
    font-weight: 600;
    color: var(--grippy-primary);
}

.grippy-calendar-day.today.selected {
    color: #fff !important;
}

.grippy-calendar-day.disabled {
    color: var(--grippy-border);
    cursor: not-allowed;
}

/* Time Slots */
.grippy-time-slots {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom scrollbar for time slots */
.grippy-time-slots::-webkit-scrollbar {
    width: 4px;
}

.grippy-time-slots::-webkit-scrollbar-track {
    background: transparent;
}

.grippy-time-slots::-webkit-scrollbar-thumb {
    background: var(--grippy-border-strong);
    border-radius: 4px;
}

.grippy-time-slots-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--grippy-text);
}

.grippy-time-slots-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--grippy-text-light);
    font-size: 14px;
}

.grippy-time-slot {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius);
    background: var(--grippy-bg);
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color var(--grippy-transition), background var(--grippy-transition), color var(--grippy-transition);
    color: var(--grippy-text);
}

.grippy-time-slot:hover {
    border-color: var(--grippy-primary) !important;
    background: rgba(var(--grippy-primary-rgb), 0.04) !important;
    color: var(--grippy-text) !important;
}

.grippy-time-slot.selected {
    background: var(--grippy-primary) !important;
    color: #fff !important;
    border-color: var(--grippy-primary) !important;
}

.grippy-time-slot.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================
   10. Confirmation Summary
   ================================ */

.grippy-confirm-summary {
    background: var(--grippy-bg-page);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 24px;
}

.grippy-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--grippy-border);
    font-size: 14px;
    line-height: 1.5;
}

.grippy-confirm-row:last-child {
    border-bottom: none;
}

.grippy-confirm-label {
    color: var(--grippy-text-light);
    font-weight: 400;
}

.grippy-confirm-value {
    font-weight: 600;
    color: var(--grippy-text);
    text-align: right;
}

.grippy-confirm-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--grippy-text);
    padding-top: 16px;
    margin-top: 4px;
}

.grippy-confirm-total .grippy-confirm-value {
    font-size: 18px;
    color: var(--grippy-primary-dark);
}

/* ================================
   11. Success / Completion Step
   ================================ */

.grippy-success {
    text-align: center;
    padding: 48px 24px;
}

.grippy-success-icon {
    width: 64px;
    height: 64px;
    background: var(--grippy-success-light);
    color: var(--grippy-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.grippy-success h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--grippy-text);
}

.grippy-success p {
    color: var(--grippy-text-light);
    font-size: 14px;
    margin: 0 0 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.grippy-meet-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--grippy-primary) !important;
    color: #fff !important;
    border-radius: var(--grippy-radius);
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
    transition: background var(--grippy-transition);
}

.grippy-meet-link:hover {
    background: var(--grippy-primary-hover) !important;
    color: #fff !important;
}

.grippy-success-details {
    background: var(--grippy-bg-page);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 20px 24px;
    margin-top: 24px;
    display: inline-block;
    text-align: left;
    font-size: 14px;
}

.grippy-success-details dt {
    color: var(--grippy-text-light);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
}

.grippy-success-details dd {
    color: var(--grippy-text);
    font-weight: 600;
    margin: 0 0 12px 0;
}

.grippy-success-details dd:last-child {
    margin-bottom: 0;
}

/* ================================
   12. Dashboard Stats Cards (Amelia style)
   ================================ */

.grippy-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.grippy-stat-card {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 20px;
    position: relative;
    transition: box-shadow var(--grippy-transition);
}

.grippy-stat-card:hover {
    box-shadow: var(--grippy-shadow-md);
}

.grippy-stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--grippy-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
    background: var(--grippy-bg-muted);
    color: var(--grippy-text-light);
}

.grippy-stat-card-icon.primary {
    background: rgba(var(--grippy-primary-rgb), 0.1);
    color: var(--grippy-primary-dark);
}

.grippy-stat-card-icon.success {
    background: var(--grippy-success-light);
    color: var(--grippy-success);
}

.grippy-stat-card-icon.warning {
    background: var(--grippy-warning-light);
    color: var(--grippy-warning);
}

.grippy-stat-card-icon.danger {
    background: var(--grippy-danger-light);
    color: var(--grippy-danger);
}

.grippy-stat-card-label {
    font-size: 13px;
    color: var(--grippy-text-light);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1;
}

.grippy-stat-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--grippy-text);
    line-height: 1.2;
}

.grippy-stat-card-trend {
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.grippy-stat-card-trend.up {
    color: var(--grippy-success);
}

.grippy-stat-card-trend.down {
    color: var(--grippy-danger);
}

.grippy-stat-card-trend.neutral {
    color: var(--grippy-text-light);
}

.grippy-stat-card-trend svg,
.grippy-stat-card-trend .trend-arrow {
    width: 14px;
    height: 14px;
}

.grippy-stat-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--grippy-border);
}

.grippy-stat-card-chart {
    height: 40px;
    margin-top: 12px;
}

/* ================================
   13. Chart Containers
   ================================ */

.grippy-chart-container {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.grippy-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.grippy-chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-chart-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grippy-chart-period {
    display: inline-flex;
    align-items: center;
    background: var(--grippy-bg-muted);
    border-radius: var(--grippy-radius);
    padding: 2px;
    gap: 2px;
}

.grippy-chart-period-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--grippy-text-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--grippy-transition);
}

.grippy-chart-period-btn:hover {
    color: var(--grippy-text) !important;
    background: transparent !important;
}

.grippy-chart-period-btn.active {
    background: var(--grippy-bg) !important;
    color: var(--grippy-text) !important;
    box-shadow: var(--grippy-shadow-xs);
}

.grippy-chart-canvas {
    width: 100%;
    height: 280px;
}

.grippy-chart-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--grippy-border);
}

.grippy-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--grippy-text-light);
}

.grippy-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Side-by-side charts */
.grippy-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

/* ================================
   14. Dashboard Tables
   ================================ */

.grippy-dashboard-table-wrap {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.grippy-dashboard-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-dashboard-table-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.grippy-dashboard-table th,
.grippy-dashboard-table td {
    padding: 12px 20px;
    text-align: left;
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-dashboard-table th {
    background: var(--grippy-bg-page);
    font-weight: 600;
    color: var(--grippy-text-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.grippy-dashboard-table tr:last-child td {
    border-bottom: none;
}

.grippy-dashboard-table tr:hover td {
    background: var(--grippy-bg-page);
}

.grippy-dashboard-table td {
    color: var(--grippy-text);
}

/* Table cell helpers */
.grippy-table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grippy-table-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.grippy-table-user-name {
    font-weight: 500;
    color: var(--grippy-text);
}

.grippy-table-user-email {
    font-size: 12px;
    color: var(--grippy-text-light);
}

.grippy-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Table pagination */
.grippy-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--grippy-border);
    font-size: 13px;
    color: var(--grippy-text-light);
}

.grippy-table-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grippy-table-pagination-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius);
    background: var(--grippy-bg);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--grippy-transition);
    color: var(--grippy-text);
}

.grippy-table-pagination-btn:hover {
    border-color: var(--grippy-primary) !important;
    color: var(--grippy-primary) !important;
    background: var(--grippy-bg) !important;
}

.grippy-table-pagination-btn.active {
    background: var(--grippy-primary) !important;
    border-color: var(--grippy-primary) !important;
    color: #fff !important;
}

.grippy-table-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Empty state */
.grippy-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--grippy-text-light);
}

.grippy-empty-state-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.grippy-empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
    margin: 0 0 8px;
}

.grippy-empty-state p {
    font-size: 14px;
    color: var(--grippy-text-light);
    margin: 0 0 20px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ================================
   15. Status Pills
   ================================ */

.grippy-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--grippy-radius-full);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.grippy-pill--confirmed,
.grippy-pill--active {
    background: var(--grippy-success-light);
    color: var(--grippy-success);
}

.grippy-pill--pending {
    background: var(--grippy-warning-light);
    color: #92400e;
}

.grippy-pill--cancelled,
.grippy-pill--rejected {
    background: var(--grippy-danger-light);
    color: var(--grippy-danger);
}

.grippy-pill--completed {
    background: var(--grippy-primary-light);
    color: var(--grippy-primary-dark);
}

.grippy-pill--draft,
.grippy-pill--inactive {
    background: var(--grippy-bg-muted);
    color: var(--grippy-text-light);
}

.grippy-pill--info {
    background: var(--grippy-info-light);
    color: var(--grippy-info);
}

/* Pill with dot indicator */
.grippy-pill--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ================================
   16. Tab Navigation (Amelia underline style)
   ================================ */

.grippy-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--grippy-border);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.grippy-tabs::-webkit-scrollbar {
    display: none;
}

.grippy-tab-btn {
    padding: 12px 20px;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--grippy-text-light, #475569) !important;
    cursor: pointer;
    transition: color var(--grippy-transition), border-color var(--grippy-transition);
    white-space: nowrap;
    margin-bottom: -1px;
    position: relative;
    text-decoration: none !important;
    box-shadow: none !important;
}

.grippy-tab-btn:hover {
    color: var(--grippy-text) !important;
    background: none !important;
}

.grippy-tab-btn.active {
    color: var(--grippy-primary-dark) !important;
    border-bottom-color: var(--grippy-primary) !important;
    font-weight: 600;
}

.grippy-tab-content {
    display: none;
}

.grippy-tab-content.active {
    display: block;
}

/* Tab with count badge */
.grippy-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--grippy-bg-muted);
    border-radius: var(--grippy-radius-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--grippy-text-light);
    margin-left: 6px;
}

.grippy-tab-btn.active .grippy-tab-badge {
    background: rgba(var(--grippy-primary-rgb), 0.12);
    color: var(--grippy-primary-dark);
}

/* ================================
   17. Auth Forms
   ================================ */

.grippy-auth {
    max-width: 440px;
    margin: 160px auto 80px;   /* Clear fixed header + breathing room above footer */
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    box-shadow: var(--grippy-shadow-lg);
    overflow: hidden;
}
@media (max-width: 782px) {
    .grippy-auth { margin: 110px auto 60px; }
}

/* OAuth coming-soon buttons */
.grippy-auth-oauth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.grippy-oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--grippy-text);
    cursor: not-allowed;
    opacity: 0.85;
    transition: all .2s ease;
    position: relative;
}
.grippy-oauth-btn:not([disabled]):hover {
    border-color: var(--grippy-primary);
    background: rgba(var(--grippy-primary-rgb), 0.04);
}
.grippy-oauth-icon {
    display: inline-flex;
    align-items: center;
}
.grippy-oauth-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--grippy-primary-rgb), 0.15);
    color: var(--grippy-primary);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
}
.grippy-oauth-divider {
    position: relative;
    text-align: center;
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--grippy-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.grippy-oauth-divider::before,
.grippy-oauth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: var(--grippy-border);
}
.grippy-oauth-divider::before { left: 0; }
.grippy-oauth-divider::after  { right: 0; }
.grippy-oauth-divider span { background: var(--grippy-bg); padding: 0 8px; position: relative; }

/* Forgot password link + label row */
.grippy-form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.grippy-forgot-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--grippy-primary);
    text-decoration: none;
}
.grippy-forgot-link:hover { text-decoration: underline; }

.grippy-form-help {
    font-size: 13px;
    color: var(--grippy-text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}
.grippy-form-success {
    color: #0a7e5c;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 10px;
    min-height: 0;
}
.grippy-form-success:empty { display: none; }

/* ========================================================================
   Fixed-header page spacing — shortcode wrappers need top clearance so
   sticky/fixed site headers don't overlap our content. Using !important
   because some Elementor themes aggressively reset padding on descendants.
   ======================================================================== */
#grippy-directory,
.grippy-dir,
.grippy-pp,
#grippy-booking-flow,
.grippy-booking-flow,
.grippy-client-dashboard,
.grippy-dietician-dashboard,
.grippy-cat,
.grippy-sidebar-flow,
.grippy-auth {
    padding-top: 160px !important;
    min-height: calc(100vh - 280px);
}
@media (max-width: 782px) {
    #grippy-directory, .grippy-dir, .grippy-pp, #grippy-booking-flow, .grippy-booking-flow,
    .grippy-client-dashboard, .grippy-dietician-dashboard, .grippy-cat, .grippy-sidebar-flow,
    .grippy-auth {
        padding-top: 110px !important;
        min-height: calc(100vh - 220px);
    }
}
/* Directory hero absorbs the spacing so the gradient still bleeds full-width */
.grippy-dir { padding-top: 0 !important; }
.grippy-dir .grippy-dir-hero { padding-top: 160px; }
@media (max-width: 782px) {
    .grippy-dir .grippy-dir-hero { padding-top: 110px; }
}

/* ========================================================================
   Premium Auth — split-pane login/register (Grippy CRM style)
   ======================================================================== */
.grippy-auth {
    --ga-primary: var(--grippy-primary, #94A5A3);
    --ga-primary-rgb: var(--grippy-primary-rgb, 148, 165, 163);
    --ga-ink: #0f2e2a;
    --ga-muted: #6b7f7b;
    --ga-border: #e4ebe9;
    --ga-bg: #f6faf9;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 60px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.grippy-auth * { box-sizing: border-box; }

.grippy-auth-shell {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,46,42,0.06), 0 20px 60px rgba(15,46,42,0.08);
    border: 1px solid var(--ga-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
}

/* Left aside — gradient + brand */
.grippy-auth-aside {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #0f2e2a 0%, #1a4843 50%, #2d6b64 100%);
}
.grippy-auth-aside-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 300px at 20% 15%, rgba(148,165,163,0.35), transparent 70%),
        radial-gradient(600px 400px at 100% 100%, rgba(148,165,163,0.22), transparent 60%),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: auto, auto, 36px 36px, 52px 52px;
    pointer-events: none;
}
.grippy-auth-aside-inner {
    position: relative;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 620px;
}
.grippy-auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: auto;
}
.grippy-auth-logo {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 16px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
}
.grippy-auth-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.grippy-auth-brand-text strong { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.grippy-auth-brand-text span { font-size: 12px; opacity: 0.7; }

.grippy-auth-aside-copy { padding: 60px 0 40px; }
.grippy-auth-aside-copy h3 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #fff;
}
.grippy-auth-aside-copy p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0 0 28px;
    max-width: 360px;
}
.grippy-auth-aside-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.grippy-auth-aside-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.88);
}
.grippy-auth-aside-list li span {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(148,165,163,0.28);
    color: #d4ede8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.grippy-auth-aside-foot {
    margin-top: auto;
    padding-top: 28px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}

/* Right pane — form */
.grippy-auth-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 52px;
    background: #fff;
}
.grippy-auth-card {
    width: 100%;
    max-width: 420px;
}
.grippy-auth-header { margin-bottom: 24px; }
.grippy-auth-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ga-ink);
    margin: 0 0 8px;
    line-height: 1.2;
}
.grippy-auth-subtitle {
    font-size: 14px;
    color: var(--ga-muted);
    margin: 0;
    line-height: 1.5;
}

.grippy-auth-tabs {
    display: inline-flex;
    background: var(--ga-bg);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
    gap: 2px;
    width: 100%;
}
.grippy-auth-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-muted);
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.grippy-auth-tab:hover { color: var(--ga-ink); }
.grippy-auth-tab.active {
    background: #fff;
    color: var(--ga-ink);
    box-shadow: 0 1px 3px rgba(15,46,42,0.08), 0 1px 2px rgba(15,46,42,0.04);
}

/* OAuth buttons */
.grippy-auth-oauth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.grippy-oauth-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--ga-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ga-ink);
    font-family: inherit;
    cursor: not-allowed;
    transition: all .2s ease;
    position: relative;
    opacity: 0.88;
}
.grippy-oauth-btn:not([disabled]):hover {
    border-color: var(--ga-primary);
    background: rgba(var(--ga-primary-rgb), 0.04);
    cursor: pointer;
    opacity: 1;
}
.grippy-oauth-icon { display: inline-flex; flex-shrink: 0; }
.grippy-oauth-label { flex: 1; text-align: left; }
.grippy-oauth-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(var(--ga-primary-rgb), 0.15);
    color: var(--ga-primary);
    padding: 3px 8px;
    border-radius: 999px;
}
.grippy-oauth-divider {
    position: relative;
    text-align: center;
    margin: 14px 0 4px;
    font-size: 11px;
    color: var(--ga-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.grippy-oauth-divider::before,
.grippy-oauth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 100px);
    height: 1px;
    background: var(--ga-border);
}
.grippy-oauth-divider::before { left: 0; }
.grippy-oauth-divider::after  { right: 0; }

/* Form fields */
.grippy-auth-form { display: flex; flex-direction: column; gap: 14px; }
.grippy-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grippy-form-group { display: flex; flex-direction: column; gap: 6px; }
.grippy-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ga-ink);
}
.grippy-form-group input[type="email"],
.grippy-form-group input[type="password"],
.grippy-form-group input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ga-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ga-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
    min-height: 44px;
}
.grippy-form-group input:focus {
    outline: none;
    border-color: var(--ga-primary);
    box-shadow: 0 0 0 3px rgba(var(--ga-primary-rgb), 0.2);
}
.grippy-form-group input::placeholder { color: #a8b5b2; }

.grippy-form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0;
}
.grippy-forgot-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--ga-primary);
    text-decoration: none;
}
.grippy-forgot-link:hover { text-decoration: underline; }

.grippy-form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ga-ink);
    cursor: pointer;
    margin: 2px 0 4px;
    user-select: none;
}
.grippy-form-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--ga-primary);
    cursor: pointer;
    margin: 0;
}

.grippy-form-error,
.grippy-form-success {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.4;
    margin: 0;
    min-height: 0;
}
.grippy-form-error {
    color: #9a1f1f;
    background: rgba(220, 53, 53, 0.08);
    border: 1px solid rgba(220, 53, 53, 0.2);
}
.grippy-form-error:empty { display: none; }
.grippy-form-success {
    color: #0a7e5c;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.grippy-form-success:empty { display: none; }
.grippy-form-help {
    font-size: 13px;
    color: var(--ga-muted);
    line-height: 1.55;
    margin: 0 0 4px;
    padding: 12px 14px;
    background: var(--ga-bg);
    border-radius: 10px;
}

/* Primary / ghost buttons */
.grippy-btn {
    width: 100%;
    padding: 13px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all .2s ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.grippy-btn--primary {
    background: linear-gradient(135deg, var(--ga-primary), #7a8e8b);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15,46,42,0.08), 0 4px 12px rgba(var(--ga-primary-rgb), 0.28);
}
.grippy-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15,46,42,0.1), 0 8px 20px rgba(var(--ga-primary-rgb), 0.35);
}
.grippy-btn--primary:active { transform: translateY(0); }
.grippy-btn--primary[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.grippy-btn--ghost {
    background: transparent;
    color: var(--ga-muted);
    border-color: var(--ga-border);
    margin-top: 4px;
}
.grippy-btn--ghost:hover { color: var(--ga-ink); background: var(--ga-bg); }

/* Footer */
.grippy-auth-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--ga-border);
    text-align: center;
}
.grippy-auth-footer p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ga-muted);
}
.grippy-auth-footer a {
    color: var(--ga-primary);
    font-weight: 600;
    text-decoration: none;
}
.grippy-auth-footer a:hover { text-decoration: underline; }
.grippy-auth-legal {
    display: block;
    font-size: 11px;
    color: var(--ga-muted);
    line-height: 1.5;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 900px) {
    .grippy-auth-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .grippy-auth-aside {
        display: none; /* Hide on mobile — form takes full card */
    }
    .grippy-auth-pane { padding: 32px 24px; }
}

.grippy-auth-header {
    padding: 32px 32px 0;
}

.grippy-auth-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--grippy-text);
    margin: 0 0 20px;
    text-align: center;
}

.grippy-auth-subtitle {
    font-size: 14px;
    color: var(--grippy-text-light);
    text-align: center;
    margin: -12px 0 20px;
}

.grippy-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-auth-tab {
    flex: 1;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--grippy-text-light);
    transition: all var(--grippy-transition);
}

.grippy-auth-tab:hover {
    color: var(--grippy-text) !important;
    background: transparent !important;
}

.grippy-auth-tab.active {
    color: var(--grippy-text) !important;
    border-bottom-color: var(--grippy-primary);
}

.grippy-auth-body {
    padding: 28px 32px 36px;
}

.grippy-auth-form .grippy-form-group {
    margin-bottom: 18px;
}

.grippy-auth-form .grippy-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-text);
    margin-bottom: 6px;
}

.grippy-auth-form .grippy-form-group input,
.grippy-auth-form .grippy-form-group select,
.grippy-auth-form .grippy-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--grippy-border-strong);
    border-radius: var(--grippy-radius);
    font-size: 14px;
    color: var(--grippy-text);
    background: var(--grippy-bg);
    transition: border-color var(--grippy-transition), box-shadow var(--grippy-transition);
    box-sizing: border-box;
    line-height: 1.5;
}

.grippy-auth-form .grippy-form-group input::placeholder,
.grippy-auth-form .grippy-form-group textarea::placeholder {
    color: var(--grippy-text-muted);
}

.grippy-auth-form .grippy-form-group input:focus,
.grippy-auth-form .grippy-form-group select:focus,
.grippy-auth-form .grippy-form-group textarea:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(var(--grippy-primary-rgb), 0.15);
}

.grippy-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.grippy-form-error {
    color: var(--grippy-danger);
    font-size: 13px;
    margin-bottom: 14px;
    min-height: 18px;
    font-weight: 500;
}

.grippy-form-help {
    font-size: 12px;
    color: var(--grippy-text-muted);
    margin-top: 4px;
}

.grippy-auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--grippy-text-light);
    line-height: 1.6;
}

.grippy-auth-footer a {
    color: var(--grippy-primary-dark) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.grippy-auth-footer a:hover {
    color: var(--grippy-primary-dark) !important;
    text-decoration: underline !important;
}

/* Divider */
.grippy-auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 12px;
}

.grippy-auth-divider::before,
.grippy-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--grippy-border);
}

.grippy-auth-divider span {
    font-size: 12px;
    color: var(--grippy-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Password visibility toggle */
.grippy-password-wrap {
    position: relative;
}

.grippy-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--grippy-text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    line-height: 1;
}

.grippy-password-toggle:hover {
    color: var(--grippy-text-light) !important;
    background: none !important;
}

/* ================================
   18. Credit Balance Box
   ================================ */

.grippy-credit-box {
    background: rgba(var(--grippy-primary-rgb), 0.06);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grippy-credit-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.grippy-credit-icon {
    width: 40px;
    height: 40px;
    background: var(--grippy-primary-light);
    border-radius: var(--grippy-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--grippy-primary-dark);
}

.grippy-credit-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--grippy-text);
    line-height: 1.2;
}

.grippy-credit-balance {
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-text-light);
}

/* ================================
   19. Availability Form (Dietician Dashboard)
   ================================ */

.grippy-availability-form {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.grippy-availability-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.grippy-availability-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-availability-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-availability-row:last-child {
    border-bottom: none;
}

.grippy-availability-day {
    width: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--grippy-text);
    flex-shrink: 0;
}

/* Weekly availability — day-name on the left, slider toggle on the right. */
.grippy-availability-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
}
.grippy-availability-card-head .grippy-availability-day-name {
    font-weight: 700;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.2;
}
.grippy-availability-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.grippy-availability-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.grippy-availability-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--grippy-border);
    border-radius: 11px;
    cursor: pointer;
    transition: background var(--grippy-transition);
}

.grippy-availability-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--grippy-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.grippy-availability-toggle input:checked + .grippy-availability-toggle-track {
    background: var(--grippy-primary);
}

.grippy-availability-toggle input:checked + .grippy-availability-toggle-track::after {
    transform: translateX(18px);
}

.grippy-availability-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.grippy-availability-time-input {
    padding: 8px 12px !important;
    border: 1px solid var(--grippy-border-strong) !important;
    border-radius: var(--grippy-radius) !important;
    font-size: 13px !important;
    width: 110px !important;
    text-align: center;
    color: var(--grippy-text);
    background: var(--grippy-bg);
    transition: border-color var(--grippy-transition);
}

.grippy-availability-time-input:focus {
    outline: none;
    border-color: var(--grippy-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--grippy-primary-rgb), 0.15);
}

.grippy-availability-separator {
    color: var(--grippy-text-muted);
    font-size: 13px;
}

.grippy-availability-add-slot {
    padding: 4px 8px;
    border: 1px dashed var(--grippy-border-strong);
    border-radius: var(--grippy-radius);
    background: transparent;
    color: var(--grippy-text-light);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--grippy-transition);
}

.grippy-availability-add-slot:hover {
    border-color: var(--grippy-primary) !important;
    color: var(--grippy-primary) !important;
    background: transparent !important;
}

/* Availability disabled state */
.grippy-availability-row.disabled .grippy-availability-day,
.grippy-availability-row.disabled .grippy-availability-times {
    opacity: 0.4;
    pointer-events: none;
}

/* ================================
   20. Google Calendar Connection
   ================================ */

.grippy-gcal-section {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.grippy-gcal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.grippy-gcal-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--grippy-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.grippy-gcal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-gcal-desc {
    font-size: 13px;
    color: var(--grippy-text-light);
    margin-top: 2px;
}

.grippy-gcal-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--grippy-bg-page);
    border-radius: var(--grippy-radius);
    margin-bottom: 16px;
    font-size: 14px;
}

.grippy-gcal-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.grippy-gcal-status-dot.connected {
    background: var(--grippy-success);
}

.grippy-gcal-status-dot.disconnected {
    background: var(--grippy-text-muted);
}

.grippy-gcal-status-text {
    font-weight: 500;
    color: var(--grippy-text);
}

.grippy-gcal-status-email {
    color: var(--grippy-text-light);
    font-size: 13px;
}

.grippy-gcal-actions {
    display: flex;
    gap: 10px;
}

/* ================================
   Form Controls (Global)
   ================================ */

.grippy-form-group {
    margin-bottom: 18px;
}

.grippy-form-group label,
.grippy-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-text);
    margin-bottom: 6px;
}

.grippy-form-label-optional {
    font-weight: 400;
    color: var(--grippy-text-muted);
    font-size: 12px;
    margin-left: 4px;
}

.grippy-input,
.grippy-select,
.grippy-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--grippy-border-strong);
    border-radius: var(--grippy-radius);
    font-size: 14px;
    color: var(--grippy-text);
    background: var(--grippy-bg);
    transition: border-color var(--grippy-transition), box-shadow var(--grippy-transition);
    box-sizing: border-box;
    line-height: 1.5;
}

.grippy-input::placeholder,
.grippy-textarea::placeholder {
    color: var(--grippy-text-muted);
}

.grippy-input:focus,
.grippy-select:focus,
.grippy-textarea:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(var(--grippy-primary-rgb), 0.15);
}

.grippy-input.error,
.grippy-select.error,
.grippy-textarea.error {
    border-color: var(--grippy-danger);
}

.grippy-input.error:focus,
.grippy-select.error:focus,
.grippy-textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.grippy-textarea {
    min-height: 100px;
    resize: vertical;
}

.grippy-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808A90' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Checkbox and Radio */
.grippy-checkbox-wrap,
.grippy-radio-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--grippy-text);
    margin-bottom: 8px;
}

.grippy-checkbox-wrap input[type="checkbox"],
.grippy-radio-wrap input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--grippy-primary);
    flex-shrink: 0;
}

/* Search input */
.grippy-search-wrap {
    position: relative;
}

.grippy-search-wrap .grippy-input {
    padding-left: 36px;
}

.grippy-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grippy-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* ================================
   Dashboard Layout Helpers
   ================================ */

.grippy-dashboard-section {
    margin-bottom: 32px;
}

.grippy-dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.grippy-dashboard-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-dashboard-grid {
    display: grid;
    gap: 24px;
}

.grippy-dashboard-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.grippy-dashboard-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grippy-dashboard-sidebar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
}

/* Dashboard sidebar navigation */
.grippy-dashboard-sidebar {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    padding: 8px;
    align-self: start;
    position: sticky;
    top: 24px;
}

.grippy-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--grippy-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--grippy-text-light);
    cursor: pointer;
    transition: all var(--grippy-transition);
    text-decoration: none !important;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.grippy-dashboard-nav-item:hover {
    background: var(--grippy-bg-muted) !important;
    color: var(--grippy-text) !important;
}

.grippy-dashboard-nav-item.active {
    background: rgba(var(--grippy-primary-rgb), 0.08) !important;
    color: var(--grippy-primary-dark) !important;
    font-weight: 600;
}

.grippy-dashboard-nav-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: 16px;
}

/* ================================
   Card Component (Generic)
   ================================ */

.grippy-card {
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    box-shadow: var(--grippy-shadow);
}

.grippy-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--grippy-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grippy-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-card-body {
    padding: 20px;
}

.grippy-card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--grippy-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* ================================
   Modal / Dialog
   ================================ */

.grippy-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms, visibility 200ms;
}

.grippy-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.grippy-modal {
    background: var(--grippy-bg);
    border-radius: var(--grippy-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(10px);
    transition: transform 200ms;
}

.grippy-modal-overlay.active .grippy-modal {
    transform: translateY(0);
}

.grippy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--grippy-border);
}

.grippy-modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grippy-border);
    background: #fff;
    color: var(--grippy-text-light);
    cursor: pointer;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    flex: 0 0 auto;
    padding: 0;
}

.grippy-modal-close:hover {
    background: rgba(var(--grippy-primary-rgb), 0.06) !important;
    color: var(--grippy-primary) !important;
    border-color: var(--grippy-primary) !important;
    box-shadow: 0 2px 6px rgba(var(--grippy-primary-rgb), 0.18);
}
.grippy-modal-close:active { transform: scale(.94); }

.grippy-modal-body {
    padding: 24px;
}

.grippy-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--grippy-border);
}

/* ================================
   Tooltip
   ================================ */

.grippy-tooltip {
    position: relative;
}

.grippy-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--grippy-text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms, visibility 150ms;
    pointer-events: none;
    z-index: 100;
}

.grippy-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ================================
   Dropdown Menu
   ================================ */

.grippy-dropdown {
    position: relative;
    display: inline-block;
}

.grippy-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--grippy-bg);
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius-lg);
    box-shadow: var(--grippy-shadow-lg);
    z-index: 100;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 150ms;
}

.grippy-dropdown.open .grippy-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.grippy-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--grippy-text);
    cursor: pointer;
    transition: background var(--grippy-transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.grippy-dropdown-item:hover {
    background: var(--grippy-bg-muted) !important;
    color: var(--grippy-text) !important;
}

.grippy-dropdown-item.danger {
    color: var(--grippy-danger);
}

.grippy-dropdown-item.danger:hover {
    background: var(--grippy-danger-light) !important;
    color: var(--grippy-danger) !important;
}

.grippy-dropdown-divider {
    height: 1px;
    background: var(--grippy-border);
    margin: 4px 0;
}

/* ================================
   Avatar
   ================================ */

.grippy-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.grippy-avatar--sm { width: 28px; height: 28px; }
.grippy-avatar--md { width: 40px; height: 40px; }
.grippy-avatar--lg { width: 56px; height: 56px; }
.grippy-avatar--xl { width: 72px; height: 72px; }

.grippy-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grippy-bg-muted);
    color: var(--grippy-text-light);
    font-weight: 600;
    font-size: 14px;
    border-radius: 50%;
}

/* ================================
   Misc Utilities
   ================================ */

.grippy-text-muted { color: var(--grippy-text-light); }
.grippy-text-sm { font-size: 13px; }
.grippy-text-xs { font-size: 12px; }
.grippy-text-center { text-align: center; }
.grippy-text-right { text-align: right; }
.grippy-font-bold { font-weight: 600; }
.grippy-font-medium { font-weight: 500; }
.grippy-mt-0 { margin-top: 0; }
.grippy-mb-0 { margin-bottom: 0; }
.grippy-mb-8 { margin-bottom: 8px; }
.grippy-mb-16 { margin-bottom: 16px; }
.grippy-mb-24 { margin-bottom: 24px; }
.grippy-gap-8 { gap: 8px; }
.grippy-gap-16 { gap: 16px; }
.grippy-flex { display: flex; }
.grippy-flex-center { display: flex; align-items: center; }
.grippy-flex-between { display: flex; justify-content: space-between; align-items: center; }
.grippy-hidden { display: none !important; }
.grippy-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Separator */
.grippy-separator {
    height: 1px;
    background: var(--grippy-border);
    margin: 20px 0;
    border: none;
}

/* ================================
   Animations
   ================================ */

@keyframes grippy-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes grippy-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.grippy-animate-in {
    animation: grippy-fade-in 300ms ease forwards;
}

/* ================================
   21. Responsive Breakpoints
   ================================ */

/* Tablet */
@media (max-width: 1024px) {
    .grippy-dashboard-sidebar-layout {
        grid-template-columns: 1fr;
    }

    .grippy-dashboard-sidebar {
        position: static;
    }

    .grippy-dashboard-grid--3 {
        grid-template-columns: 1fr 1fr;
    }

    .grippy-charts-row {
        grid-template-columns: 1fr;
    }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
    .grippy-auth,
    .grippy-booking-flow,
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        margin-top: 32px;
        margin-bottom: 48px;
    }

    .grippy-step-content {
        padding: 24px 20px;
    }

    .grippy-schedule-picker {
        grid-template-columns: 1fr;
    }

    .grippy-packages-grid {
        grid-template-columns: 1fr;
    }

    .grippy-dietician-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .grippy-confirm-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grippy-confirm-value {
        text-align: left;
    }

    .grippy-progress-step {
        font-size: 10px;
    }

    .grippy-progress-step::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .grippy-dashboard-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .grippy-dashboard-table {
        min-width: 600px;
    }

    .grippy-auth {
        margin: 0 16px;
        border-radius: var(--grippy-radius-lg);
    }

    .grippy-auth-header {
        padding: 24px 24px 0;
    }

    .grippy-auth-body {
        padding: 24px;
    }

    .grippy-form-row {
        grid-template-columns: 1fr;
    }

    .grippy-booking-flow {
        padding: 0 16px;
    }

    .grippy-stat-cards {
        grid-template-columns: 1fr 1fr;
    }

    .grippy-dashboard-grid--2,
    .grippy-dashboard-grid--3 {
        grid-template-columns: 1fr;
    }

    .grippy-tabs {
        gap: 0;
    }

    .grippy-tab-btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .grippy-availability-row {
        flex-wrap: wrap;
    }

    .grippy-availability-day {
        width: 80px;
    }

    .grippy-availability-times {
        flex-wrap: wrap;
    }

    .grippy-chart-canvas {
        height: 220px;
    }

    .grippy-modal {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 40px);
    }

    .grippy-gcal-actions {
        flex-direction: column;
        width: 100%;
    }

    .grippy-gcal-actions .grippy-btn {
        width: 100%;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .grippy-dietician-grid {
        grid-template-columns: 1fr;
    }

    .grippy-credit-box {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .grippy-credit-info {
        flex-direction: column;
    }

    .grippy-step-content {
        padding: 20px 16px;
    }

    .grippy-stat-cards {
        grid-template-columns: 1fr;
    }

    .grippy-stat-card-value {
        font-size: 24px;
    }

    .grippy-step-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .grippy-step-nav .grippy-btn {
        width: 100%;
    }

    .grippy-chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .grippy-availability-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 0;
    }

    .grippy-availability-day {
        width: auto;
        font-weight: 600;
    }

    .grippy-table-pagination {
        flex-direction: column;
        gap: 10px;
    }

    .grippy-dashboard-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Print */
@media print {
    .grippy-btn,
    .grippy-step-nav,
    .grippy-tabs,
    .grippy-modal-overlay {
        display: none !important;
    }

    .grippy-card,
    .grippy-stat-card,
    .grippy-chart-container,
    .grippy-dashboard-table-wrap {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ================================
   Document Upload (Dietician Dashboard)
   ================================ */

.grippy-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .grippy-doc-grid { grid-template-columns: 1fr; }
}

.grippy-doc-card {
    border: 1px solid var(--grippy-border);
    border-radius: var(--grippy-radius);
    background: #fff;
    overflow: hidden;
}

.grippy-doc-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--grippy-border);
    font-size: 14px;
}

.grippy-doc-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border: 2px dashed var(--grippy-border);
    margin: 12px;
    border-radius: var(--grippy-radius);
}

.grippy-doc-upload-zone:hover,
.grippy-doc-dragover {
    background: var(--grippy-primary-light);
    border-color: var(--grippy-primary);
}

.grippy-doc-upload-icon {
    color: var(--grippy-primary);
    margin-bottom: 8px;
}

.grippy-doc-upload-text {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--grippy-text);
}

.grippy-doc-upload-hint {
    font-size: 12px;
    color: var(--grippy-text-muted);
    margin: 0;
}

.grippy-doc-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.grippy-doc-file-icon {
    color: var(--grippy-primary);
    flex-shrink: 0;
}

.grippy-doc-filename {
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-primary-dark);
    text-decoration: none;
    word-break: break-all;
}

.grippy-doc-filename:hover {
    text-decoration: underline;
}

.grippy-doc-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--grippy-border);
}

.grippy-doc-uploading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    gap: 8px;
    color: var(--grippy-text-muted);
    font-size: 13px;
}

/* ====================================================================
   Profile Editor (Dietician Dashboard)
   ==================================================================== */

.grippy-profile-top {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.grippy-profile-score-wrap { flex: 1; min-width: 280px; }

.grippy-profile-score-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.grippy-profile-score-value.grippy-score--ok   { color: var(--grippy-success); }
.grippy-profile-score-value.grippy-score--warn { color: var(--grippy-warning); }

.grippy-profile-score-bar {
    height: 8px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
}
.grippy-profile-score-fill {
    height: 100%;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    background: var(--grippy-primary);
    border-radius: 999px;
}
.grippy-profile-score-fill.grippy-score--ok   { background: var(--grippy-success); }
.grippy-profile-score-fill.grippy-score--warn { background: var(--grippy-warning); }

.grippy-profile-score-note {
    margin-top: 8px;
    font-size: 13px;
    color: var(--grippy-text-muted);
}

.grippy-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.grippy-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.grippy-toggle-slider {
    width: 44px;
    height: 24px;
    background: #D1D5DB;
    border-radius: 999px;
    position: relative;
    transition: background .2s;
}
.grippy-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.grippy-toggle input:checked + .grippy-toggle-slider {
    background: var(--grippy-primary);
}
.grippy-toggle input:checked + .grippy-toggle-slider::before {
    transform: translateX(20px);
}
.grippy-toggle-label { font-size: 14px; font-weight: 600; }
.grippy-toggle--disabled { opacity: .5; cursor: not-allowed; }

.grippy-profile-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grippy-profile-section {
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    padding: 24px;
}
.grippy-profile-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
}
.grippy-field-hint {
    font-weight: 400;
    color: var(--grippy-text-muted);
    font-size: 13px;
}

.grippy-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.grippy-field:last-child { margin-bottom: 0; }
.grippy-field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--grippy-text);
}
.grippy-field input[type="text"],
.grippy-field input[type="number"],
.grippy-field textarea,
.grippy-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    min-height: 42px;
    transition: border-color .2s, box-shadow .2s;
}
.grippy-field input:focus,
.grippy-field textarea:focus,
.grippy-field select:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(253,97,81,.15);
}
.grippy-field textarea { resize: vertical; min-height: 120px; }

.grippy-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.grippy-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grippy-pill-select {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--grippy-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
    color: var(--grippy-text);
    transition: all .2s;
    user-select: none;
    min-height: 36px;
}
.grippy-pill-select input { display: none; }
.grippy-pill-select:hover {
    border-color: var(--grippy-primary);
}
.grippy-pill-select--on {
    background: rgba(253,97,81,.1);
    border-color: var(--grippy-primary);
    color: var(--grippy-primary);
    font-weight: 600;
}

.grippy-photo-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.grippy-photo-preview {
    width: 120px; height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #F3F4F6;
    border: 2px solid var(--grippy-border);
    flex-shrink: 0;
}
.grippy-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.grippy-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--grippy-text-muted);
    font-size: 12px;
}
.grippy-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grippy-photo-hint {
    font-size: 12px;
    color: var(--grippy-text-muted);
}

.grippy-education-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 0.8fr auto;
    gap: 8px;
    margin-bottom: 12px;
}
.grippy-education-row input {
    padding: 8px 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-size: 14px;
    min-height: 42px;
}

.grippy-profile-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, #fff 60%, transparent);
    padding-top: 16px;
}

.grippy-save-status {
    font-size: 13px;
    font-weight: 500;
}
.grippy-save-status--pending { color: var(--grippy-text-muted); }
.grippy-save-status--ok      { color: var(--grippy-success); }
.grippy-save-status--err     { color: var(--grippy-danger); }

/* ====================================================================
   Clients Grid
   ==================================================================== */

.grippy-clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.grippy-client-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    background: #fff;
    transition: all .2s;
}
.grippy-client-card:hover {
    border-color: var(--grippy-primary);
    transform: translateY(-2px);
    box-shadow: var(--grippy-shadow-md);
}
.grippy-client-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--grippy-primary-light);
    color: var(--grippy-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.grippy-client-name { font-weight: 600; font-size: 14px; }
.grippy-client-meta { font-size: 12px; color: var(--grippy-text-muted); }

/* ====================================================================
   Reviews
   ==================================================================== */

.grippy-reviews-summary {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    margin-bottom: 16px;
}
.grippy-reviews-rating {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.grippy-reviews-rating-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--grippy-text);
}
.grippy-reviews-rating-stars { font-size: 20px; color: #FBBF24; }
.grippy-reviews-count { font-size: 14px; color: var(--grippy-text-muted); }

.grippy-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.grippy-review-card {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
}
.grippy-review-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.grippy-review-avatar,
.grippy-review-avatar-placeholder {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #F3F4F6;
}
.grippy-review-avatar { object-fit: cover; }
.grippy-review-name { font-weight: 600; font-size: 14px; }
.grippy-review-stars { font-size: 14px; color: #FBBF24; }
.grippy-review-date { font-size: 12px; color: var(--grippy-text-muted); }
.grippy-review-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--grippy-text);
}

.grippy-stars { letter-spacing: 2px; }

.grippy-pricing-note {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(var(--grippy-primary-rgb), 0.06);
    border: 1px solid rgba(var(--grippy-primary-rgb), 0.18);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--grippy-text);
}
.grippy-pricing-note strong { color: var(--grippy-primary); }

.grippy-credit-hint {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(var(--grippy-primary-rgb), 0.10), rgba(var(--grippy-primary-rgb), 0.04));
    border: 1px solid rgba(var(--grippy-primary-rgb), 0.25);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--grippy-text);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.grippy-credit-hint::before {
    content: '✓';
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--grippy-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
}
.grippy-credit-hint strong { color: var(--grippy-primary); }
.grippy-credit-hint em { font-style: normal; font-weight: 700; color: var(--grippy-primary); }

/* ====================================================================
   Public Dietician Directory
   ==================================================================== */

.grippy-dir {
    font-family: var(--grippy-font, 'Inter', sans-serif);
    padding-bottom: 72px;
}

/* Full-width gradient hero with contained inner content */
.grippy-dir-hero {
    position: relative;
    background:
        radial-gradient(1000px 400px at 15% 0%, rgba(var(--grippy-primary-rgb), 0.18), transparent 60%),
        radial-gradient(900px 360px at 100% 100%, rgba(var(--grippy-primary-rgb), 0.12), transparent 55%),
        linear-gradient(180deg, #f7faf9 0%, #ffffff 100%);
    border-bottom: 1px solid var(--grippy-border);
    padding: 56px 16px 48px;
    margin-bottom: 40px;
    overflow: hidden;
}
.grippy-dir-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(var(--grippy-primary-rgb), 0.06) 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(var(--grippy-primary-rgb), 0.05) 1px, transparent 1px);
    background-size: 32px 32px, 44px 44px;
    pointer-events: none;
    opacity: 0.7;
}
.grippy-dir-hero-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.grippy-dir-hero-chip {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.grippy-dir-auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--grippy-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(var(--grippy-primary-rgb), 0.08);
}
.grippy-dir-auth-chip strong { font-weight: 700; color: var(--grippy-primary); }
.grippy-dir-auth-chip a {
    color: var(--grippy-primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}
.grippy-dir-auth-chip a:hover { text-decoration: underline; }
.grippy-dir-auth-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

.grippy-dir-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--grippy-text);
    line-height: 1.15;
}
.grippy-dir-subtitle {
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--grippy-text-muted);
    margin: 0 auto;
    max-width: 560px;
    line-height: 1.55;
}

/* Contained body below hero — v3.4.163 went truly wide: 1880px max so
 * the directory uses almost the entire viewport. Combined with a slim
 * sidebar + smaller card minmax, this fits 3-5 cards per row depending
 * on screen size. */
.grippy-dir-toolbar,
.grippy-dir-layout {
    max-width: 1880px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}
.grippy-dir-hero-inner { max-width: 1880px; }

.grippy-dir-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    background: #fff;
    padding: 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(var(--grippy-primary-rgb), 0.06);
}
.grippy-dir-search {
    flex: 1;
    min-width: 240px;
}
.grippy-dir-search input {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--grippy-border);
    border-radius: 999px;
    font-size: 15px;
    font-family: inherit;
    min-height: 48px;
    transition: border-color .2s, box-shadow .2s;
}
.grippy-dir-search input:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(253,97,81,.15);
}
.grippy-dir-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.grippy-dir-sort label {
    font-size: 14px;
    color: var(--grippy-text-muted);
}
.grippy-dir-sort select {
    padding: 10px 14px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    min-height: 42px;
    cursor: pointer;
}
.grippy-dir-filter-toggle { display: none; }

.grippy-dir-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 22px;
    align-items: start;
}

.grippy-dir-filters {
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 24px;
}
.grippy-dir-filter-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.grippy-dir-filter-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.grippy-dir-filter-group {
    border-top: 1px solid var(--grippy-border);
    padding: 12px 0;
}
.grippy-dir-filters > div:first-child .grippy-dir-filter-group,
.grippy-dir-filters > .grippy-dir-filter-group:first-of-type {
    border-top: none;
    padding-top: 4px;
}
.grippy-dir-filter-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grippy-text-muted);
    padding: 8px 0;
    user-select: none;
}
.grippy-dir-filter-group > summary::-webkit-details-marker { display: none; }
.grippy-dir-filter-group > summary:hover { color: var(--grippy-primary); }
.grippy-dir-filter-badge {
    display: inline-block;
    background: var(--grippy-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 6px;
}
.grippy-dir-filter-chev {
    margin-left: auto;
    font-size: 14px;
    transition: transform .2s ease;
    color: var(--grippy-text-muted);
}
.grippy-dir-filter-group[open] > summary .grippy-dir-filter-chev {
    transform: rotate(180deg);
    color: var(--grippy-primary);
}
.grippy-dir-filter-group[open] > summary {
    color: var(--grippy-text);
}

/* Legacy h4 selector kept in case any other code uses it. */
.grippy-dir-filter-group-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grippy-text-muted);
    margin: 0;
}
.grippy-dir-filter-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.grippy-dir-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    font-size: 14px;
    min-height: 36px;
    border-radius: 6px;
    transition: background .15s;
}
.grippy-dir-check:hover { background: var(--grippy-primary-light); }
.grippy-dir-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--grippy-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.grippy-dir-check > span:first-of-type { flex: 1; }
.grippy-dir-count {
    color: var(--grippy-text-muted);
    font-size: 12px;
}
.grippy-dir-rating-slider { padding: 8px 0; }
.grippy-dir-rating-slider input[type="range"] {
    width: 100%;
    accent-color: var(--grippy-primary);
}
.grippy-dir-rating-value {
    text-align: center;
    font-weight: 600;
    color: var(--grippy-primary);
    font-size: 14px;
    margin-top: 4px;
}

.grippy-dir-main { min-width: 0; }

.grippy-dir-results-meta {
    font-size: 14px;
    color: var(--grippy-text-muted);
    margin-bottom: 16px;
}

.grippy-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
@media (min-width: 1400px) {
    .grippy-dir-grid {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    }
}

.grippy-dir-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 18px;
    padding: 24px 24px 20px;
    text-decoration: none;
    color: inherit;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.grippy-dir-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(var(--grippy-primary-rgb), 0);
    transition: box-shadow .3s ease;
}
.grippy-dir-card:hover {
    border-color: rgba(var(--grippy-primary-rgb), 0.5);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(var(--grippy-primary-rgb), 0.14), 0 4px 10px rgba(0,0,0,0.04);
}
.grippy-dir-card:hover .grippy-dir-view {
    gap: 10px;
}
.grippy-dir-card:hover .grippy-dir-view-arrow {
    transform: translateX(3px);
}
.grippy-dir-card--featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--grippy-primary), var(--grippy-primary-hover));
}
.grippy-dir-card--skeleton {
    pointer-events: none;
    animation: grippy-pulse 1.5s infinite;
}
@keyframes grippy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

.grippy-dir-card-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.grippy-dir-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--grippy-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.grippy-dir-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grippy-dir-avatar-ph {
    font-size: 28px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-dir-head-text { flex: 1; min-width: 0; }
.grippy-dir-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--grippy-text);
    margin-bottom: 2px;
}
.grippy-dir-featured-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--grippy-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.grippy-dir-rating-row {
    font-size: 13px;
    color: var(--grippy-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.grippy-dir-stars {
    color: #FBBF24;
    letter-spacing: 1px;
    font-size: 14px;
}
.grippy-dir-rating-text { color: var(--grippy-text-muted); }
.grippy-dir-exp {
    font-size: 12px;
    color: var(--grippy-text-muted);
}

.grippy-dir-tagline {
    font-size: 14px;
    color: var(--grippy-text);
    line-height: 1.4;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grippy-dir-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.grippy-dir-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.grippy-dir-pill--primary {
    background: rgba(253,97,81,.1);
    color: var(--grippy-primary);
}
.grippy-dir-pill--ghost {
    background: #F3F4F6;
    color: var(--grippy-text-muted);
}
.grippy-dir-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--grippy-border-light);
    margin-top: auto;
}
.grippy-dir-price {
    font-weight: 700;
    font-size: 15px;
    color: var(--grippy-text);
}
.grippy-dir-price small {
    font-weight: 500;
    color: var(--grippy-text-muted);
    font-size: 12px;
}
.grippy-dir-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--grippy-primary);
    font-weight: 700;
    padding: 8px 14px;
    background: rgba(var(--grippy-primary-rgb), 0.08);
    border-radius: 999px;
    transition: gap .2s ease, background .2s ease;
}
.grippy-dir-view:hover { background: rgba(var(--grippy-primary-rgb), 0.14); }
.grippy-dir-view-arrow {
    display: inline-block;
    transition: transform .2s ease;
}

.grippy-dir-pagination {
    text-align: center;
    margin-top: 32px;
}
.grippy-dir-pagination .grippy-btn { min-width: 200px; }

.grippy-dir-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--grippy-text-muted);
}

/* Skeleton loading */
.grippy-sk-avatar {
    width: 64px; height: 64px;
    background: #F3F4F6;
    border-radius: 50%;
    margin-bottom: 16px;
}
.grippy-sk-line {
    height: 14px;
    background: #F3F4F6;
    border-radius: 4px;
    margin-bottom: 8px;
}
.grippy-sk-line--lg { height: 18px; width: 70%; }
.grippy-sk-line--sm { width: 40%; }

/* Mobile responsive — superseded by the v3.4.164 block at the end of
 * this file (which uses a 1024px breakpoint to cover tablets too, plus
 * a stronger 640px phone breakpoint, with !important to win cascade). */

/* ====================================================================
   Public Profile Page (single dietician)
   ==================================================================== */

.grippy-pp {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 80px;
    font-family: var(--grippy-font, 'Inter', sans-serif);
}

.grippy-pp-cover {
    height: 240px;
    background: linear-gradient(135deg, rgba(253,97,81,.15), rgba(224,74,59,.25));
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 16px 16px 0 0;
    margin: 0 16px;
}
.grippy-pp-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.15));
    border-radius: 16px 16px 0 0;
}

.grippy-pp-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: end;
    padding: 0 32px 24px;
    margin: -60px 16px 0;
    position: relative;
    z-index: 1;
}
.grippy-pp-avatar {
    width: 140px; height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    background: var(--grippy-primary-light);
    box-shadow: var(--grippy-shadow-lg, 0 10px 25px rgba(0,0,0,.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.grippy-pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grippy-pp-avatar span {
    font-size: 48px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-pp-header-meta {
    padding-bottom: 8px;
}
.grippy-pp-name {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--grippy-text);
}
.grippy-pp-tagline {
    font-size: 16px;
    color: var(--grippy-text-muted);
    margin: 0 0 12px;
}
.grippy-pp-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--grippy-text-muted);
    margin-bottom: 12px;
}
.grippy-pp-stars {
    color: #FBBF24;
    letter-spacing: 2px;
    font-size: 16px;
}
.grippy-pp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.grippy-pp-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}
.grippy-pp-pill--primary {
    background: rgba(253,97,81,.1);
    color: var(--grippy-primary);
}
.grippy-pp-pill--ghost {
    background: #F3F4F6;
    color: var(--grippy-text-muted);
}

.grippy-pp-cta {
    text-align: right;
    padding-bottom: 8px;
}
.grippy-pp-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--grippy-text);
    margin-bottom: 8px;
}
.grippy-pp-price-suffix {
    font-size: 14px;
    color: var(--grippy-text-muted);
    font-weight: 400;
}

.grippy-pp-body {
    padding: 32px 32px 0;
    margin: 0 16px;
}
.grippy-pp-section {
    padding: 24px 0;
    border-top: 1px solid var(--grippy-border-light);
}
.grippy-pp-section:first-child { border-top: none; }
.grippy-pp-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--grippy-text);
}
.grippy-pp-bio p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--grippy-text);
    margin: 0 0 12px;
}
.grippy-pp-education {
    list-style: none;
    padding: 0;
    margin: 0;
}
.grippy-pp-education li {
    padding: 10px 0;
    font-size: 14px;
    color: var(--grippy-text);
    border-bottom: 1px solid var(--grippy-border-light);
}
.grippy-pp-education li:last-child { border-bottom: none; }

.grippy-pp-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}
.grippy-pp-review {
    padding: 16px;
    background: var(--grippy-body-bg, #F9FAFB);
    border-radius: 12px;
}
.grippy-pp-review-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}
.grippy-pp-review-avatar,
.grippy-pp-review-avatar-ph {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #E5E7EB;
    object-fit: cover;
}
.grippy-pp-review-name { font-weight: 600; font-size: 14px; color: var(--grippy-text); }
.grippy-pp-review-stars { color: #FBBF24; font-size: 13px; }
.grippy-pp-review-date { font-size: 12px; color: var(--grippy-text-muted); }
.grippy-pp-review-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--grippy-text);
}

.grippy-pp-no-reviews {
    color: var(--grippy-text-muted);
    font-size: 14px;
}

.grippy-pp-leave-review {
    margin-top: 24px;
    padding: 20px;
    border: 1px dashed var(--grippy-border);
    border-radius: 12px;
}
.grippy-pp-review-form h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}
.grippy-pp-rating-picker {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.grippy-pp-star-btn {
    background: none;
    border: none;
    color: #D1D5DB;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .15s, transform .15s;
}
.grippy-pp-star-btn:hover { transform: scale(1.1); }
.grippy-pp-star-btn.is-active { color: #FBBF24; }
.grippy-pp-review-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 12px;
}
.grippy-pp-review-status {
    font-size: 13px;
    color: var(--grippy-text-muted);
    margin-left: 12px;
    display: inline-block;
}

.grippy-pp-sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    .grippy-pp-header {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        margin-top: -70px;
        padding: 0 16px 16px;
    }
    .grippy-pp-header-meta { padding-bottom: 0; }
    .grippy-pp-rating-row { justify-content: center; }
    .grippy-pp-pills { justify-content: center; }
    .grippy-pp-cta { text-align: center; width: 100%; }
    .grippy-pp-name { font-size: 24px; }
    .grippy-pp-body { padding: 24px 16px 80px; }
    .grippy-pp-cta .grippy-pp-book { display: none; }
    .grippy-pp-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        padding: 12px 16px;
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--grippy-border);
        z-index: 100;
    }
    .grippy-pp-sticky-cta .grippy-btn { width: 100%; }
}

/* ====================================================================
   Dietician Switch Widget + Modal
   ==================================================================== */

.grippy-sw-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
}
.grippy-sw-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--grippy-primary-light);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grippy-sw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grippy-sw-avatar span {
    font-size: 24px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-sw-info { flex: 1; min-width: 0; }
.grippy-sw-label {
    font-size: 12px;
    color: var(--grippy-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .03em;
}
.grippy-sw-name { font-size: 16px; font-weight: 600; margin-top: 2px; }
.grippy-sw-tagline {
    font-size: 13px;
    color: var(--grippy-text-muted);
    margin-top: 2px;
}
.grippy-sw-rating {
    font-size: 12px;
    color: var(--grippy-text-muted);
    margin-top: 4px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.grippy-sw-stars { color: #FBBF24; }

.grippy-sw-empty {
    padding: 24px;
    text-align: center;
    background: var(--grippy-body-bg, #F9FAFB);
    border: 1px dashed var(--grippy-border);
    border-radius: 12px;
}

.grippy-sw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.grippy-sw-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.grippy-sw-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.grippy-sw-modal-header h3 { margin: 0; font-size: 20px; }
.grippy-sw-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    color: var(--grippy-text-muted);
}
.grippy-sw-modal-note {
    background: var(--grippy-primary-light);
    color: var(--grippy-primary-dark, #c4362a);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 16px;
}
.grippy-sw-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    min-height: 42px;
}
.grippy-sw-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.grippy-sw-card-small {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 10px;
    transition: border-color .15s;
}
.grippy-sw-card-small:hover { border-color: var(--grippy-primary); }
.grippy-sw-card-small--current {
    background: var(--grippy-primary-light);
    border-color: var(--grippy-primary);
}
.grippy-sw-avatar-sm {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #F3F4F6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.grippy-sw-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.grippy-sw-avatar-sm span {
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-sw-card-name { font-weight: 600; font-size: 14px; }
.grippy-sw-card-meta { font-size: 12px; color: var(--grippy-text-muted); display: flex; gap: 4px; align-items: center; }
.grippy-sw-current-badge {
    padding: 4px 10px;
    background: var(--grippy-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
}

body.grippy-modal-open { overflow: hidden; }

/* ====================================================================
   Client Dashboard: My Dietician + Review Modal
   ==================================================================== */

.grippy-my-dietician-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    margin-bottom: 24px;
}
.grippy-my-dietician-photo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--grippy-primary-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.grippy-my-dietician-photo img { width: 100%; height: 100%; object-fit: cover; }
.grippy-my-dietician-photo span {
    font-size: 22px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-my-dietician-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--grippy-text-muted);
    font-weight: 700;
    letter-spacing: .05em;
}
.grippy-my-dietician-name {
    font-size: 16px;
    font-weight: 600;
    margin-top: 2px;
}
.grippy-my-dietician-tagline {
    font-size: 13px;
    color: var(--grippy-text-muted);
    margin-top: 2px;
}
.grippy-my-dietician-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.grippy-table-dietician {
    display: flex;
    gap: 8px;
    align-items: center;
}
.grippy-table-dietician-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grippy-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.grippy-table-dietician-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grippy-table-dietician-avatar span {
    font-size: 13px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}

/* Review modal */
.grippy-review-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.grippy-review-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.grippy-review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.grippy-review-modal-header h3 { margin: 0; font-size: 18px; }
.grippy-review-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    color: var(--grippy-text-muted);
}
.grippy-rating-picker {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 16px;
}
.grippy-star-btn {
    background: none;
    border: none;
    color: #D1D5DB;
    font-size: 40px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color .15s, transform .15s;
}
.grippy-star-btn:hover { transform: scale(1.1); }
.grippy-star-btn.is-active { color: #FBBF24; }
.grippy-review-comment {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 16px;
    min-height: 80px;
}
.grippy-review-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.grippy-review-modal-status {
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
    color: var(--grippy-text-muted);
}
.grippy-review-modal-status--ok  { color: var(--grippy-success); }
.grippy-review-modal-status--err { color: var(--grippy-danger); }

@media (max-width: 640px) {
    .grippy-my-dietician-card {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }
    .grippy-my-dietician-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .grippy-my-dietician-actions .grippy-btn { flex: 1; }
}

/* Enhanced booking-flow dietician cards */
.grippy-dietician-featured {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    background: var(--grippy-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.grippy-dietician-rating {
    color: #FBBF24;
    font-weight: 700;
    font-size: 14px;
    margin: 6px 0 4px;
}
.grippy-dietician-rating-count {
    color: var(--grippy-text-muted);
    font-weight: 400;
    font-size: 12px;
}
.grippy-dietician-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 10px;
}
.grippy-dietician-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(var(--grippy-primary-rgb), 0.1);
    color: var(--grippy-primary);
}

/* ====================================================================
   Catalog Booking Template (Amelia-style card grid)
   ==================================================================== */

.grippy-cat {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    font-family: var(--grippy-font, 'Inter', sans-serif);
}

.grippy-cat-header { text-align: center; margin-bottom: 32px; }
.grippy-cat-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--grippy-text);
}
.grippy-cat-subtitle {
    font-size: 16px;
    color: var(--grippy-text-muted);
    margin: 0 0 20px;
}
.grippy-cat-search input {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 18px;
    border: 1px solid var(--grippy-border);
    border-radius: 999px;
    font-size: 15px;
    min-height: 48px;
    font-family: inherit;
    display: block;
}
.grippy-cat-search input:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(var(--grippy-primary-rgb), .15);
}

.grippy-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.grippy-cat-card {
    display: block;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.grippy-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(var(--grippy-primary-rgb), .12);
    border-color: var(--grippy-primary);
}
.grippy-cat-card--featured { border-color: var(--grippy-primary); }
.grippy-cat-ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 10px;
    background: var(--grippy-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
}

.grippy-cat-media {
    height: 220px;
    background: var(--grippy-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.grippy-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grippy-cat-media-ph {
    font-size: 64px;
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}

.grippy-cat-body { padding: 20px; }

.grippy-cat-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--grippy-text);
}
.grippy-cat-rating-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--grippy-text-muted);
    margin-bottom: 10px;
}
.grippy-cat-stars { color: #FBBF24; letter-spacing: 1px; font-size: 14px; }
.grippy-cat-new-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--grippy-primary-light);
    color: var(--grippy-primary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.grippy-cat-tagline {
    font-size: 14px;
    color: var(--grippy-text);
    line-height: 1.4;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grippy-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    min-height: 24px;
}
.grippy-cat-chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(var(--grippy-primary-rgb), 0.08);
    color: var(--grippy-primary);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}
.grippy-cat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--grippy-border-light);
}
.grippy-cat-price {
    font-weight: 700;
    font-size: 15px;
    color: var(--grippy-text);
}
.grippy-cat-price-suffix {
    font-weight: 400;
    color: var(--grippy-text-muted);
    font-size: 12px;
}
.grippy-cat-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--grippy-primary);
}

.grippy-cat-card--sk { pointer-events: none; animation: grippy-pulse 1.4s infinite; }
.grippy-cat-sk-img { height: 220px; background: #F3F4F6; }
.grippy-cat-sk-line { height: 14px; background: #F3F4F6; border-radius: 4px; margin: 16px 20px 8px; }
.grippy-cat-sk-line--sm { width: 50%; }
.grippy-cat-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--grippy-text-muted);
}

/* ====================================================================
   Sidebar Booking Template (Amelia-classic)
   ==================================================================== */

.grippy-sb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
    font-family: var(--grippy-font, 'Inter', sans-serif);
}

.grippy-sb-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grippy-sb-section {
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 16px;
    padding: 24px;
}
.grippy-sb-section h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
}

/* Dietician list */
.grippy-sb-diet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.grippy-sb-diet-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.grippy-sb-diet-card:hover { border-color: var(--grippy-primary); }
.grippy-sb-diet-card.is-selected {
    border-color: var(--grippy-primary);
    background: rgba(var(--grippy-primary-rgb), .05);
    box-shadow: 0 0 0 2px rgba(var(--grippy-primary-rgb), .15);
}
.grippy-sb-diet-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grippy-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.grippy-sb-diet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grippy-sb-diet-avatar span {
    font-weight: 700;
    color: var(--grippy-primary);
    text-transform: uppercase;
}
.grippy-sb-diet-name { font-weight: 600; font-size: 14px; }
.grippy-sb-diet-tagline { font-size: 12px; color: var(--grippy-text-muted); }
.grippy-sb-diet-rating { font-size: 12px; color: #FBBF24; margin-top: 2px; }
.grippy-sb-diet-rating span { color: var(--grippy-text-muted); }
.grippy-sb-diet-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--grippy-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

/* Package list */
.grippy-sb-pkg-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--grippy-border);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color .15s, background .15s;
}
.grippy-sb-pkg-card:hover { border-color: var(--grippy-primary); }
.grippy-sb-pkg-card.is-selected {
    border-color: var(--grippy-primary);
    background: rgba(var(--grippy-primary-rgb), .05);
    box-shadow: 0 0 0 2px rgba(var(--grippy-primary-rgb), .15);
}
.grippy-sb-pkg-card input { accent-color: var(--grippy-primary); }
.grippy-sb-pkg-main { flex: 1; }
.grippy-sb-pkg-name { font-weight: 600; font-size: 15px; }
.grippy-sb-pkg-meta { font-size: 12px; color: var(--grippy-text-muted); margin-top: 2px; }
.grippy-sb-pkg-savings {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.grippy-sb-pkg-price {
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: var(--grippy-text);
}
.grippy-sb-pkg-price span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--grippy-text-muted);
}
.grippy-sb-pkg-card--credits { background: #FFFBEB; border-color: #FBBF24; }
.grippy-sb-pkg-card--credits.is-selected {
    background: #FEF3C7;
    border-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, .25);
}

/* Schedule */
.grippy-sb-placeholder {
    padding: 24px;
    text-align: center;
    color: var(--grippy-text-muted);
    font-size: 14px;
    border: 1px dashed var(--grippy-border);
    border-radius: 8px;
}
.grippy-sb-date-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 6px;
}
.grippy-sb-date {
    flex-shrink: 0;
    width: 72px;
    padding: 10px 4px;
    border: 1px solid var(--grippy-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.grippy-sb-date.is-disabled { opacity: .35; cursor: not-allowed; background: #F9FAFB; }
.grippy-sb-date.is-available:hover { border-color: var(--grippy-primary); }
.grippy-sb-date.is-selected {
    background: var(--grippy-primary);
    border-color: var(--grippy-primary);
    color: #fff;
}
.grippy-sb-date-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--grippy-text-muted); }
.grippy-sb-date.is-selected .grippy-sb-date-dow,
.grippy-sb-date.is-selected .grippy-sb-date-mon { color: rgba(255,255,255,.85); }
.grippy-sb-date-num { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
.grippy-sb-date-mon { font-size: 11px; color: var(--grippy-text-muted); }

.grippy-sb-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.grippy-sb-slot {
    padding: 10px 16px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    min-height: 42px;
}
.grippy-sb-slot:hover { border-color: var(--grippy-primary); color: var(--grippy-primary); }
.grippy-sb-slot.is-selected {
    background: var(--grippy-primary);
    color: #fff;
    border-color: var(--grippy-primary);
}

/* Summary sidebar */
.grippy-sb-aside {
    position: sticky;
    top: 24px;
}
.grippy-sb-summary {
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.grippy-sb-summary-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
}
.grippy-sb-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--grippy-border-light);
    font-size: 14px;
}
.grippy-sb-summary-row:last-of-type { border-bottom: none; }
.grippy-sb-summary-label { color: var(--grippy-text-muted); }
.grippy-sb-summary-value {
    font-weight: 500;
    color: var(--grippy-text);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}
.grippy-sb-summary-divider {
    border-top: 1px solid var(--grippy-border);
    margin: 10px 0;
}
.grippy-sb-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0 16px;
    font-size: 14px;
}
.grippy-sb-summary-total-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--grippy-primary);
}
.grippy-sb-confirm { margin-top: 8px; }
.grippy-btn--full { width: 100%; }
.grippy-sb-summary-meta {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--grippy-text-muted);
}

@media (max-width: 900px) {
    .grippy-sb {
        grid-template-columns: 1fr;
    }
    .grippy-sb-aside {
        position: static;
    }
}

/* ====================================================================
   Directory Auth Bar + Auth Forms
   ==================================================================== */

.grippy-dir-auth-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--grippy-text-muted);
    background: var(--grippy-bg-muted);
    border-radius: 12px;
}
.grippy-dir-auth-hi strong { color: var(--grippy-text); }
.grippy-dir-auth-text { color: var(--grippy-text-muted); font-size: 13px; }

.grippy-auth {
    max-width: 480px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--grippy-border);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    font-family: var(--grippy-font), sans-serif;
}
.grippy-auth-header { padding: 28px 28px 0; }
.grippy-auth-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--grippy-text);
}
.grippy-auth-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--grippy-border);
}
.grippy-auth-tab {
    background: none;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--grippy-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.grippy-auth-tab:hover { color: var(--grippy-text); }
.grippy-auth-tab.active {
    color: var(--grippy-primary);
    border-bottom-color: var(--grippy-primary);
}
.grippy-auth-body { padding: 24px 28px 28px; }
.grippy-auth-form .grippy-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.grippy-auth-form .grippy-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.grippy-auth-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--grippy-text);
}
.grippy-auth-form input {
    padding: 10px 14px;
    border: 1px solid var(--grippy-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    min-height: 42px;
    transition: border-color .15s, box-shadow .15s;
}
.grippy-auth-form input:focus {
    outline: none;
    border-color: var(--grippy-primary);
    box-shadow: 0 0 0 3px rgba(var(--grippy-primary-rgb), 0.15);
}
.grippy-form-error {
    color: var(--grippy-danger);
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 8px;
}
.grippy-auth-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--grippy-border);
    font-size: 13px;
    color: var(--grippy-text-muted);
    text-align: center;
}
.grippy-auth-footer a {
    color: var(--grippy-primary);
    text-decoration: none;
    font-weight: 600;
}
.grippy-auth-footer a:hover { text-decoration: underline; }

/* =========================================================================
   Single-card wellness auth variant (v2.6.1)
   Drops the SaaS split-pane; centers a soft sage card on a calm backdrop.
   ========================================================================= */
.grippy-auth.grippy-auth--single {
    position: relative;
    min-height: 100vh;
    padding: 72px 20px 80px;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(148,165,163,0.22), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(148,165,163,0.14), transparent 55%),
        linear-gradient(180deg, #f6faf9 0%, #eaf3f0 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}
.grippy-auth--single .grippy-auth-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.grippy-auth--single .grippy-auth-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}
.grippy-auth--single .grippy-auth-blob--1 {
    width: 420px; height: 420px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, rgba(148,165,163,0.55), rgba(148,165,163,0) 70%);
}
.grippy-auth--single .grippy-auth-blob--2 {
    width: 520px; height: 520px;
    bottom: -200px; right: -160px;
    background: radial-gradient(circle, rgba(45,107,100,0.28), rgba(45,107,100,0) 70%);
}
.grippy-auth--single .grippy-auth-pane--solo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    padding: 0;
    background: transparent;
}
.grippy-auth--single .grippy-auth-card {
    background: #ffffff;
    border: 1px solid var(--ga-border, #e4ebe9);
    border-radius: 20px;
    padding: 40px 36px 32px;
    box-shadow:
        0 1px 3px rgba(15,46,42,0.06),
        0 24px 60px rgba(15,46,42,0.10);
}
.grippy-auth--single .grippy-auth-brandline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    justify-content: center;
}
.grippy-auth--single .grippy-auth-mark {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ga-primary, #94A5A3);
    box-shadow: 0 0 0 4px rgba(148,165,163,0.18);
    display: inline-block;
}
.grippy-auth--single .grippy-auth-wordmark {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ga-ink, #0f2e2a);
}
.grippy-auth--single .grippy-auth-header {
    text-align: center;
    margin-bottom: 24px;
}
.grippy-auth--single .grippy-auth-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ga-ink, #0f2e2a);
    margin: 0 0 8px;
    line-height: 1.2;
}
.grippy-auth--single .grippy-auth-subtitle {
    font-size: 14px;
    color: var(--ga-muted, #6b7f7b);
    margin: 0;
    line-height: 1.5;
}
.grippy-auth--single .grippy-auth-tabs {
    display: inline-flex;
    background: #f1f6f4;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    margin: 0 auto 24px;
    width: 100%;
}
.grippy-auth--single .grippy-auth-tab {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ga-muted, #6b7f7b);
    cursor: pointer;
    transition: all 0.2s ease;
}
.grippy-auth--single .grippy-auth-tab.active {
    background: #fff;
    color: var(--ga-ink, #0f2e2a);
    box-shadow: 0 1px 3px rgba(15,46,42,0.08);
}
.grippy-auth--single .grippy-auth-form input[type="text"],
.grippy-auth--single .grippy-auth-form input[type="email"],
.grippy-auth--single .grippy-auth-form input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--ga-border, #e4ebe9);
    border-radius: 10px;
    font-size: 14px;
    background: #fbfdfc;
    color: var(--ga-ink, #0f2e2a);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.grippy-auth--single .grippy-auth-form input:focus {
    outline: none;
    border-color: var(--ga-primary, #94A5A3);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(148,165,163,0.18);
}
.grippy-auth--single .grippy-auth-form button[type="submit"] {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #94A5A3 0%, #7a918e 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 6px 18px rgba(45,107,100,0.18);
}
.grippy-auth--single .grippy-auth-form button[type="submit"]:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45,107,100,0.24);
}
.grippy-auth--single .grippy-auth-form button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.grippy-auth--single .grippy-auth-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ga-border, #e4ebe9);
    text-align: center;
    font-size: 13px;
    color: var(--ga-muted, #6b7f7b);
}
.grippy-auth--single .grippy-auth-footer a {
    color: #2d6b64;
    text-decoration: none;
    font-weight: 600;
}
.grippy-auth--single .grippy-auth-footer a:hover { text-decoration: underline; }

/* Override the split grid from .grippy-auth-shell when single variant present */
.grippy-auth--single .grippy-auth-shell {
    display: block;
    max-width: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    min-height: 0;
    overflow: visible;
}
.grippy-auth--single .grippy-auth-aside { display: none; }

@media (max-width: 560px) {
    .grippy-auth.grippy-auth--single { padding: 40px 16px 56px; }
    .grippy-auth--single .grippy-auth-card { padding: 32px 24px 28px; border-radius: 18px; }
    .grippy-auth--single .grippy-auth-title { font-size: 22px; }
}

/* =========================================================================
   Wellness refresh (v2.6.2) — harmonize directory, profile, booking,
   dashboards with the new sign-in aesthetic. Sage palette, soft cards,
   consistent type. Applied as overlay so no legacy CSS is removed.
   ========================================================================= */
:root {
    --gw-sage: #94A5A3;
    --gw-sage-deep: #2d6b64;
    --gw-sage-soft: #eaf3f0;
    --gw-sage-tint: rgba(148,165,163,0.12);
    --gw-sage-ring: rgba(148,165,163,0.22);
    --gw-ink: #0f2e2a;
    --gw-ink-soft: #3a524e;
    --gw-muted: #6b7f7b;
    --gw-border: #e4ebe9;
    --gw-bg: #f6faf9;
    --gw-card-shadow: 0 1px 3px rgba(15,46,42,0.06), 0 18px 40px rgba(15,46,42,0.08);
    --gw-card-hover: 0 4px 12px rgba(15,46,42,0.08), 0 28px 60px rgba(15,46,42,0.12);
}

/* Buttons — sage gradient primary, soft outline secondary */
.grippy-btn, .grippy-btn--primary, .grippy-btn--secondary, .grippy-btn--outline, .grippy-btn--ghost {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 10px !important;
    min-height: 44px;
    padding: 10px 20px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
    line-height: 1.2;
}
.grippy-btn--primary {
    background: linear-gradient(135deg, #94A5A3 0%, #7a918e 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 18px rgba(45,107,100,0.18);
}
.grippy-btn--primary:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45,107,100,0.24);
}
.grippy-btn--secondary, .grippy-btn--outline {
    background: #fff !important;
    color: var(--gw-ink) !important;
    border: 1px solid var(--gw-border) !important;
}
.grippy-btn--secondary:hover, .grippy-btn--outline:hover {
    border-color: var(--gw-sage) !important;
    background: var(--gw-sage-soft) !important;
}
.grippy-btn--ghost {
    background: transparent !important;
    color: var(--gw-sage-deep) !important;
    border: 0 !important;
}
.grippy-btn--ghost:hover {
    background: var(--gw-sage-tint) !important;
}

/* Cards — unified rounded, sage border, soft shadow, gentle lift */
.grippy-dietician-card,
.grippy-package-card,
.grippy-dir-card,
.grippy-profile-card,
.grippy-review-card,
.grippy-card,
.grippy-stat-card {
    background: #ffffff !important;
    border: 1px solid var(--gw-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--gw-card-shadow) !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.grippy-dietician-card:hover,
.grippy-package-card:hover,
.grippy-dir-card:hover,
.grippy-profile-card:hover {
    transform: translateY(-3px);
    border-color: var(--gw-sage) !important;
    box-shadow: var(--gw-card-hover) !important;
}

/* Headings & text tones across plugin */
.grippy-step-title,
.grippy-dietician-name,
.grippy-package-name,
.grippy-section-title,
.grippy-profile-name,
.grippy-dir-name,
.grippy-dashboard-title,
.grippy-auth-title {
    color: var(--gw-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}
.grippy-step-subtitle,
.grippy-dietician-specialty,
.grippy-section-subtitle,
.grippy-dir-tagline,
.grippy-muted {
    color: var(--gw-muted) !important;
}

/* Chips / specialty pills */
.grippy-chip, .grippy-pill, .grippy-tag, .grippy-specialty-pill, .grippy-language-badge,
.grippy-dir-chip, .grippy-profile-chip {
    background: var(--gw-sage-tint) !important;
    color: var(--gw-sage-deep) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

/* Featured badge / new badge */
.grippy-badge-featured, .grippy-featured-ribbon {
    background: linear-gradient(135deg, #94A5A3, #2d6b64) !important;
    color: #fff !important;
    border: 0 !important;
    letter-spacing: 0.04em !important;
}

/* Inputs — sage focus ring */
.grippy-input,
.grippy-select,
.grippy-textarea,
.grippy-booking-flow input[type="text"],
.grippy-booking-flow input[type="email"],
.grippy-booking-flow input[type="search"],
.grippy-booking-flow select,
.grippy-booking-flow textarea,
.grippy-dir-search input,
.grippy-profile-editor input[type="text"],
.grippy-profile-editor input[type="email"],
.grippy-profile-editor input[type="number"],
.grippy-profile-editor textarea,
.grippy-profile-editor select {
    background: #fbfdfc !important;
    border: 1px solid var(--gw-border) !important;
    border-radius: 10px !important;
    color: var(--gw-ink) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.grippy-input:focus,
.grippy-select:focus,
.grippy-textarea:focus,
.grippy-booking-flow input:focus,
.grippy-booking-flow select:focus,
.grippy-booking-flow textarea:focus,
.grippy-dir-search input:focus,
.grippy-profile-editor input:focus,
.grippy-profile-editor textarea:focus,
.grippy-profile-editor select:focus {
    outline: none !important;
    border-color: var(--gw-sage) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px var(--gw-sage-ring) !important;
}

/* Progress bar (booking wizard) */
.grippy-progress-step.active .grippy-progress-dot,
.grippy-progress-step.completed .grippy-progress-dot {
    background: var(--gw-sage-deep) !important;
    border-color: var(--gw-sage-deep) !important;
    box-shadow: 0 0 0 4px var(--gw-sage-ring) !important;
}
.grippy-progress-step.completed .grippy-progress-line {
    background: var(--gw-sage) !important;
}

/* Calendar / time slot picker */
.grippy-calendar-day.selected,
.grippy-time-slot.selected,
.grippy-date-pill.selected {
    background: var(--gw-sage-deep) !important;
    color: #fff !important;
    border-color: var(--gw-sage-deep) !important;
}
.grippy-calendar-day:hover:not(.disabled),
.grippy-time-slot:hover:not(.disabled) {
    border-color: var(--gw-sage) !important;
    background: var(--gw-sage-soft) !important;
}

/* Rating stars — keep gold but warm */
.grippy-rating-star.filled, .grippy-star-filled {
    color: #f2b441 !important;
}

/* Directory page shell — soft wellness backdrop */
.grippy-dietician-directory,
.grippy-booking-catalog,
.grippy-booking-sidebar,
.grippy-dietician-profile-page {
    background: linear-gradient(180deg, var(--gw-bg) 0%, #ffffff 120px, #ffffff 100%);
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Dietitian avatar — soft sage ring */
.grippy-dietician-avatar,
.grippy-profile-photo,
.grippy-dir-avatar {
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 3px var(--gw-sage-ring), 0 6px 16px rgba(15,46,42,0.12) !important;
}

/* Profile hero — sage gradient wash instead of coral */
.grippy-profile-hero,
.grippy-profile-cover {
    background: linear-gradient(135deg, #eaf3f0 0%, #cfe0dc 50%, #94A5A3 100%) !important;
}

/* Sticky booking CTA (mobile profile page) */
.grippy-sticky-cta, .grippy-profile-cta-bar {
    border-top: 1px solid var(--gw-border) !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: saturate(180%) blur(10px);
}

/* Notices — softer sage info */
.grippy-notice {
    background: var(--gw-sage-soft) !important;
    border: 1px solid var(--gw-border) !important;
    border-radius: 14px !important;
    color: var(--gw-ink) !important;
}

/* Dashboards — clean white card scaffolding */
.grippy-dashboard,
.grippy-dietician-dashboard,
.grippy-client-dashboard {
    background: var(--gw-bg);
}
.grippy-dashboard-tabs .grippy-tab.active,
.grippy-dashboard-tab.active {
    color: var(--gw-sage-deep) !important;
    border-bottom-color: var(--gw-sage-deep) !important;
}

/* Links in plugin body */
.grippy-booking-flow a:not(.grippy-btn),
.grippy-dietician-profile-page a:not(.grippy-btn),
.grippy-dietician-directory a:not(.grippy-btn) {
    color: var(--gw-sage-deep);
}
.grippy-booking-flow a:not(.grippy-btn):hover,
.grippy-dietician-profile-page a:not(.grippy-btn):hover {
    color: var(--gw-ink);
}

/* =========================================================================
   v2.6.3 — Full-width Elementor breakout + reinforced wellness specificity
   Every Elementor container that holds one of our shortcodes goes edge-to-edge,
   and the inner content uses a wider (1280px) wellness max-width with
   generous gutters. Also strengthens card/button rules so legacy CSS and
   Elementor widget defaults can't override them.
   ========================================================================= */

/* --- Full-width breakout for Elementor containers hosting our shortcodes --- */
/* Elementor 3+ "flex container" (e-con) */
.elementor-element.e-con:has(#grippy-directory),
.elementor-element.e-con:has(#grippy-booking-flow),
.elementor-element.e-con:has(#grippy-booking-catalog),
.elementor-element.e-con:has(#grippy-booking-sidebar),
.elementor-element.e-con:has(.grippy-dietician-profile-page),
.elementor-element.e-con:has(.grippy-client-dashboard),
.elementor-element.e-con:has(.grippy-dietician-dashboard),
.elementor-element.e-con:has(#grippy-auth) {
    --container-max-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.elementor-element.e-con:has(#grippy-directory) > .e-con-inner,
.elementor-element.e-con:has(#grippy-booking-flow) > .e-con-inner,
.elementor-element.e-con:has(#grippy-booking-catalog) > .e-con-inner,
.elementor-element.e-con:has(#grippy-booking-sidebar) > .e-con-inner,
.elementor-element.e-con:has(.grippy-dietician-profile-page) > .e-con-inner,
.elementor-element.e-con:has(.grippy-client-dashboard) > .e-con-inner,
.elementor-element.e-con:has(.grippy-dietician-dashboard) > .e-con-inner,
.elementor-element.e-con:has(#grippy-auth) > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Legacy Elementor section/column (older themes) */
.elementor-section:has(#grippy-directory) > .elementor-container,
.elementor-section:has(#grippy-booking-flow) > .elementor-container,
.elementor-section:has(#grippy-booking-catalog) > .elementor-container,
.elementor-section:has(.grippy-dietician-profile-page) > .elementor-container,
.elementor-section:has(.grippy-client-dashboard) > .elementor-container,
.elementor-section:has(.grippy-dietician-dashboard) > .elementor-container,
.elementor-section:has(#grippy-auth) > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* The shortcode widget itself has its own padding we need to kill */
.elementor-widget-shortcode:has(#grippy-directory),
.elementor-widget-shortcode:has(#grippy-booking-flow),
.elementor-widget-shortcode:has(#grippy-booking-catalog),
.elementor-widget-shortcode:has(#grippy-booking-sidebar),
.elementor-widget-shortcode:has(.grippy-dietician-profile-page),
.elementor-widget-shortcode:has(.grippy-client-dashboard),
.elementor-widget-shortcode:has(.grippy-dietician-dashboard),
.elementor-widget-shortcode:has(#grippy-auth) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-widget-shortcode:has(#grippy-directory) .elementor-widget-container,
.elementor-widget-shortcode:has(#grippy-booking-flow) .elementor-widget-container,
.elementor-widget-shortcode:has(#grippy-booking-catalog) .elementor-widget-container,
.elementor-widget-shortcode:has(#grippy-booking-sidebar) .elementor-widget-container,
.elementor-widget-shortcode:has(.grippy-dietician-profile-page) .elementor-widget-container,
.elementor-widget-shortcode:has(.grippy-client-dashboard) .elementor-widget-container,
.elementor-widget-shortcode:has(.grippy-dietician-dashboard) .elementor-widget-container,
.elementor-widget-shortcode:has(#grippy-auth) .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Fallback: direct 100vw breakout for browsers without :has() support (rare now) */
#grippy-directory,
#grippy-booking-flow,
#grippy-booking-catalog,
#grippy-booking-sidebar,
.grippy-dietician-profile-page,
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- Inner content uses a new wellness container width so content is breathable --- */
.grippy-wellness-inner,
#grippy-directory > *,
#grippy-booking-flow > *,
#grippy-booking-catalog > *,
#grippy-booking-sidebar > *,
.grippy-dietician-profile-page > *,
.grippy-client-dashboard > *,
.grippy-dietician-dashboard > * {
    box-sizing: border-box;
}

/* Page-shell backdrops so the full-width area reads as intentional */
#grippy-directory,
#grippy-booking-catalog,
#grippy-booking-sidebar,
#grippy-booking-flow,
.grippy-dietician-profile-page,
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    background: linear-gradient(180deg, var(--gw-bg) 0%, #ffffff 220px, #ffffff 100%) !important;
    padding: 48px clamp(16px, 5vw, 64px) 80px !important;
}

/* Inner content container — centers + caps at 1320px for readability */
#grippy-directory .grippy-dir-wrap,
#grippy-directory .grippy-dir-inner,
#grippy-booking-flow .grippy-booking-inner,
#grippy-booking-catalog .grippy-catalog-inner,
.grippy-dietician-profile-page .grippy-profile-wrap,
.grippy-client-dashboard .grippy-dashboard-inner,
.grippy-dietician-dashboard .grippy-dashboard-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Reinforced specificity so directory/booking/profile pick up wellness look --- */
body .grippy-btn,
body .grippy-btn--primary,
body .grippy-btn--secondary {
    border-radius: 10px !important;
    font-weight: 600 !important;
}
body .grippy-btn--primary {
    background: linear-gradient(135deg, #94A5A3 0%, #7a918e 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 18px rgba(45,107,100,0.18) !important;
}
body .grippy-dir-card,
body .grippy-dietician-card,
body .grippy-package-card,
body .grippy-profile-card,
body .grippy-review-card {
    border-radius: 18px !important;
    border: 1px solid var(--gw-border) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,46,42,0.06), 0 12px 32px rgba(15,46,42,0.07) !important;
    overflow: hidden;
}
body .grippy-dir-card:hover,
body .grippy-dietician-card:hover,
body .grippy-package-card:hover,
body .grippy-profile-card:hover {
    transform: translateY(-3px);
    border-color: var(--gw-sage) !important;
    box-shadow: 0 4px 12px rgba(15,46,42,0.08), 0 28px 60px rgba(15,46,42,0.12) !important;
}

/* Directory grid — responsive, airy */
body #grippy-directory .grippy-dir-grid,
body .grippy-dir-grid,
body .grippy-dietician-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 24px !important;
}
/* The old 1400+ rule used to set minmax(380px) here — replaced by the
 * v3.4.163 directory-density rules further down (lines below), which
 * tighten cards so 3-4 fit per row at typical desktop widths. */

/* Chips inside directory cards */
body .grippy-dir-card .grippy-dir-chip,
body .grippy-dir-card .grippy-chip,
body .grippy-dietician-card .grippy-chip,
body .grippy-profile-card .grippy-chip {
    background: var(--gw-sage-tint) !important;
    color: var(--gw-sage-deep) !important;
    border: 0 !important;
}

/* Elementor theme often injects its own h1–h3 on our shortcodes — reset within plugin */
#grippy-directory h1, #grippy-directory h2, #grippy-directory h3,
#grippy-booking-flow h1, #grippy-booking-flow h2, #grippy-booking-flow h3,
.grippy-dietician-profile-page h1, .grippy-dietician-profile-page h2, .grippy-dietician-profile-page h3 {
    color: var(--gw-ink) !important;
    font-family: inherit;
    letter-spacing: -0.015em !important;
}

/* Profile hero — full-width cinematic band */
.grippy-dietician-profile-page .grippy-profile-hero,
.grippy-dietician-profile-page .grippy-profile-cover {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: linear-gradient(135deg, #eaf3f0 0%, #cfe0dc 45%, #94A5A3 100%) !important;
    padding: 80px clamp(16px, 5vw, 64px) !important;
}

/* Kill any legacy white page wrapper boxed padding that shows white sides */
body.page #grippy-directory,
body.page #grippy-booking-flow,
body.page .grippy-dietician-profile-page,
body.page .grippy-client-dashboard,
body.page .grippy-dietician-dashboard {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Mobile tune */
@media (max-width: 640px) {
    #grippy-directory,
    #grippy-booking-catalog,
    #grippy-booking-sidebar,
    #grippy-booking-flow,
    .grippy-dietician-profile-page,
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        padding: 28px 16px 56px !important;
    }
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .grippy-dietician-profile-page .grippy-profile-hero {
        padding: 56px 20px !important;
    }
}

/* =========================================================================
   v2.6.3 — Header offset fix
   The site header (Elementor Pro sticky header) overlaps our plugin content.
   Add a safe scroll/spacing offset so the first visible content sits below
   the header on all plugin pages and anchor links don't land underneath it.
   ========================================================================= */
:root {
    /* Site header is ~88px desktop / ~72px mobile on undercontrol. A small buffer
       keeps the top edge airy. Tweak here if the header ever changes. */
    --grippy-header-offset: 120px;
}
@media (max-width: 782px) {
    :root { --grippy-header-offset: 90px; }
}

/* Push all plugin page shells below the sticky header */
body #grippy-directory,
body #grippy-booking-flow,
body #grippy-booking-catalog,
body #grippy-booking-sidebar,
body .grippy-dietician-profile-page,
body .grippy-client-dashboard,
body .grippy-dietician-dashboard,
body #grippy-auth {
    padding-top: var(--grippy-header-offset) !important;
    scroll-margin-top: var(--grippy-header-offset);
}

/* Auth single-card shell already has its own 100vh layout — just offset
   the flex start so the card isn't hidden under the header. */
body .grippy-auth.grippy-auth--single {
    padding-top: var(--grippy-header-offset) !important;
    min-height: calc(100vh - 0px);
}

/* For pages where the site template injects a "page title" bar above our
   shortcode, the offset still applies — the bar stays visible under the
   header and our content picks up below it. */
.single .grippy-dietician-profile-page,
.page .grippy-dietician-profile-page {
    padding-top: var(--grippy-header-offset) !important;
}

/* Anchor jumps (e.g. scroll-to-time-slot) shouldn't hide under header either */
.grippy-calendar, .grippy-time-slots, .grippy-package-card,
.grippy-step-content, .grippy-profile-section {
    scroll-margin-top: calc(var(--grippy-header-offset) + 16px);
}

/* ================================
   Step 2 Polish — centered + premium
   ================================ */

.grippy-booking-flow .grippy-step-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.grippy-booking-flow .grippy-step-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 auto 6px;
}

.grippy-booking-flow .grippy-step-subtitle,
.grippy-booking-flow .grippy-step-content > p:first-of-type {
    text-align: center;
    color: var(--grippy-text-muted);
    margin: 0 auto 28px;
    max-width: 560px;
}

/* Credit box — glassy pill with soft gradient */
.grippy-booking-flow .grippy-credit-box {
    max-width: 560px;
    margin: 0 auto 28px;
    padding: 22px 28px;
    border-radius: 20px;
    background: linear-gradient(135deg,
        rgba(var(--grippy-primary-rgb), 0.08) 0%,
        rgba(var(--grippy-primary-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--grippy-primary-rgb), 0.18);
    box-shadow:
        0 4px 18px rgba(var(--grippy-primary-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.grippy-booking-flow .grippy-credit-box strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--grippy-text);
}

.grippy-booking-flow .grippy-credit-count {
    display: inline-block;
    min-width: 34px;
    padding: 2px 10px;
    margin: 0 4px;
    border-radius: 999px;
    background: var(--grippy-primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(var(--grippy-primary-rgb), 0.35);
}

.grippy-booking-flow .grippy-use-credits-btn {
    min-width: 220px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--grippy-primary) 0%, var(--grippy-primary-dark, #e04a3b) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(var(--grippy-primary-rgb), 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.grippy-booking-flow .grippy-use-credits-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--grippy-primary-rgb), 0.42);
}

/* Soft divider between credit box and packages */
.grippy-booking-flow .grippy-credit-box + .grippy-packages-grid::before {
    content: 'or choose a package';
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grippy-text-muted);
    margin: 4px 0 14px;
    position: relative;
}

.grippy-booking-flow .grippy-credit-box + .grippy-packages-grid::before {
    background:
        linear-gradient(var(--grippy-bg), var(--grippy-bg)) padding-box,
        linear-gradient(90deg, transparent, var(--grippy-border) 30%, var(--grippy-border) 70%, transparent) border-box;
}

/* Packages grid — full container width, centered */
.grippy-booking-flow .grippy-packages-grid {
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grippy-booking-flow .grippy-booking-flow,
.grippy-booking-flow {
    margin-left: auto;
    margin-right: auto;
}

.grippy-booking-flow .grippy-package-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 12px rgba(16, 24, 40, 0.04);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
}

.grippy-booking-flow .grippy-package-card:hover {
    transform: translateY(-4px);
    border-color: var(--grippy-primary);
    box-shadow:
        0 12px 30px rgba(var(--grippy-primary-rgb), 0.18),
        0 2px 6px rgba(16, 24, 40, 0.06);
}

.grippy-booking-flow .grippy-package-card .grippy-package-price {
    background: linear-gradient(135deg, var(--grippy-primary), var(--grippy-primary-dark, #e04a3b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.grippy-booking-flow .grippy-package-card .grippy-select-package {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 11px 18px;
}

.grippy-booking-flow .grippy-package-card:hover .grippy-select-package {
    background: linear-gradient(135deg, var(--grippy-primary), var(--grippy-primary-dark, #e04a3b));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(var(--grippy-primary-rgb), 0.3);
}

/* Center nav buttons */
.grippy-booking-flow .grippy-step-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

@media (max-width: 640px) {
    .grippy-booking-flow .grippy-credit-box {
        padding: 18px 20px;
    }
    .grippy-booking-flow .grippy-step-title {
        font-size: 22px;
    }
}


/* =========================================================================
   GRIPPY BOOKING — MOBILE POLISH PASS (tablet 900px, phone 640px, small 400px)
   ========================================================================= */

/* ---------- Tablet <=900px ---------- */
@media (max-width: 900px) {
    .grippy-dir-layout { grid-template-columns: 1fr; gap: 16px; }
    .grippy-dir-filter-toggle {
        display: inline-flex !important;
        align-items: center; gap: 8px;
        padding: 10px 16px; min-height: 44px;
        border: 1px solid var(--grippy-border, #E5E7EB);
        background: #fff; border-radius: 10px;
        font-weight: 600; cursor: pointer;
    }
    .grippy-dir-filters {
        position: fixed; inset: 0; background: #fff;
        z-index: 9999; overflow-y: auto; padding: 20px;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .grippy-dir-filters.is-open { transform: translateX(0); }
    .grippy-dir-filter-close { display: inline-flex !important; }
    .grippy-dashboard-sidebar-layout { grid-template-columns: 1fr !important; }
    .grippy-dashboard-sidebar { position: static !important; margin-bottom: 16px; }
    .grippy-sb { grid-template-columns: 1fr !important; }
    .grippy-sb-aside { position: static !important; margin-top: 20px; }
    .grippy-charts-row { grid-template-columns: 1fr !important; }
}

/* ---------- Phone <=640px ---------- */
@media (max-width: 640px) {
    .grippy-dir, .grippy-cat, .grippy-sb, .grippy-pp,
    .grippy-booking-flow, .grippy-client-dashboard,
    .grippy-dietician-dashboard, .grippy-auth {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .grippy-dir-hero { padding: 32px 16px !important; }
    .grippy-dir-title { font-size: 26px !important; line-height: 1.25 !important; }
    .grippy-dir-subtitle { font-size: 14px !important; }
    .grippy-dir-toolbar {
        flex-direction: column; gap: 10px; align-items: stretch;
    }
    .grippy-dir-search, .grippy-dir-sort { width: 100%; }
    .grippy-dir-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .grippy-dir-card { padding: 16px !important; }
    .grippy-dir-card-foot { flex-wrap: wrap; gap: 8px; }
    .grippy-dir-view { width: 100%; justify-content: center; }

    .grippy-cat-grid { grid-template-columns: 1fr !important; gap: 16px; }
    .grippy-cat-title { font-size: 26px !important; }
    .grippy-cat-media { height: 200px; }

    .grippy-booking-flow { padding: 16px !important; }
    .grippy-progress-bar {
        gap: 4px !important; overflow-x: auto;
        padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    }
    .grippy-progress-bar::-webkit-scrollbar { display: none; }
    .grippy-progress-step {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 36px;
    }
    .grippy-step-content { padding: 16px !important; max-width: 100% !important; }
    .grippy-step-title { font-size: 20px !important; }
    .grippy-step-subtitle { font-size: 13px !important; }
    .grippy-step-nav { flex-direction: column-reverse; gap: 10px; }
    .grippy-step-nav .grippy-btn { width: 100%; }

    .grippy-dietician-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .grippy-dietician-card { padding: 14px !important; }

    .grippy-packages-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        max-width: 100% !important;
    }
    .grippy-package-card { padding: 20px !important; }
    .grippy-credit-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px; padding: 16px !important;
    }
    .grippy-credit-info { width: 100%; }

    .grippy-schedule-picker { padding: 0 !important; }
    .grippy-calendar { padding: 14px !important; }
    .grippy-calendar-header { flex-wrap: wrap; gap: 8px; }
    .grippy-calendar-month { font-size: 14px !important; }
    .grippy-calendar-day { font-size: 13px !important; min-height: 40px; }
    .grippy-calendar-day-label { font-size: 10px !important; }
    .grippy-time-slots { padding: 14px !important; }
    .grippy-time-slots-title { font-size: 14px !important; }
    .grippy-time-slot {
        font-size: 13px !important;
        padding: 10px 8px !important;
        min-height: 44px;
    }
    .grippy-time-slots > div:not(.grippy-time-slots-title):not(.grippy-time-slots-empty) {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    }

    .grippy-sb-date-strip {
        gap: 6px; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .grippy-sb-date-strip::-webkit-scrollbar { display: none; }
    .grippy-sb-date {
        flex: 0 0 56px !important;
        min-width: 56px;
        padding: 8px 4px !important;
    }
    .grippy-sb-slots {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
    }
    .grippy-sb-pkg-card { flex-direction: column; align-items: flex-start; }
    .grippy-sb-pkg-price { align-self: flex-end; }

    .grippy-confirm-summary { padding: 16px !important; }
    .grippy-confirm-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 2px;
    }
    .grippy-confirm-label { font-size: 12px; }
    .grippy-confirm-value { font-size: 14px !important; text-align: left !important; }

    .grippy-pp-cover { height: 140px !important; }
    .grippy-pp-header {
        flex-direction: column;
        text-align: center;
        padding: 0 16px !important;
        margin-top: -50px;
    }
    .grippy-pp-avatar {
        width: 100px !important; height: 100px !important;
        margin: 0 auto;
    }
    .grippy-pp-header-meta { width: 100%; }
    .grippy-pp-name { font-size: 22px !important; }
    .grippy-pp-pills { justify-content: center; }
    .grippy-pp-cta {
        position: sticky; bottom: 0; left: 0; right: 0;
        z-index: 50;
        margin: 16px -16px 0;
        padding: 12px 16px;
        background: #fff;
        border-top: 1px solid var(--grippy-border, #E5E7EB);
        box-shadow: 0 -4px 12px rgba(0,0,0,.05);
        display: flex; gap: 12px; align-items: center;
    }
    .grippy-pp-cta .grippy-btn { flex: 1; min-height: 48px; }
    .grippy-pp-section { padding: 16px !important; }

    .grippy-auth-shell { grid-template-columns: 1fr !important; }
    .grippy-auth-aside { display: none; }
    .grippy-auth-card { padding: 20px !important; }
    .grippy-form-row { grid-template-columns: 1fr !important; }

    .grippy-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 4px; padding-bottom: 2px;
    }
    .grippy-tabs::-webkit-scrollbar { display: none; }
    .grippy-tab-btn {
        flex: 0 0 auto !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 44px;
        white-space: nowrap;
    }

    .grippy-stat-cards { grid-template-columns: 1fr !important; gap: 12px; }
    .grippy-dashboard-grid { grid-template-columns: 1fr !important; }
    .grippy-dashboard-nav-item { padding: 10px 12px; }
    .grippy-dashboard-section-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .grippy-dashboard-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .grippy-dashboard-table { min-width: 560px; }

    .grippy-field-grid { grid-template-columns: 1fr !important; }
    .grippy-profile-top { flex-direction: column; align-items: stretch !important; }
    .grippy-photo-row { flex-direction: column; align-items: stretch; }
    .grippy-profile-actions { flex-direction: column-reverse; gap: 10px; }
    .grippy-profile-actions .grippy-btn { width: 100%; }

    .grippy-clients-grid { grid-template-columns: 1fr !important; }
    .grippy-reviews-summary { flex-direction: column; align-items: stretch !important; }

    .grippy-sw-modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        position: fixed;
        bottom: 0; left: 0; right: 0;
    }
    .grippy-sw-grid { grid-template-columns: 1fr !important; }
    .grippy-sw-card { flex-direction: column; text-align: center; }

    .grippy-review-modal { width: calc(100% - 24px) !important; max-width: 100% !important; }
    .grippy-modal { width: calc(100% - 24px) !important; max-height: 90vh; margin: 12px; }

    .grippy-btn { min-height: 44px; font-size: 14px; }
    .grippy-btn--sm { min-height: 36px; }

    .grippy-auth input[type="text"],
    .grippy-auth input[type="email"],
    .grippy-auth input[type="password"],
    .grippy-dir-search input,
    .grippy-textarea,
    .grippy-field input, .grippy-field textarea, .grippy-field select,
    .grippy-form-group input, .grippy-form-group textarea, .grippy-form-group select {
        font-size: 16px !important;
    }

    .grippy-availability-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        padding: 14px !important;
    }
    .grippy-availability-times { flex-wrap: wrap; gap: 8px; }
    .grippy-availability-time-input { min-width: 0; flex: 1; }
    .grippy-doc-grid { grid-template-columns: 1fr !important; }
    .grippy-credit-count { font-size: 28px !important; }
}

/* ---------- Small phone <=400px ---------- */
@media (max-width: 400px) {
    .grippy-dir-title { font-size: 22px !important; }
    .grippy-step-title { font-size: 18px !important; }
    .grippy-package-card { padding: 16px !important; }
    .grippy-package-price { font-size: 28px !important; }
    .grippy-progress-step { font-size: 11px !important; padding: 6px 8px !important; }
    .grippy-calendar-day { font-size: 12px !important; min-height: 36px; }
    .grippy-time-slot { font-size: 12px !important; padding: 8px 4px !important; }
    .grippy-tab-btn { font-size: 12px !important; padding: 10px 10px !important; }
}

/* =============================================================================
   BOOKING FLOW v2.4 -- Filters, Scheduling Modes, Multi-session Progress, Credit Stepper
   ============================================================================= */

/* ---- Step 1 Filter Bar ---- */
.grippy-bf-filters {
    background: var(--grippy-card-bg, #fff);
    border: 1px solid var(--grippy-border, #E5E7EB);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.grippy-bf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.grippy-bf-search-icon {
    position: absolute;
    left: 12px;
    font-size: 15px;
    pointer-events: none;
    opacity: .7;
}
.grippy-bf-search {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--grippy-border, #E5E7EB);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    background: var(--grippy-bg, #F9FAFB);
    box-sizing: border-box;
}
.grippy-bf-search:focus { border-color: var(--grippy-primary, #fd6151); }
.grippy-bf-filter-group { display: flex; flex-direction: column; gap: 8px; }
.grippy-bf-filter-inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.grippy-bf-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--grippy-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.grippy-bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grippy-bf-chip {
    padding: 5px 12px;
    border: 1px solid var(--grippy-border, #E5E7EB);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: var(--grippy-text, #374151);
    transition: all .18s;
    min-height: 32px;
}
.grippy-bf-chip:hover { border-color: var(--grippy-primary, #fd6151); color: var(--grippy-primary, #fd6151); }
.grippy-bf-chip.active {
    background: var(--grippy-primary, #fd6151);
    border-color: var(--grippy-primary, #fd6151);
    color: #fff;
}
.grippy-bf-rating-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.grippy-bf-rating-btn {
    padding: 5px 12px;
    border: 1px solid var(--grippy-border, #E5E7EB);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    color: var(--grippy-text, #374151);
    transition: all .18s;
    min-height: 32px;
}
.grippy-bf-rating-btn:hover { border-color: #FBBF24; color: #B45309; }
.grippy-bf-rating-btn.active { background: #FEF3C7; border-color: #FBBF24; color: #B45309; font-weight: 600; }
.grippy-bf-empty {
    padding: 32px;
    text-align: center;
    color: var(--grippy-text-muted, #6B7280);
    font-size: 14px;
    grid-column: 1 / -1;
}
.grippy-credit-hint {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: #166534;
    margin-bottom: 16px;
}

/* ---- Credit Quantity Stepper (Step 2) ---- */
.grippy-credit-qty-wrap { margin-bottom: 12px; }
.grippy-credit-qty-label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 8px; color: var(--grippy-text, #374151); }
.grippy-credit-qty-row { display: flex; align-items: center; gap: 10px; }
.grippy-credit-qty-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--grippy-primary, #fd6151);
    background: #fff;
    color: var(--grippy-primary, #fd6151);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.grippy-credit-qty-btn:hover { background: var(--grippy-primary, #fd6151); color: #fff; }
.grippy-credit-qty-val { font-size: 28px; font-weight: 700; color: var(--grippy-primary, #fd6151); min-width: 32px; text-align: center; }
.grippy-credit-qty-max { font-size: 13px; color: var(--grippy-text-muted, #6B7280); }
.grippy-or-divider {
    text-align: center;
    position: relative;
    margin: 24px 0;
    color: var(--grippy-text-muted, #6B7280);
    font-size: 13px;
}
.grippy-or-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--grippy-border, #E5E7EB);
}
.grippy-or-divider span { background: var(--grippy-card-bg, #fff); padding: 0 12px; position: relative; }

/* ---- Scheduling Mode Cards (Step 3a) ---- */
.grippy-sched-modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.grippy-sched-mode {
    border: 2px solid var(--grippy-border, #E5E7EB);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
.grippy-sched-mode:hover { border-color: var(--grippy-primary, #fd6151); box-shadow: 0 4px 12px rgba(253,97,81,.12); transform: translateY(-2px); }
.grippy-sched-mode.active {
    border-color: var(--grippy-primary, #fd6151);
    background: #FFF0EE;
    box-shadow: 0 0 0 3px rgba(253,97,81,.15);
}
.grippy-sched-mode-icon { font-size: 28px; margin-bottom: 8px; }
.grippy-sched-mode-label { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--grippy-text, #111827); }
.grippy-sched-mode-desc { font-size: 12px; color: var(--grippy-text-muted, #6B7280); line-height: 1.4; }

/* ---- Session Progress Dots (Step 3b multi) ---- */
.grippy-session-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
}
.grippy-session-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--grippy-border, #E5E7EB);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    color: var(--grippy-text-muted, #9CA3AF);
    transition: all .2s;
    flex-shrink: 0;
}
.grippy-session-dot.active {
    border-color: var(--grippy-primary, #fd6151);
    background: var(--grippy-primary, #fd6151);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(253,97,81,.2);
}
.grippy-session-dot.done {
    border-color: #10B981;
    background: #10B981;
    color: #fff;
}
.grippy-session-dot-line {
    height: 2px;
    flex: 1;
    background: var(--grippy-border, #E5E7EB);
    max-width: 40px;
    transition: background .2s;
}
.grippy-session-dot-line.done { background: #10B981; }

/* Suggested date highlight on calendar */
.grippy-calendar-day.suggested {
    background: rgba(253,97,81,.08);
    border: 1px dashed var(--grippy-primary, #fd6151);
    border-radius: 6px;
    color: var(--grippy-primary, #fd6151);
    font-weight: 600;
}

/* ---- Confirm: multi-session session rows ---- */
.grippy-confirm-sessions-header {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--grippy-border, #E5E7EB);
    margin-bottom: 6px;
}
.grippy-confirm-session-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--grippy-border, #E5E7EB);
    font-size: 14px;
}
.grippy-confirm-session-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--grippy-primary, #fd6151);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.grippy-confirm-session-date { flex: 1; color: var(--grippy-text, #374151); font-weight: 500; }
.grippy-confirm-session-time { color: var(--grippy-text-muted, #6B7280); font-size: 13px; }

/* ---- Time slot grid ---- */
.grippy-time-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

/* ---- Mobile responsive ---- */
@media (max-width: 640px) {
    .grippy-bf-filters { padding: 12px; gap: 12px; }
    .grippy-bf-filter-inline { flex-direction: column; align-items: flex-start; }
    .grippy-sched-modes { grid-template-columns: 1fr 1fr; gap: 10px; }
    .grippy-sched-mode { padding: 14px 10px; }
    .grippy-sched-mode-icon { font-size: 22px; }
    .grippy-confirm-session-time { display: block; font-size: 12px; }
    .grippy-time-slot-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media (max-width: 400px) {
    .grippy-sched-modes { grid-template-columns: 1fr; }
}
/* ==========================================================================
   GRIPPY BOOKING FLOW — v2 PREMIUM REDESIGN
   Elegant, modern, customer-friendly overrides for /book/
   ========================================================================== */

:root {
    --gb-primary:      #94A5A3;
    --gb-primary-dark: #7A8C8A;
    --gb-primary-rgb:  148, 165, 163;
    --gb-accent:       #2A9D8F;
    --gb-ink:          #0F172A;
    --gb-text:         #334155;
    --gb-muted:        #64748B;
    --gb-border:       #E2E8F0;
    --gb-bg-soft:      #F8FAFC;
    --gb-bg-hero:      linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 45%, #F5F9F8 100%);
    --gb-card-shadow:  0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    --gb-card-hover:   0 8px 28px rgba(148,165,163,.18), 0 2px 6px rgba(15,23,42,.06);
    --gb-radius-lg:    20px;
    --gb-radius-md:    14px;
    --gb-radius-sm:    10px;
    --gb-ease:         cubic-bezier(.4,0,.2,1);
}

/* ---------- Container ---------- */
#grippy-booking-flow {
    max-width: 1120px;
    margin: 32px auto;
    padding: 0 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gb-text);
}
#grippy-booking-flow * { box-sizing: border-box; }

/* ---------- Hero Progress Bar — dot + label STACKED vertically ----------
   Each step is a vertical mini-column: dot on top, label directly below.
   Connector lines align with the dots (not the labels). Green for done. */
.grippy-progress-bar,
.grippy-booking-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 0 auto 40px;
    padding: 18px 36px 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    max-width: 760px;
    width: 100%;
    box-sizing: border-box;
}
.grippy-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 110px;
    position: relative;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color .25s ease;
    text-align: center;
    line-height: 1.2;
}
.grippy-progress-step::before {
    content: attr(data-step);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    border: 2px solid transparent;
    transition: all .25s ease;
    flex-shrink: 0;
    line-height: 1;
}
.grippy-progress-step.active { color: #0F172A; }
.grippy-progress-step.active::before {
    background: #16A34A;        /* brand green for active */
    color: #fff;
    border-color: #16A34A;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
}
.grippy-progress-step.completed { color: #16A34A; }
.grippy-progress-step.completed::before {
    background: #16A34A;        /* green tick */
    color: #fff;
    border-color: #16A34A;
    content: '\2713';
    font-size: 15px;
    font-weight: 800;
}
/* Connector line — sits BETWEEN dots at the dot's vertical center.
   Starts just to the RIGHT of this dot and ends just BEFORE the next
   one, so the line never crosses or sits above the numbered circles. */
.grippy-progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;                   /* dot is 32px tall → midline = 16px */
    left: calc(50% + 18px);      /* dot is 32px wide → start just past right edge */
    right: calc(-50% + 18px);    /* end just before next dot's left edge */
    height: 2px;
    background: #E5E7EB;
    border-radius: 2px;
    transform: translateY(-1px); /* center the 2px line on the dot's midline */
    transition: background .25s ease;
    pointer-events: none;
}
.grippy-progress-step.completed:not(:last-child)::after { background: #16A34A; }

/* Tighter on tablet */
@media (max-width: 900px) {
    .grippy-progress-bar,
    .grippy-booking-progress {
        max-width: 100%;
        padding: 14px 20px 12px;
        border-radius: 24px;
    }
    .grippy-progress-step { width: 84px; font-size: 12px; }
}
/* Compact on phone — labels hidden, dots only */
@media (max-width: 560px) {
    .grippy-progress-bar,
    .grippy-booking-progress {
        padding: 12px 16px;
    }
    .grippy-progress-step {
        font-size: 0;
        width: 48px;
        gap: 0;
    }
    .grippy-progress-step::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .grippy-progress-step:not(:last-child)::after {
        top: 13px;
        left: calc(50% + 18px);
        right: calc(-50% + 18px);
    }
}

/* ---------- Step Titles ---------- */
.grippy-step-content { animation: gbFadeIn .4s var(--gb-ease); }
@keyframes gbFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.grippy-step-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--gb-ink);
    margin: 0 0 6px;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.grippy-step-subtitle {
    color: var(--gb-muted);
    font-size: 15px;
    margin: 0 0 24px;
    line-height: 1.5;
}

/* ---------- Credit hint (top banner) ---------- */
.grippy-credit-hint {
    background: var(--gb-bg-hero);
    border: 1px solid rgba(var(--gb-primary-rgb), .25);
    border-radius: var(--gb-radius-md);
    padding: 14px 20px 14px 52px;
    position: relative;
    color: var(--gb-ink);
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.grippy-credit-hint::before {
    content: '✨';
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.grippy-credit-hint strong { color: var(--gb-primary-dark); font-weight: 700; }

/* ---------- Filter Bar ---------- */
.grippy-bf-filters {
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 22px 24px;
    margin: 0 0 28px;
    box-shadow: var(--gb-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.grippy-bf-search-wrap { position: relative; }
.grippy-bf-search-icon {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    opacity: .6;
    pointer-events: none;
    font-size: 16px;
}
.grippy-bf-search {
    width: 100%;
    padding: 14px 18px 14px 46px;
    border: 1.5px solid var(--gb-border);
    border-radius: 100px;
    font-size: 15px;
    background: var(--gb-bg-soft);
    transition: all .2s var(--gb-ease);
    outline: none;
    font-family: inherit;
}
.grippy-bf-search:focus {
    border-color: var(--gb-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--gb-primary-rgb), .14);
}
.grippy-bf-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.grippy-bf-filter-inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.grippy-bf-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gb-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}
.grippy-bf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.grippy-bf-chip,
.grippy-bf-rating-btn {
    padding: 8px 16px;
    border: 1.5px solid var(--gb-border);
    background: #fff;
    color: var(--gb-text);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s var(--gb-ease);
    min-height: 36px;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.grippy-bf-chip:hover,
.grippy-bf-rating-btn:hover {
    border-color: var(--gb-primary);
    color: var(--gb-primary-dark);
    transform: translateY(-1px);
}
.grippy-bf-chip.active {
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--gb-primary-rgb), .28);
}
.grippy-bf-rating-btn.active {
    background: #FEF3C7;
    border-color: #FBBF24;
    color: #92400E;
    font-weight: 700;
}

/* ---------- Dietician Grid ---------- */
.grippy-dietician-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.grippy-dietician-card {
    background: #fff;
    border: 1.5px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 24px 20px 20px;
    cursor: pointer;
    transition: all .25s var(--gb-ease);
    position: relative;
    text-align: center;
    overflow: hidden;
}
.grippy-dietician-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--gb-primary-rgb), 0) 0%, rgba(var(--gb-primary-rgb), .06) 100%);
    opacity: 0;
    transition: opacity .3s var(--gb-ease);
    pointer-events: none;
}
.grippy-dietician-card:hover {
    border-color: var(--gb-primary);
    transform: translateY(-4px);
    box-shadow: var(--gb-card-hover);
}
.grippy-dietician-card:hover::before { opacity: 1; }
.grippy-dietician-card.selected {
    border-color: var(--gb-primary);
    background: var(--gb-bg-hero);
    box-shadow: 0 0 0 3px rgba(var(--gb-primary-rgb), .22), var(--gb-card-hover);
}
.grippy-dietician-card.selected::after {
    content: '✓';
    position: absolute;
    top: 14px; right: 14px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gb-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    animation: gbPop .3s var(--gb-ease);
}
@keyframes gbPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.grippy-dietician-featured {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(245,158,11,.3);
}
.grippy-dietician-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    display: block;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(var(--gb-primary-rgb), .2), 0 6px 16px rgba(0,0,0,.08);
    transition: transform .3s var(--gb-ease);
}
.grippy-dietician-card:hover .grippy-dietician-avatar { transform: scale(1.05); }
.grippy-dietician-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--gb-ink);
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.grippy-dietician-rating {
    color: #F59E0B;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
.grippy-dietician-rating-count {
    color: var(--gb-muted);
    font-weight: 400;
    font-size: 12px;
}
.grippy-dietician-specialty {
    color: var(--gb-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grippy-dietician-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: auto;
}
.grippy-dietician-pill {
    padding: 3px 10px;
    background: rgba(var(--gb-primary-rgb), .1);
    color: var(--gb-primary-dark);
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
}

/* ---------- Empty state ---------- */
.grippy-bf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--gb-muted);
    font-size: 15px;
    background: var(--gb-bg-soft);
    border-radius: var(--gb-radius-lg);
    border: 2px dashed var(--gb-border);
}

/* ---------- Step Navigation ---------- */
.grippy-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--gb-border);
}

/* ---------- Buttons ---------- */
.grippy-btn {
    padding: 13px 28px;
    border: none;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s var(--gb-ease);
    font-family: inherit;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: .01em;
}
.grippy-btn--primary {
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--gb-primary-rgb), .28);
}
.grippy-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--gb-primary-rgb), .38);
}
.grippy-btn--primary:active:not(:disabled) { transform: translateY(0); }
.grippy-btn--primary:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
.grippy-btn--secondary {
    background: #fff;
    color: var(--gb-text);
    border: 1.5px solid var(--gb-border);
}
.grippy-btn--secondary:hover {
    border-color: var(--gb-primary);
    color: var(--gb-primary-dark);
    background: var(--gb-bg-soft);
}

/* ---------- Credit Box (Step 2) ---------- */
.grippy-credit-box {
    background: linear-gradient(135deg, #F0F9F7 0%, #E0F2EE 100%);
    border: 2px solid rgba(var(--gb-primary-rgb), .3);
    border-radius: var(--gb-radius-lg);
    padding: 28px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.grippy-credit-box::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(var(--gb-primary-rgb), .25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.grippy-credit-info {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
}
.grippy-credit-icon {
    font-size: 36px;
    width: 64px; height: 64px;
    background: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(var(--gb-primary-rgb), .25);
}
.grippy-credit-info strong {
    font-size: 17px;
    color: var(--gb-ink);
    display: block;
    line-height: 1.3;
}
.grippy-credit-count {
    color: var(--gb-primary-dark);
    font-weight: 800;
    font-size: 22px;
}
.grippy-credit-balance {
    color: var(--gb-muted);
    font-size: 13px;
    margin-top: 4px;
}
.grippy-credit-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}
.grippy-credit-qty-wrap { width: 100%; text-align: right; }
.grippy-credit-qty-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
    display: block;
}
.grippy-credit-qty-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 6px;
    border-radius: 100px;
    box-shadow: var(--gb-card-shadow);
}
.grippy-credit-qty-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--gb-bg-soft);
    color: var(--gb-primary-dark);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--gb-ease);
    padding: 0;
    line-height: 1;
}
.grippy-credit-qty-btn:hover {
    background: var(--gb-primary);
    color: #fff;
    transform: scale(1.05);
}
.grippy-credit-qty-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--gb-ink);
    min-width: 28px;
    text-align: center;
}
.grippy-credit-qty-max {
    font-size: 12px;
    color: var(--gb-muted);
    margin-left: 6px;
    padding-right: 10px;
}

.grippy-or-divider {
    text-align: center;
    position: relative;
    margin: 32px 0 24px;
    color: var(--gb-muted);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.grippy-or-divider::before {
    content: '';
    position: absolute;
    inset: 50% 0 0 0;
    height: 1px;
    background: var(--gb-border);
}
.grippy-or-divider span {
    background: #fff;
    padding: 0 16px;
    position: relative;
}

/* ---------- Package Cards ---------- */
.grippy-packages-grid {
    /* Flex layout so the row of cards center-aligns horizontally
       inside the booking flow container, instead of left-justifying
       under the section title. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin: 0 auto 24px;
    max-width: 1200px;
}
.grippy-packages-grid > .grippy-package-card {
    flex: 0 1 260px;     /* same min-width as the old grid, never grows past 1fr */
    max-width: 280px;
}
.grippy-package-card {
    background: #fff;
    border: 1.5px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 26px 22px;
    text-align: center;
    transition: all .25s var(--gb-ease);
    position: relative;
}
.grippy-package-card:hover {
    border-color: var(--gb-primary);
    transform: translateY(-4px);
    box-shadow: var(--gb-card-hover);
}
.grippy-package-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--gb-ink);
    margin: 0 0 12px;
    letter-spacing: -.01em;
}
.grippy-package-price {
    font-size: 34px;
    font-weight: 800;
    color: var(--gb-primary-dark);
    letter-spacing: -.02em;
    margin-bottom: 4px;
    line-height: 1;
}
.grippy-package-currency {
    font-size: 14px;
    color: var(--gb-muted);
    font-weight: 500;
}
.grippy-package-sessions {
    color: var(--gb-text);
    font-weight: 600;
    font-size: 14px;
    margin: 12px 0 4px;
}
.grippy-package-per-session {
    color: var(--gb-muted);
    font-size: 12.5px;
    margin-bottom: 16px;
}
.grippy-package-savings {
    display: inline-block;
    background: #DCFCE7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 14px;
}
.grippy-select-package { width: 100%; }

/* ---------- Scheduling Mode Cards ---------- */
.grippy-sched-modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.grippy-sched-mode {
    background: #fff;
    border: 2px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 24px 18px;
    text-align: center;
    cursor: pointer;
    transition: all .25s var(--gb-ease);
    position: relative;
    overflow: hidden;
}
.grippy-sched-mode:hover {
    border-color: var(--gb-primary);
    transform: translateY(-3px);
    box-shadow: var(--gb-card-hover);
}
.grippy-sched-mode.active {
    border-color: var(--gb-primary);
    background: var(--gb-bg-hero);
    box-shadow: 0 0 0 4px rgba(var(--gb-primary-rgb), .18);
}
.grippy-sched-mode.active::after {
    content: '✓';
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    background: var(--gb-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.grippy-sched-mode-icon {
    font-size: 36px;
    margin-bottom: 10px;
    display: block;
}
.grippy-sched-mode-label {
    font-weight: 700;
    font-size: 15px;
    color: var(--gb-ink);
    margin-bottom: 4px;
}
.grippy-sched-mode-desc {
    font-size: 12px;
    color: var(--gb-muted);
    line-height: 1.4;
}

/* ---------- Session Progress Dots ---------- */
.grippy-session-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 28px;
    padding: 16px 24px;
    background: var(--gb-bg-soft);
    border-radius: 100px;
    max-width: 440px;
    margin-left: auto; margin-right: auto;
}
.grippy-session-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gb-border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    color: var(--gb-muted);
    transition: all .25s var(--gb-ease);
    flex-shrink: 0;
}
.grippy-session-dot.active {
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--gb-primary-rgb), .22);
    transform: scale(1.1);
}
.grippy-session-dot.done {
    background: var(--gb-accent);
    border-color: transparent;
    color: #fff;
}
.grippy-session-dot-line {
    flex: 1;
    height: 2px;
    background: var(--gb-border);
    max-width: 42px;
    transition: background .3s var(--gb-ease);
}
.grippy-session-dot-line.done { background: var(--gb-accent); }

/* ---------- Schedule Picker (Calendar + Times) ---------- */
.grippy-schedule-picker {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 24px;
    box-shadow: var(--gb-card-shadow);
    margin-bottom: 20px;
}

/* Calendar */
.grippy-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;
}
.grippy-calendar-month {
    font-size: 17px;
    font-weight: 700;
    color: var(--gb-ink);
    letter-spacing: -.01em;
}
.grippy-cal-prev,
.grippy-cal-next {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--gb-border);
    background: #fff;
    color: var(--gb-text);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s var(--gb-ease);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    padding: 0;
}
.grippy-cal-prev:hover,
.grippy-cal-next:hover {
    border-color: var(--gb-primary);
    color: var(--gb-primary-dark);
    background: var(--gb-bg-soft);
}
.grippy-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.grippy-calendar-day-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--gb-muted);
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.grippy-calendar-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--gb-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-text);
    cursor: default;
    transition: all .18s var(--gb-ease);
    min-height: 40px;
}
.grippy-calendar-day.available {
    background: var(--gb-bg-soft);
    color: var(--gb-ink);
    cursor: pointer;
}
.grippy-calendar-day.available:hover {
    background: rgba(var(--gb-primary-rgb), .15);
    color: var(--gb-primary-dark);
    transform: scale(1.06);
}
.grippy-calendar-day.disabled {
    color: #CBD5E1;
    background: transparent;
}
.grippy-calendar-day.selected {
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--gb-primary-rgb), .35);
    transform: scale(1.05);
}
.grippy-calendar-day.suggested {
    background: rgba(var(--gb-primary-rgb), .12);
    border: 1.5px dashed var(--gb-primary);
    color: var(--gb-primary-dark);
    font-weight: 700;
}
.grippy-calendar-day.suggested::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gb-primary-dark);
}

/* Time Slots */
.grippy-time-slots {
    border-left: 1px solid var(--gb-border);
    padding-left: 24px;
}
.grippy-time-slots-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gb-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
}
.grippy-time-slots-empty {
    color: var(--gb-muted);
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
    line-height: 1.5;
}
.grippy-time-slot-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.grippy-time-slot-grid::-webkit-scrollbar { width: 6px; }
.grippy-time-slot-grid::-webkit-scrollbar-thumb { background: var(--gb-border); border-radius: 3px; }
.grippy-time-slot {
    padding: 11px 14px;
    border: 1.5px solid var(--gb-border);
    border-radius: var(--gb-radius-sm);
    background: #fff;
    color: var(--gb-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s var(--gb-ease);
    text-align: center;
}
.grippy-time-slot:hover {
    border-color: var(--gb-primary);
    color: var(--gb-primary-dark);
    background: var(--gb-bg-soft);
    transform: translateX(2px);
}
.grippy-time-slot.selected {
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--gb-primary-rgb), .32);
}

/* ---------- Confirm ---------- */
.grippy-confirm-summary {
    background: #fff;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    padding: 28px;
    box-shadow: var(--gb-card-shadow);
    margin-bottom: 24px;
}
.grippy-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--gb-border);
}
.grippy-confirm-row:last-child { border-bottom: none; }
.grippy-confirm-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gb-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.grippy-confirm-value {
    color: var(--gb-ink);
    font-weight: 600;
    font-size: 15px;
    text-align: right;
}
.grippy-confirm-sessions-header {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 10px;
    margin-top: 8px;
    border-bottom: 2px solid var(--gb-border);
    border-top: 1px solid var(--gb-border);
}
.grippy-confirm-session-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 14px;
}
.grippy-confirm-session-row:last-child { border-bottom: none; }
.grippy-confirm-session-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    color: #fff;
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--gb-primary-rgb), .3);
}
.grippy-confirm-session-date {
    flex: 1;
    color: var(--gb-ink);
    font-weight: 600;
}
.grippy-confirm-session-time {
    color: var(--gb-muted);
    font-size: 13px;
    font-weight: 500;
}

/* ---------- Success ---------- */
.grippy-success {
    text-align: center;
    padding: 60px 20px;
    background: var(--gb-bg-hero);
    border-radius: var(--gb-radius-lg);
    border: 1px solid rgba(var(--gb-primary-rgb), .2);
}
.grippy-success-icon {
    width: 84px; height: 84px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 44px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(16,185,129,.35);
    animation: gbSuccessPop .6s var(--gb-ease);
}
@keyframes gbSuccessPop {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}
.grippy-success h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--gb-ink);
    margin: 0 0 12px;
    letter-spacing: -.02em;
}
.grippy-success p {
    color: var(--gb-muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 24px;
}
.grippy-meet-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-primary-dark) 100%);
    color: #fff !important;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    box-shadow: 0 6px 18px rgba(var(--gb-primary-rgb), .32);
    transition: all .2s var(--gb-ease);
}
.grippy-meet-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--gb-primary-rgb), .42);
}
.grippy-meet-link::before { content: '📹'; font-size: 16px; }

/* ---------- Loading ---------- */
.grippy-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--gb-muted);
    font-size: 14px;
}
.grippy-loading::before {
    content: '';
    display: inline-block;
    width: 28px; height: 28px;
    margin-bottom: 12px;
    border: 3px solid var(--gb-border);
    border-top-color: var(--gb-primary);
    border-radius: 50%;
    animation: gbSpin .7s linear infinite;
}
@keyframes gbSpin { to { transform: rotate(360deg); } }

/* ---------- Notice ---------- */
.grippy-notice {
    padding: 16px 20px;
    border-radius: var(--gb-radius-md);
    font-size: 14px;
    line-height: 1.5;
    margin: 12px 0;
}
.grippy-notice--error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .grippy-schedule-picker {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .grippy-time-slots {
        border-left: none;
        border-top: 1px solid var(--gb-border);
        padding-left: 0;
        padding-top: 20px;
    }
    .grippy-credit-box {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
    }
    .grippy-credit-actions { align-items: stretch; }
    .grippy-credit-qty-wrap { text-align: center; }
}
@media (max-width: 640px) {
    #grippy-booking-flow {
        margin: 20px auto;
        padding: 0 16px;
    }
    .grippy-step-title { font-size: 26px; }
    .grippy-step-subtitle { font-size: 14px; }
    .grippy-progress-bar {
        padding: 14px 16px;
        border-radius: 80px;
    }
    .grippy-progress-step { font-size: 0; gap: 0; }
    .grippy-progress-step::before { width: 28px; height: 28px; font-size: 12px; }
    .grippy-progress-step:not(:last-child)::after { min-width: 12px; }
    .grippy-bf-filters { padding: 16px; gap: 14px; }
    .grippy-bf-filter-inline { flex-direction: column; align-items: flex-start; }
    .grippy-dietician-grid { grid-template-columns: 1fr; gap: 16px; }
    .grippy-dietician-card { padding: 20px 16px; }
    .grippy-dietician-avatar { width: 80px; height: 80px; }
    .grippy-sched-modes { grid-template-columns: 1fr 1fr; gap: 10px; }
    .grippy-sched-mode { padding: 16px 12px; }
    .grippy-sched-mode-icon { font-size: 26px; }
    .grippy-session-progress { padding: 12px 16px; }
    .grippy-session-dot { width: 28px; height: 28px; font-size: 12px; }
    .grippy-session-dot-line { max-width: 24px; }
    .grippy-schedule-picker { padding: 16px; }
    .grippy-calendar-day { min-height: 36px; font-size: 13px; }
    .grippy-confirm-summary { padding: 20px; }
    .grippy-confirm-session-time { display: block; font-size: 12px; }
    .grippy-success { padding: 40px 16px; }
    .grippy-success h2 { font-size: 24px; }
    .grippy-step-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .grippy-step-nav .grippy-btn { width: 100%; }
    .grippy-btn { padding: 13px 20px; }
}
@media (max-width: 400px) {
    .grippy-sched-modes { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GRIPPY BOOKING v2 — HIGH-SPECIFICITY OVERRIDES
   Scoped under #grippy-booking-flow to beat theme/Elementor styles
   ========================================================================== */
#grippy-booking-flow .grippy-btn,
#grippy-booking-flow input.grippy-bf-search,
#grippy-booking-flow .grippy-bf-chip,
#grippy-booking-flow .grippy-bf-rating-btn,
#grippy-booking-flow .grippy-meet-link {
    border-radius: 100px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
#grippy-booking-flow .grippy-btn {
    padding: 13px 28px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    min-height: 46px !important;
    line-height: 1 !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
}
#grippy-booking-flow .grippy-btn--primary {
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(148,165,163,.28) !important;
}
#grippy-booking-flow .grippy-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(148,165,163,.38) !important;
}
#grippy-booking-flow .grippy-btn--secondary {
    background: #fff !important;
    color: #334155 !important;
    border: 1.5px solid #E2E8F0 !important;
}
#grippy-booking-flow .grippy-btn--secondary:hover {
    border-color: #94A5A3 !important;
    color: #7A8C8A !important;
    background: #F8FAFC !important;
}
#grippy-booking-flow input.grippy-bf-search {
    width: 100% !important;
    padding: 14px 18px 14px 46px !important;
    border: 1.5px solid #E2E8F0 !important;
    font-size: 15px !important;
    background: #F8FAFC !important;
    min-height: 48px !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    color: #334155 !important;
}
#grippy-booking-flow input.grippy-bf-search:focus {
    border-color: #94A5A3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(148,165,163,.14) !important;
}
#grippy-booking-flow .grippy-bf-chip,
#grippy-booking-flow .grippy-bf-rating-btn {
    padding: 8px 16px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
#grippy-booking-flow .grippy-bf-chip:hover,
#grippy-booking-flow .grippy-bf-rating-btn:hover {
    border-color: #94A5A3 !important;
    color: #7A8C8A !important;
}
#grippy-booking-flow .grippy-bf-chip.active {
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(148,165,163,.28) !important;
}
#grippy-booking-flow .grippy-bf-rating-btn.active {
    background: #FEF3C7 !important;
    border-color: #FBBF24 !important;
    color: #92400E !important;
    font-weight: 700 !important;
}
#grippy-booking-flow .grippy-dietician-card {
    background: #fff !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 24px 20px 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
#grippy-booking-flow .grippy-dietician-card:hover {
    border-color: #94A5A3 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 28px rgba(148,165,163,.18), 0 2px 6px rgba(15,23,42,.06) !important;
}
#grippy-booking-flow .grippy-dietician-card.selected {
    border-color: #94A5A3 !important;
    background: linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 45%, #F5F9F8 100%) !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,.22), 0 8px 28px rgba(148,165,163,.18) !important;
}
#grippy-booking-flow .grippy-dietician-avatar {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 auto 14px !important;
    display: block !important;
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,.2), 0 6px 16px rgba(0,0,0,.08) !important;
}
#grippy-booking-flow .grippy-step-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 6px !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
}
#grippy-booking-flow .grippy-step-subtitle {
    color: #64748B !important;
    font-size: 15px !important;
    margin: 0 0 24px !important;
}
#grippy-booking-flow .grippy-credit-qty-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: #F8FAFC !important;
    color: #7A8C8A !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-height: 36px !important;
}
#grippy-booking-flow .grippy-credit-qty-btn:hover {
    background: #94A5A3 !important;
    color: #fff !important;
}
#grippy-booking-flow .grippy-sched-mode {
    border-radius: 20px !important;
    background: #fff !important;
    border: 2px solid #E2E8F0 !important;
    padding: 24px 18px !important;
    cursor: pointer !important;
    text-align: center !important;
}
#grippy-booking-flow .grippy-sched-mode.active {
    border-color: #94A5A3 !important;
    background: linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 45%, #F5F9F8 100%) !important;
    box-shadow: 0 0 0 4px rgba(148,165,163,.18) !important;
}
#grippy-booking-flow .grippy-calendar-day {
    border-radius: 10px !important;
    aspect-ratio: 1 !important;
    min-height: 40px !important;
}
#grippy-booking-flow .grippy-calendar-day.selected {
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(148,165,163,.35) !important;
}
#grippy-booking-flow .grippy-time-slot {
    border-radius: 10px !important;
    padding: 11px 14px !important;
    border: 1.5px solid #E2E8F0 !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: auto !important;
}
#grippy-booking-flow .grippy-time-slot:hover {
    border-color: #94A5A3 !important;
    color: #7A8C8A !important;
    background: #F8FAFC !important;
}
#grippy-booking-flow .grippy-time-slot.selected {
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(148,165,163,.32) !important;
}
#grippy-booking-flow .grippy-bf-filters {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 22px 24px !important;
    margin: 0 0 28px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06) !important;
}
#grippy-booking-flow .grippy-package-card {
    background: #fff !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 26px 22px !important;
    text-align: center !important;
}
#grippy-booking-flow .grippy-credit-box {
    background: linear-gradient(135deg, #F0F9F7 0%, #E0F2EE 100%) !important;
    border: 2px solid rgba(148,165,163,.3) !important;
    border-radius: 20px !important;
    padding: 28px !important;
}
#grippy-booking-flow .grippy-credit-hint {
    background: linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 45%, #F5F9F8 100%) !important;
    border: 1px solid rgba(148,165,163,.25) !important;
    border-radius: 14px !important;
    padding: 14px 20px 14px 52px !important;
    color: #0F172A !important;
    font-size: 14.5px !important;
    margin: 0 0 24px !important;
}
#grippy-booking-flow .grippy-confirm-summary {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06) !important;
}
#grippy-booking-flow .grippy-progress-bar,
#grippy-booking-flow .grippy-booking-progress {
    border-radius: 100px !important;
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06) !important;
    padding: 20px 24px !important;
    max-width: 680px !important;
    margin: 0 auto 36px !important;
}
#grippy-booking-flow .grippy-success {
    background: linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 45%, #F5F9F8 100%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(148,165,163,.2) !important;
    padding: 60px 20px !important;
    text-align: center !important;
}
#grippy-booking-flow .grippy-success-icon {
    width: 84px !important;
    height: 84px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 44px !important;
    box-shadow: 0 10px 30px rgba(16,185,129,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
}


/* ==========================================================================
   GRIPPY v2 — TWEAKS
   1) /book/ wider container + horizontal filters + default-size buttons
   2) Profile page v2 layout (left sidebar + main content)
   ========================================================================== */

/* ---------- Wider booking container (full-width friendly) ---------- */
#grippy-booking-flow {
    max-width: 1280px !important;
    padding: 0 24px !important;
}

/* ---------- Horizontal filters on desktop ---------- */
#grippy-booking-flow .grippy-bf-filters {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.3fr) 1fr 1fr !important;
    gap: 22px !important;
    align-items: start !important;
    padding: 18px 22px !important;
}
#grippy-booking-flow .grippy-bf-search-wrap {
    grid-column: 1 / 2;
    align-self: center;
}
#grippy-booking-flow .grippy-bf-filter-group {
    margin: 0 !important;
    gap: 8px !important;
}
#grippy-booking-flow .grippy-bf-filter-label {
    font-size: 10.5px !important;
    margin-bottom: 4px !important;
}

/* Make Search the full height of a single row */
#grippy-booking-flow input.grippy-bf-search {
    padding: 12px 18px 12px 42px !important;
    font-size: 14.5px !important;
    min-height: 44px !important;
}

/* ---------- Default-size buttons ---------- */
#grippy-booking-flow .grippy-btn {
    padding: 10px 22px !important;
    font-size: 14px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
#grippy-booking-flow .grippy-meet-link {
    padding: 11px 22px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}
#grippy-booking-flow .grippy-btn--primary {
    box-shadow: 0 2px 8px rgba(148,165,163,.24) !important;
}
#grippy-booking-flow .grippy-btn--primary:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(148,165,163,.32) !important;
}

/* Step nav pinned to content edges */
#grippy-booking-flow .grippy-step-nav {
    margin-top: 24px;
    padding-top: 20px;
}

/* ---------- Mobile: stack filters ---------- */
@media (max-width: 900px) {
    #grippy-booking-flow .grippy-bf-filters {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #grippy-booking-flow .grippy-bf-search-wrap { grid-column: 1; }
}

/* ==========================================================================
   DIETICIAN PROFILE PAGE v2
   Two-column split layout: sticky sidebar + scroll content
   ========================================================================== */

#grippy-profile-page {
    max-width: 1200px;
    margin: 32px auto 60px;
    padding: 0 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #334155;
}
#grippy-profile-page * { box-sizing: border-box; }

.grippy-pp-loading {
    text-align: center;
    padding: 80px 20px;
    color: #64748B;
    font-size: 15px;
}
.grippy-pp-loading::before {
    content: '';
    display: inline-block;
    width: 28px; height: 28px;
    margin-bottom: 12px;
    border: 3px solid #E2E8F0;
    border-top-color: #94A5A3;
    border-radius: 50%;
    animation: gbSpin .7s linear infinite;
}

/* ---------- Grid ---------- */
.grippy-pp2 {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    align-items: start;
    animation: gbFadeIn .4s cubic-bezier(.4,0,.2,1);
}

/* ---------- Sidebar ---------- */
.grippy-pp2-sidebar {
    position: sticky;
    top: 24px;
}
.grippy-pp2-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    text-align: center;
}
.grippy-pp2-avatar {
    width: 180px; height: 180px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #F0F9F7 0%, #E6F2EF 100%);
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px rgba(148,165,163,.22), 0 10px 28px rgba(0,0,0,.1);
    display: flex; align-items: center; justify-content: center;
}
.grippy-pp2-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.grippy-pp2-avatar-initial {
    font-size: 76px;
    font-weight: 800;
    color: #94A5A3;
    letter-spacing: -.02em;
}
.grippy-pp2-name {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 6px !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
}
.grippy-pp2-tagline {
    font-size: 14px;
    color: #64748B;
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 500;
}
.grippy-pp2-rating-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #334155;
}
.grippy-pp2-stars {
    color: #F59E0B;
    font-size: 18px;
    letter-spacing: 1px;
}
.grippy-pp2-rating-text {
    color: #64748B;
    font-weight: 500;
    font-size: 13px;
}

.grippy-pp2-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0;
    padding: 16px 4px;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
}
.grippy-pp2-stat {
    text-align: center;
    padding: 0 4px;
    border-right: 1px solid #E2E8F0;
}
.grippy-pp2-stat:last-child { border-right: none; }
.grippy-pp2-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
    margin-bottom: 4px;
}
.grippy-pp2-stat-label {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.grippy-pp2-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #F8FAFC;
    border-radius: 8px;
    font-size: 13.5px;
    color: #334155;
    margin-bottom: 8px;
    text-align: left;
}
.grippy-pp2-meta-icon { font-size: 16px; }

.grippy-pp2-book {
    width: 100%;
    margin-top: 12px !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(148,165,163,.32) !important;
}

/* ---------- Main content ---------- */
.grippy-pp2-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.grippy-pp2-section {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
}
.grippy-pp2-section--about { background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%); }
.grippy-pp2-h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 16px !important;
    letter-spacing: -.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.grippy-pp2-count {
    font-weight: 500;
    color: #64748B;
    font-size: 15px;
}
.grippy-pp2-bio {
    color: #334155;
    font-size: 15px;
    line-height: 1.7;
}
.grippy-pp2-bio p { margin: 0 0 14px; }
.grippy-pp2-bio p:last-child { margin-bottom: 0; }

/* ---------- Pills ---------- */
.grippy-pp2-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.grippy-pp2-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}
.grippy-pp2-pill--primary {
    background: rgba(148,165,163,.12);
    color: #7A8C8A;
    border: 1px solid rgba(148,165,163,.22);
}
.grippy-pp2-pill--ghost {
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
}

/* ---------- Education list ---------- */
.grippy-pp2-edu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.grippy-pp2-edu-item {
    padding: 14px 18px;
    background: #F8FAFC;
    border-left: 3px solid #94A5A3;
    border-radius: 8px;
}
.grippy-pp2-edu-degree {
    font-weight: 700;
    color: #0F172A;
    font-size: 14.5px;
    margin-bottom: 2px;
}
.grippy-pp2-edu-school {
    color: #64748B;
    font-size: 13.5px;
}

/* ---------- Reviews ---------- */
.grippy-pp2-reviews {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.grippy-pp2-review {
    padding: 18px;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
}
.grippy-pp2-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.grippy-pp2-review-avatar,
.grippy-pp2-review-avatar-ph {
    width: 44px; height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.grippy-pp2-review-avatar { object-fit: cover; }
.grippy-pp2-review-avatar-ph {
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.grippy-pp2-review-meta { flex: 1; }
.grippy-pp2-review-name {
    font-weight: 700;
    color: #0F172A;
    font-size: 14px;
    margin-bottom: 2px;
}
.grippy-pp2-review-sub {
    font-size: 12.5px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 8px;
}
.grippy-pp2-review-sub .grippy-pp2-stars {
    font-size: 14px;
    letter-spacing: 0;
}
.grippy-pp2-review-date { color: #94A3B8; }
.grippy-pp2-review-body {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
}
.grippy-pp2-empty-reviews {
    text-align: center;
    padding: 40px 20px;
    color: #64748B;
    font-size: 14px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 2px dashed #E2E8F0;
}
.grippy-pp2-more {
    margin-top: 18px !important;
    display: inline-block;
}

/* ---------- Review form ---------- */
.grippy-pp2-leave-review {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E2E8F0;
}
.grippy-pp2-review-form h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 12px;
}
.grippy-pp2-rating-picker {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.grippy-pp2-star-btn {
    width: 36px; height: 36px;
    border: none;
    background: transparent;
    font-size: 28px;
    color: #CBD5E1;
    cursor: pointer;
    padding: 0;
    transition: all .15s cubic-bezier(.4,0,.2,1);
}
.grippy-pp2-star-btn:hover { transform: scale(1.15); }
.grippy-pp2-star-btn.is-active { color: #F59E0B; }
#grippy-pp2-review-comment {
    width: 100%;
    min-height: 90px;
    padding: 12px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 12px;
    outline: none;
    transition: border-color .2s;
}
#grippy-pp2-review-comment:focus { border-color: #94A5A3; }
.grippy-pp2-review-status {
    margin-top: 10px;
    font-size: 13px;
    color: #64748B;
}

/* ---------- Mobile Sticky CTA ---------- */
.grippy-pp2-sticky {
    display: none;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 900px) {
    .grippy-pp2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .grippy-pp2-sidebar {
        position: static;
    }
    .grippy-pp2-card {
        padding: 24px;
    }
    .grippy-pp2-avatar {
        width: 140px; height: 140px;
    }
    .grippy-pp2-section {
        padding: 22px;
    }
    .grippy-pp2-book {
        display: none !important;
    }
    .grippy-pp2-sticky {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 100;
        padding: 12px 16px;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid #E2E8F0;
        box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    }
    .grippy-pp2-sticky .grippy-btn {
        width: 100%;
        padding: 14px 22px !important;
        font-size: 15px !important;
        border-radius: 100px !important;
    }
    #grippy-profile-page {
        margin-bottom: 100px;
    }
}
@media (max-width: 640px) {
    #grippy-profile-page { padding: 0 14px; margin-top: 20px; }
    .grippy-pp2-avatar { width: 120px; height: 120px; }
    .grippy-pp2-name { font-size: 20px !important; }
    .grippy-pp2-section { padding: 18px; }
    .grippy-pp2-h3 { font-size: 16px !important; }
    .grippy-pp2-bio { font-size: 14px; }
    .grippy-pp2-stats { padding: 12px 2px; }
    .grippy-pp2-stat-value { font-size: 17px; }
}


/* ==========================================================================
   GRIPPY v2 — LAYOUT FIX + ENCODING ESCAPES
   - Fixes garbled checkmarks / emoji via CSS escape codes
   - New Step 1 layout: filters LEFT sidebar + dietician grid RIGHT
   - Mobile: filters collapse to slide-in drawer
   ========================================================================== */

/* ---------- Fix encoding issues with CSS escape codes ---------- */
#grippy-booking-flow .grippy-progress-step.completed::before {
    content: '\2713' !important;            /* ✓ */
}
#grippy-booking-flow .grippy-dietician-card.selected::after {
    content: '\2713' !important;            /* ✓ */
}
#grippy-booking-flow .grippy-sched-mode.active::after {
    content: '\2713' !important;            /* ✓ */
}
#grippy-booking-flow .grippy-success-icon {
    font-size: 0 !important;                /* hide text checkmark, use pseudo */
}
#grippy-booking-flow .grippy-success-icon::before {
    content: '\2713';
    font-size: 48px;
    font-weight: 900;
}
#grippy-booking-flow .grippy-credit-hint {
    padding-left: 24px !important;          /* drop the ::before emoji */
}
#grippy-booking-flow .grippy-credit-hint::before {
    content: none !important;
}
#grippy-booking-flow .grippy-meet-link::before {
    content: '\25B6' !important;            /* triangle play */
    margin-right: 4px;
    font-size: 13px;
}
#grippy-booking-flow .grippy-bf-search-icon::before {
    content: '\1F50D';                      /* magnifier */
    font-size: 15px;
}
#grippy-booking-flow .grippy-bf-search-icon {
    font-size: 0;
    line-height: 1;
}
#grippy-booking-flow .grippy-bf-filter-toggle-icon::before {
    content: '\2261';                       /* triple bar (hamburger) */
    font-size: 18px;
}
#grippy-booking-flow .grippy-bf-filter-toggle-icon {
    font-size: 0;
    line-height: 1;
}

/* Profile page encoding fixes */
#grippy-profile-page .grippy-pp2-h3 {
    font-variant-emoji: text;
}

/* ==========================================================================
   NEW STEP 1 LAYOUT: LEFT FILTER SIDEBAR + RIGHT GRID
   ========================================================================== */

/* Wider container + full-ish width */
#grippy-booking-flow {
    max-width: 1440px !important;
    margin: 24px auto 40px !important;
    padding: 0 28px !important;
}

#grippy-booking-flow .grippy-bf-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    margin: 0 0 24px !important;
}

/* Override the old single-block filters — kill it since we use sidebar now */
#grippy-booking-flow .grippy-bf-filters {
    display: none !important;
}

/* ---------- LEFT: Filter Sidebar ---------- */
#grippy-booking-flow .grippy-bf-sidebar {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
    padding: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    align-self: start;
    z-index: 10;
}
#grippy-booking-flow .grippy-bf-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #F1F5F9;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-radius: 16px 16px 0 0;
}
#grippy-booking-flow .grippy-bf-sidebar-title {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
}
#grippy-booking-flow .grippy-bf-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: linear-gradient(135deg, #94A5A3 0%, #7A8C8A 100%);
    color: #fff;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
}
#grippy-booking-flow .grippy-bf-sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: #F1F5F9;
    color: #475569;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    align-items: center;
    justify-content: center;
}
#grippy-booking-flow .grippy-bf-sidebar-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Search within sidebar */
#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-search-wrap {
    position: relative;
    margin: 0;
}
#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    opacity: .55;
    pointer-events: none;
}
#grippy-booking-flow .grippy-bf-sidebar input.grippy-bf-search {
    width: 100% !important;
    padding: 10px 14px 10px 38px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    background: #F8FAFC !important;
    min-height: 40px !important;
    color: #334155 !important;
    outline: none !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
#grippy-booking-flow .grippy-bf-sidebar input.grippy-bf-search:focus {
    border-color: #94A5A3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,.15) !important;
}

#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-filter-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 0 0 2px !important;
}
#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
#grippy-booking-flow .grippy-bf-sidebar .grippy-bf-chip {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    min-height: 30px !important;
}

#grippy-booking-flow .grippy-bf-clear-btn {
    border: 1px dashed #E2E8F0;
    background: transparent;
    color: #64748B;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: all .18s;
    font-family: inherit;
}
#grippy-booking-flow .grippy-bf-clear-btn:hover {
    border-color: #94A5A3;
    color: #7A8C8A;
    background: #F8FAFC;
}

/* ---------- RIGHT: Content ---------- */
#grippy-booking-flow .grippy-bf-content {
    min-width: 0;  /* allow grid to shrink */
}
#grippy-booking-flow .grippy-bf-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 14px;
    gap: 12px;
}
#grippy-booking-flow .grippy-bf-count {
    font-size: 14px;
    color: #64748B;
    font-weight: 600;
}

/* Mobile filter toggle button — hidden on desktop */
#grippy-booking-flow .grippy-bf-filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    color: #334155;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s;
    min-height: 38px;
}
#grippy-booking-flow .grippy-bf-filter-toggle:hover {
    border-color: #94A5A3;
    color: #7A8C8A;
}

/* Grid — more columns on wide screens */
#grippy-booking-flow .grippy-bf-content .grippy-dietician-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}
#grippy-booking-flow .grippy-bf-content .grippy-dietician-card {
    padding: 22px 18px 18px !important;
}
#grippy-booking-flow .grippy-bf-content .grippy-dietician-avatar {
    width: 84px !important;
    height: 84px !important;
}
#grippy-booking-flow .grippy-bf-content .grippy-dietician-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#grippy-booking-flow .grippy-bf-content .grippy-dietician-specialty {
    font-size: 12.5px;
    min-height: auto;
    margin-bottom: 10px;
    -webkit-line-clamp: 2;
}

/* Mobile drawer backdrop */
#grippy-booking-flow .grippy-bf-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    transition: opacity .25s cubic-bezier(.4,0,.2,1);
}
#grippy-booking-flow .grippy-bf-backdrop.is-open {
    opacity: 1;
}

/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    #grippy-booking-flow .grippy-bf-layout {
        grid-template-columns: 1fr !important;
    }
    #grippy-booking-flow .grippy-bf-filter-toggle {
        display: inline-flex !important;
    }
    #grippy-booking-flow .grippy-bf-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -320px;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        max-height: none !important;
        height: 100vh;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #E2E8F0 !important;
        box-shadow: 10px 0 40px rgba(0,0,0,.15);
        z-index: 999;
        transition: left .3s cubic-bezier(.4,0,.2,1);
        align-self: unset;
    }
    #grippy-booking-flow .grippy-bf-sidebar.is-open {
        left: 0;
    }
    #grippy-booking-flow .grippy-bf-sidebar-head {
        border-radius: 0 !important;
    }
    #grippy-booking-flow .grippy-bf-sidebar-close {
        display: inline-flex !important;
    }
    #grippy-booking-flow .grippy-bf-backdrop {
        display: block;
    }
    #grippy-booking-flow {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 640px) {
    #grippy-booking-flow {
        padding: 0 14px !important;
        margin-top: 16px !important;
    }
    #grippy-booking-flow .grippy-step-title {
        font-size: 24px !important;
    }
    #grippy-booking-flow .grippy-step-subtitle {
        font-size: 13.5px !important;
        margin-bottom: 16px !important;
    }
    #grippy-booking-flow .grippy-credit-hint {
        font-size: 13.5px !important;
        padding: 12px 16px !important;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-card {
        display: grid;
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: 6px 14px;
        align-items: center;
        text-align: left;
        padding: 16px !important;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-avatar {
        width: 72px !important;
        height: 72px !important;
        margin: 0 !important;
        grid-row: 1 / 3;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-featured {
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-name {
        margin-bottom: 2px !important;
        white-space: normal;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-rating {
        font-size: 12.5px;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-specialty {
        display: none;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-pills {
        grid-column: 1 / 3;
        justify-content: flex-start !important;
        margin-top: 4px;
    }
    #grippy-booking-flow .grippy-bf-content .grippy-dietician-card.selected::after {
        top: 8px !important;
        right: 8px !important;
    }
    #grippy-booking-flow .grippy-progress-bar,
    #grippy-booking-flow .grippy-booking-progress {
        padding: 12px 14px !important;
    }
    #grippy-booking-flow .grippy-step-nav {
        flex-direction: row !important;
    }
    #grippy-booking-flow .grippy-step-nav .grippy-btn {
        width: auto !important;
        flex: 1;
    }
}

/* ==========================================================================
   Step title centering fix (Step 1 "Select a Dietician" was left-aligned
   because the 2-col grid sidebar + content changed the inherited context).
   ========================================================================== */
#grippy-booking-flow .grippy-step-title,
#grippy-booking-flow .grippy-step-subtitle {
    text-align: center !important;
}
#grippy-booking-flow .grippy-credit-hint {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



/* ==========================================================================
   WXA — Wix-identical auth flow (users.wix.com/signin)
   Clean white canvas, top-left brand, centered ~420px column, email-first
   two-step flow, black pill primary button, stacked social buttons.
   ========================================================================== */

body .wxa, .wxa {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: #FFFFFF;
    color: #000;
    font-family: 'Madefor','Helvetica Neue','Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding: 0 !important;
    overflow-x: hidden;
}
body.page .wxa { min-height: 0 !important; }
html, body { overflow-x: hidden; }
.wxa *, .wxa *::before, .wxa *::after { box-sizing: border-box; }

/* Top bar — hidden per design (no wordmark) */
.wxa-top {
    display: none !important;
}
.wxa-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #000 !important;
}
.wxa-brand-mark {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: #000;
    display: inline-block;
}
.wxa-brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000;
}

/* Main centered column */
.wxa-main {
    display: flex;
    justify-content: center;
    padding: 8px 20px 24px;
    min-height: 0;
    background: #fff;
}
.wxa-col {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Step header */
.wxa-head { display: block; position: relative; }
.wxa-head[hidden] { display: none !important; }
.wxa-head h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    color: #000 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-family: inherit !important;
}
.wxa-head p {
    font-size: 14px !important;
    color: #595959 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wxa-head p a {
    color: #000 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    cursor: pointer;
}
.wxa-head p a:hover { color: #116DFF !important; }

/* Back button */
.wxa-back {
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    margin: 0 0 12px -6px !important;
    color: #000 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 36px; height: 36px;
    transition: background 0.15s ease;
}
.wxa-back:hover { background: #F5F5F5 !important; }

/* Email pill (shown on step 2) */
.wxa-email-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #F5F5F5;
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #000;
    max-width: 100%;
    overflow: hidden;
}
.wxa-email-text {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.wxa-email-change {
    background: #fff !important;
    border: 1px solid #D6D6D6 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #000 !important;
    cursor: pointer;
    font-family: inherit !important;
}
.wxa-email-change:hover { background: #F0F0F0 !important; }

.wxa-mail-icon {
    display: flex !important;
    justify-content: center;
    color: #000;
    margin: 0 0 16px;
}

/* Form */
.wxa-form { display: block; margin: 0 !important; padding: 0 !important; }
.wxa-form[hidden] { display: none !important; }
.wxa-panel { display: flex; flex-direction: column; gap: 16px; }
.wxa-panel[hidden] { display: none !important; }

.wxa-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.wxa-field { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; }
.wxa-field label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
}
.wxa-optional { color: #8C8C8C; font-weight: 400; }
.wxa-field input[type="email"],
.wxa-field input[type="password"],
.wxa-field input[type="text"],
.wxa-field input[type="tel"],
.wxa-field input[type="number"],
.wxa-field textarea {
    width: 100% !important;
    height: 52px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid #C4C4C4 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    color: #000 !important;
    font-family: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.wxa-field textarea { height: auto !important; min-height: 92px !important; resize: vertical !important; }
.wxa-field input::placeholder, .wxa-field textarea::placeholder { color: #B0B0B0 !important; }
.wxa-field input:focus, .wxa-field textarea:focus {
    border-color: #116DFF !important;
    box-shadow: 0 0 0 3px rgba(17,109,255,0.16) !important;
}
.wxa-field input[type="file"] {
    height: auto !important;
    padding: 10px !important;
    background: #FAFAFA !important;
    font-size: 13px !important;
}
.wxa-hint { font-size: 12px; color: #8C8C8C; margin: 2px 0 0; }

/* Password input with eye toggle */
.wxa-input-wrap { position: relative; }
.wxa-input-wrap input { padding-right: 52px !important; }
.wxa-eye {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 8px !important;
    cursor: pointer;
    color: #8C8C8C;
    display: inline-flex !important;
    border-radius: 6px;
}
.wxa-eye:hover { background: #F5F5F5 !important; color: #000; }
.wxa-eye--on { color: #000; }

/* Forgot password link */
.wxa-forgot {
    display: inline-block;
    font-size: 13px !important;
    color: #000 !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    margin: -8px 0 0 !important;
    cursor: pointer;
}
.wxa-forgot:hover { color: #116DFF !important; }

/* Remember-me */
.wxa-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #000 !important;
    cursor: pointer;
    margin: 0 !important;
    user-select: none;
}
.wxa-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #000 !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Primary pill button (Wix signature) */
.wxa-btn {
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wxa-btn--primary { background: #000 !important; color: #fff !important; }
.wxa-btn--primary:hover:not(:disabled) { background: #3D3D3D !important; }
.wxa-btn--primary:active { transform: scale(0.98); }
.wxa-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* Role-switch link (dietician) */
.wxa-role-switch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center;
    text-decoration: none !important;
    margin: -8px 0 8px !important;
    padding: 10px !important;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.wxa-role-switch:hover {
    background: #F5F5F5 !important;
    color: #116DFF !important;
}
.wxa-role-switch span { font-size: 14px; }

/* OR divider */
.wxa-divider {
    position: relative;
    text-align: center;
    font-size: 12px;
    color: #8C8C8C;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 4px 0;
}
.wxa-divider::before, .wxa-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: #E0E0E0;
}
.wxa-divider::before { left: 0; }
.wxa-divider::after  { right: 0; }
.wxa-divider span { background: #fff; padding: 0 12px; position: relative; }

/* OAuth buttons (white pill with icon left) */
.wxa-oauth {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    background: #fff !important;
    border: 1px solid #D6D6D6 !important;
    border-radius: 999px !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: all 0.15s ease !important;
    position: relative !important;
}
.wxa-oauth > span:nth-child(2) { flex: 1; text-align: left; }
.wxa-oauth:hover:not(:disabled) {
    border-color: #000 !important;
    background: #FAFAFA !important;
}
.wxa-oauth:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }
.wxa-oauth-icon {
    display: inline-flex !important;
    flex-shrink: 0;
    width: 20px; height: 20px;
    align-items: center;
    justify-content: center;
}
.wxa-oauth-icon svg { width: 20px; height: 20px; }
.wxa-soon {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #595959 !important;
    background: #F0F0F0 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

/* Error / success messages */
.wxa-err, .wxa-ok {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none;
}
.wxa-err.wxa-err--on { display: block; color: #D6331A !important; }
.wxa-ok.wxa-ok--on { display: block; color: #00844C !important; }

.wxa-help { font-size: 12px; color: #595959; margin: 0; line-height: 1.5; }

/* Terms */
.wxa-terms {
    font-size: 12px !important;
    color: #8C8C8C !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}
.wxa-terms a { color: #595959 !important; text-decoration: underline !important; }
.wxa-terms a:hover { color: #000 !important; }

@media (max-width: 520px) {
    .wxa-top { padding: 16px 20px; }
    .wxa-main { padding: 32px 20px 60px; }
    .wxa-head h1 { font-size: 26px !important; }
    .wxa-row { grid-template-columns: 1fr !important; }
}


/* ============================================================
   Client Dashboard — Header, Tabs, Calendar (v3.0.1)
   ============================================================ */

/* Dashboard header with Book Now + Logout actions */
.grippy-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fff7f5 0%, #ffffff 100%);
    border: 1px solid #ffe3dd;
    border-radius: 14px;
}
.grippy-dash-header-title h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.grippy-dash-header-title p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}
.grippy-dash-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.grippy-book-now-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #fd6151 0%, #e04a3b 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(253, 97, 81, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.grippy-book-now-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(253, 97, 81, 0.35);
    color: #fff !important;
}
.grippy-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    background: #fff;
    color: #374151 !important;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.grippy-logout-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827 !important;
}

/* Improved dashboard tabs */
.grippy-tabs.grippy-tabs--top {
    display: flex;
    gap: 6px;
    margin: 0 0 20px;
    padding: 6px;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px 18px;
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn:hover {
    color: #fd6151;
    background: rgba(253, 97, 81, 0.06);
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn.active {
    background: #fff;
    color: #fd6151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Booking Calendar */
.grippy-booking-calendar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
}
.grippy-bcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}
.grippy-bcal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.grippy-bcal-nav {
    display: flex;
    gap: 6px;
}
.grippy-bcal-nav button {
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}
.grippy-bcal-nav button:hover {
    background: #fff7f5;
    border-color: #fd6151;
    color: #fd6151;
}
.grippy-bcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.grippy-bcal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 0;
}
.grippy-bcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.grippy-bcal-cell {
    min-height: 90px;
    background: #fafafa;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.grippy-bcal-cell--empty {
    background: transparent;
    border-color: transparent;
}
.grippy-bcal-cell.has-booking {
    background: #fff;
    border-color: #e5e7eb;
}
.grippy-bcal-cell.is-today {
    background: #fff7f5;
    border-color: #fd6151;
    box-shadow: 0 0 0 1px #fd6151 inset;
}
.grippy-bcal-daynum {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1;
    margin-bottom: 2px;
}
.grippy-bcal-cell.is-today .grippy-bcal-daynum {
    color: #fd6151;
    font-weight: 700;
}
/* Monthly calendar — booking indicator dots (Apple Calendar style).
   NEVER wrap to a second row — wrapping makes day cells stretch vertically
   and breaks the calendar grid. Cap visible dots to 3, then show "+N"
   inline. Cell height is FIXED so the calendar grid stays uniform no
   matter how busy any single day is. */
.grippy-bcal-cell {
    /* Force every cell to the same height regardless of how many
       bookings it has. Without this, a day with 4 bookings stretches
       the entire row, and the whole grid looks ragged. */
    max-height: 64px !important;
    overflow: hidden;
}
.grippy-bcal-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;       /* CRITICAL — never wrap */
    gap: 3px;
    margin-top: 4px;
    min-height: 8px;
    max-width: 100%;
    overflow: hidden;
}
.grippy-bcal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 5px;            /* dot can never shrink or grow */
    background: #10B981;
}
.grippy-bcal-dot--confirmed { background: #10B981; }
.grippy-bcal-dot--completed { background: #64748B; }
.grippy-bcal-dot--cancelled { background: #EF4444; opacity: 0.5; }
.grippy-bcal-dot--no_show   { background: #F59E0B; }
.grippy-bcal-dot-more {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    padding: 0 2px;
    line-height: 1;
}
.grippy-bcal-cell.has-booking .grippy-bcal-daynum {
    font-weight: 700;
    color: #0F172A;
}
.grippy-bcal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #6b7280;
}
.grippy-bcal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.grippy-bcal-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.grippy-bcal-dot--confirmed { background: #10b981; }
.grippy-bcal-dot--completed { background: #6b7280; }
.grippy-bcal-dot--cancelled { background: #ef4444; }

@media (max-width: 640px) {
    .grippy-dash-header { padding: 16px; }
    .grippy-dash-header-actions { width: 100%; }
    .grippy-book-now-btn, .grippy-logout-btn { flex: 1 1 auto; }
    .grippy-bcal-cell { min-height: 60px; padding: 4px; }
    .grippy-bcal-daynum { font-size: 11px; }
    .grippy-bcal-event { font-size: 9.5px; padding: 2px 4px; }
    .grippy-bcal-event-who { display: none; }
}

/* ============================================================
   v3.0.2 — Dashboard centering + Directory refinements
   ============================================================ */

/* Directory: sits flush below the site header (page-cleanup JS strips wrapper padding) */
.grippy-dir .grippy-dir-hero {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
}
@media (max-width: 782px) {
    .grippy-dir .grippy-dir-hero {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}

/* Back-to-dashboard chip above the directory */
.grippy-dir-back-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 16px 16px 0;
    box-sizing: border-box;
}
.grippy-dir-back-wrap + #grippy-directory .grippy-dir-hero,
.grippy-dir-back-wrap ~ #grippy-directory .grippy-dir-hero {
    padding-top: 12px !important;
}
.grippy-dir-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    color: #fd6151 !important;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #fed7ce;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.grippy-dir-back:hover {
    background: #fd6151;
    color: #fff !important;
    border-color: #fd6151;
}
.grippy-dir-back span { font-size: 16px; line-height: 1; }
/* v3.4.163 — the old 1060px/720px caps here forced 2-card layouts on
 * 1920px monitors. New caps live in the v3.4.163 block above (1880px).
 * Keeping the selectors but releasing the cap. */
.grippy-dir-toolbar,
.grippy-dir-layout {
    max-width: 1880px !important;
}
.grippy-dir-hero-inner {
    max-width: 1880px !important;
}

/* Client dashboard: center + narrower, closer to header */
.grippy-client-dashboard {
    padding-top: 80px !important;
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
@media (max-width: 782px) {
    .grippy-client-dashboard {
        padding-top: 60px !important;
    }
}
/* Let the grid layout handle widths — inner elements fill their column */
.grippy-client-dashboard .grippy-dash-header,
.grippy-client-dashboard .grippy-dash-body {
    width: 100%;
    max-width: none;
}
.grippy-dash-main > * { width: 100%; }

/* Calendar as a chart-like widget below stats */
.grippy-booking-calendar {
    margin-top: 8px;
    margin-bottom: 24px;
}
.grippy-bcal-title::before {
    content: "📅 ";
    margin-right: 4px;
}

/* ============================================================
   v3.0.3 — Compact calendar, tabs on top, hide site-header sign-in
   ============================================================ */

/* Hide "Sign in" link in site header/nav when user is logged in */
body.logged-in header a[href*="/sign-in"],
body.logged-in nav a[href*="/sign-in"],
body.logged-in .elementor-location-header a[href*="/sign-in"],
body.logged-in .elementor-widget-nav-menu a[href*="/sign-in"],
body.logged-in .site-header a[href*="/sign-in"],
body.logged-in [class*="header"] > * a[href*="/sign-in"] {
    display: none !important;
}

/* Dashboard: sits flush below the site header (page-cleanup JS strips wrapper padding) */
.grippy-client-dashboard {
    padding-top: 20px !important;
}
@media (max-width: 782px) {
    .grippy-client-dashboard { padding-top: 14px !important; }
}
.grippy-client-dashboard .grippy-dash-header {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 14px 20px;
}
.grippy-client-dashboard .grippy-dash-header-title h2 { font-size: 20px; }
.grippy-client-dashboard .grippy-dash-header-title p { font-size: 13px; }

/* Compact calendar — smaller cells, tighter spacing */
.grippy-booking-calendar--compact {
    padding: 14px 16px;
    border-radius: 12px;
    margin-top: 4px;
    margin-bottom: 16px;
}
.grippy-booking-calendar--compact .grippy-bcal-header {
    margin-bottom: 10px;
}
.grippy-booking-calendar--compact .grippy-bcal-title {
    font-size: 15px;
}
.grippy-booking-calendar--compact .grippy-bcal-nav button {
    width: 28px;
    height: 28px;
    font-size: 13px;
}
.grippy-booking-calendar--compact .grippy-bcal-weekday {
    font-size: 10px;
    padding: 3px 0;
}
.grippy-booking-calendar--compact .grippy-bcal-cell {
    min-height: 56px;
    padding: 4px;
    border-radius: 6px;
}
.grippy-booking-calendar--compact .grippy-bcal-daynum {
    font-size: 11px;
}
.grippy-booking-calendar--compact .grippy-bcal-event {
    font-size: 9.5px;
    padding: 2px 4px;
    border-left-width: 2px;
}
.grippy-booking-calendar--compact .grippy-bcal-event-who { display: none; }
.grippy-booking-calendar--compact .grippy-bcal-legend {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 11px;
    gap: 12px;
}
.grippy-booking-calendar--compact .grippy-bcal-dot { width: 8px; height: 8px; }

/* Tabs at top of dashboard — primary nav feel */
.grippy-client-dashboard .grippy-tabs--top {
    margin-top: 0;
    margin-bottom: 18px;
}

/* Browse Dieticians — same family as Book Now but softer (secondary coral) */
.grippy-browse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    background: #fff7f5;
    color: #fd6151 !important;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #fed7ce;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.grippy-browse-btn:hover {
    background: #fd6151;
    border-color: #fd6151;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(253, 97, 81, 0.25);
}

/* ============================================================
   v3.0.4 — Dashboard two-column layout with preferred-dietician sidebar
   ============================================================ */
.grippy-dash-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}
.grippy-dash-main { min-width: 0; }
.grippy-dash-side {
    position: sticky;
    top: 180px;
}
.grippy-dash-side:empty,
.grippy-dash-side[style*="display: none"],
.grippy-dash-side[style*="display:none"] { display: none !important; }

/* Make the preferred-dietician card feel like a sidebar widget */
.grippy-dash-side .grippy-my-dietician-card {
    background: #fff;
    border: 1px solid #ffe3dd;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(253, 97, 81, 0.06);
}
.grippy-dash-side .grippy-my-dietician-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #fd6151;
    font-size: 32px;
    font-weight: 700;
    color: #fd6151;
}
.grippy-dash-side .grippy-my-dietician-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grippy-dash-side .grippy-my-dietician-info { width: 100%; }
.grippy-dash-side .grippy-my-dietician-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fd6151;
    margin-bottom: 2px;
}
.grippy-dash-side .grippy-my-dietician-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 4px;
}
.grippy-dash-side .grippy-my-dietician-tagline {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}
.grippy-dash-side .grippy-my-dietician-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}
.grippy-dash-side .grippy-my-dietician-actions a {
    flex: 1 1 0;
    text-align: center;
    min-height: 38px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .grippy-dash-body {
        grid-template-columns: 1fr;
    }
    .grippy-dash-side { position: static; order: -1; }
    .grippy-dash-side .grippy-my-dietician-card { flex-direction: row; text-align: left; }
    .grippy-dash-side .grippy-my-dietician-photo { width: 64px; height: 64px; font-size: 22px; flex-shrink: 0; }
    .grippy-dash-side .grippy-my-dietician-actions { width: auto; }
}

/* ============================================================
   v3.0.5 — Meetings tab + alignment polish
   ============================================================ */
.grippy-dash-side { top: 20px; }

/* Meetings list cards — each row = one unique Google Meet link */
.grippy-meetings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.grippy-meeting-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.grippy-meeting-card:hover {
    border-color: #fd6151;
    box-shadow: 0 2px 12px rgba(253, 97, 81, 0.08);
}
.grippy-meeting-when {
    border-right: 1px solid #f3f4f6;
    padding-right: 18px;
}
.grippy-meeting-date {
    font-weight: 700;
    color: #111827;
    font-size: 14px;
    line-height: 1.2;
}
.grippy-meeting-time {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}
.grippy-meeting-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-bottom: 2px;
}
.grippy-meeting-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}
.grippy-meeting-url {
    font-size: 11.5px;
    color: #fd6151;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fff7f5;
    border: 1px solid #fed7ce;
    border-radius: 6px;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.grippy-meeting-link {
    min-width: 0;
}
.grippy-meeting-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.grippy-meetings-note {
    margin-top: 14px;
    color: #6b7280;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 720px) {
    .grippy-meeting-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .grippy-meeting-when {
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
        padding-right: 0;
        padding-bottom: 8px;
    }
}

/* ============================================================
   v3.0.6 — Tidy dashboard: tighter, less empty space
   ============================================================ */

/* Reduce vertical rhythm between sections */
.grippy-client-dashboard .grippy-dash-header {
    padding: 12px 18px !important;
    margin-bottom: 12px !important;
}
.grippy-client-dashboard .grippy-dash-header-title h2 { font-size: 18px !important; margin: 0; }
.grippy-client-dashboard .grippy-dash-header-title p { font-size: 12.5px !important; margin: 2px 0 0; }

.grippy-client-dashboard .grippy-tabs--top {
    margin-bottom: 12px !important;
}
.grippy-client-dashboard .grippy-tab-content {
    margin-bottom: 14px;
}
.grippy-client-dashboard .grippy-stat-cards {
    gap: 10px !important;
    margin-bottom: 14px;
}
.grippy-client-dashboard .grippy-stat-card {
    padding: 12px 14px !important;
}
.grippy-client-dashboard .grippy-booking-calendar--compact {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 12px 14px !important;
}

/* Tighter two-column grid with sensible proportions */
.grippy-dash-body {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 18px !important;
}

/* Sidebar card — a bit denser */
.grippy-dash-side .grippy-my-dietician-card {
    padding: 14px !important;
    gap: 8px !important;
}
.grippy-dash-side .grippy-my-dietician-photo {
    width: 72px !important;
    height: 72px !important;
    font-size: 26px !important;
}

@media (max-width: 900px) {
    .grippy-dash-body { grid-template-columns: 1fr !important; }
}

/* ============================================================
   v3.0.7 — Tighten header so "My Dashboard" sits next to Book Now
   ============================================================ */
.grippy-client-dashboard .grippy-dash-header {
    justify-content: flex-start !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 10px 14px !important;
}
.grippy-client-dashboard .grippy-dash-header-title {
    flex: 0 0 auto;
    margin-right: auto; /* pushes only the actions to the right edge */
}
.grippy-client-dashboard .grippy-dash-header-title h2 { font-size: 17px !important; }
.grippy-client-dashboard .grippy-dash-header-title p { font-size: 12px !important; }
.grippy-client-dashboard .grippy-dash-header-actions {
    gap: 8px !important;
}
.grippy-client-dashboard .grippy-dash-header-actions .grippy-btn,
.grippy-client-dashboard .grippy-book-now-btn,
.grippy-client-dashboard .grippy-browse-btn,
.grippy-client-dashboard .grippy-logout-btn {
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
}

/* Narrow sidebar and gap so sections feel denser */
.grippy-dash-body {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 14px !important;
}
@media (max-width: 820px) {
    .grippy-dash-body { grid-template-columns: 1fr !important; }
}

/* ============================================================
   v3.0.7 — FORCE center + align (overrides any cached rules)
   ============================================================ */
body .grippy-client-dashboard#grippy-client-dashboard {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 80px 16px 40px !important;
    box-sizing: border-box !important;
}

body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
    min-width: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    font-size: 17px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title p {
    font-size: 12px !important;
    margin: 2px 0 0 !important;
    line-height: 1.3 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > a,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-book-now-btn,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-browse-btn,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-logout-btn {
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    min-width: 0 !important;
    width: 100% !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main > * {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
    min-width: 0 !important;
    width: 100% !important;
    position: sticky !important;
    top: 20px !important;
}

@media (max-width: 820px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: 1fr !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
        position: static !important;
        order: -1 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
        margin-right: 0 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
        width: 100% !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
        flex: 1 1 0 !important;
    }
}

/* ==========================================================================
   v3.0.8 — iPhone / mobile booking-flow fixes
   1) Backdrop was display:block under 1024px and catching every tap.
   2) Step labels were zeroed-out (font-size: 0).
   3) Progress bar now scrolls horizontally so labels stay legible.
   4) Dietician / package cards and step nav buttons get safe tap targets.
   ========================================================================== */

/* CRITICAL: stop the invisible backdrop from swallowing every tap on mobile */
#grippy-booking-flow .grippy-bf-backdrop {
    pointer-events: none !important;
}
#grippy-booking-flow .grippy-bf-backdrop.is-open {
    pointer-events: auto !important;
}

@media (max-width: 1024px) {
    #grippy-booking-flow .grippy-bf-backdrop {
        display: block !important;
        opacity: 0;
        pointer-events: none !important;
    }
    #grippy-booking-flow .grippy-bf-backdrop.is-open {
        opacity: 1;
        pointer-events: auto !important;
    }
}

@media (max-width: 640px) {
    /* Container gets a bit of breathing room and doesn't sit under the header */
    #grippy-booking-flow {
        padding: 20px 14px 60px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    /* Progress bar: scrolls horizontally, labels visible */
    #grippy-booking-flow .grippy-progress-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
        justify-content: flex-start !important;
    }
    #grippy-booking-flow .grippy-progress-bar::-webkit-scrollbar { display: none !important; }

    #grippy-booking-flow .grippy-progress-step {
        flex: 0 0 auto !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        gap: 6px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        min-height: 36px !important;
        line-height: 1.2 !important;
    }
    #grippy-booking-flow .grippy-progress-step::before {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    #grippy-booking-flow .grippy-progress-step:not(:last-child)::after {
        min-width: 10px !important;
        max-width: 18px !important;
        margin-left: 6px !important;
    }

    /* Titles */
    #grippy-booking-flow .grippy-step-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }
    #grippy-booking-flow .grippy-step-subtitle {
        font-size: 13.5px !important;
        margin-bottom: 18px !important;
    }

    /* Cards — real tap targets, no weird overlap */
    #grippy-booking-flow .grippy-dietician-grid,
    #grippy-booking-flow .grippy-packages-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    #grippy-booking-flow .grippy-dietician-card,
    #grippy-booking-flow .grippy-package-card {
        padding: 16px !important;
        min-height: 72px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(253,97,81,.15) !important;
        cursor: pointer !important;
    }

    /* Buttons — full-width, tall, no shared tap area */
    #grippy-booking-flow .grippy-step-nav {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }
    #grippy-booking-flow .grippy-step-nav .grippy-btn,
    #grippy-booking-flow .grippy-btn {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        padding: 12px 18px !important;
        touch-action: manipulation !important;
    }

    /* Inputs — prevent iOS auto-zoom on focus */
    #grippy-booking-flow input,
    #grippy-booking-flow select,
    #grippy-booking-flow textarea {
        font-size: 16px !important;
    }

    /* Filter drawer: ensure it's above everything when open */
    #grippy-booking-flow .grippy-bf-sidebar {
        z-index: 1000 !important;
    }
}

@media (max-width: 400px) {
    #grippy-booking-flow .grippy-progress-step {
        font-size: 11px !important;
    }
    #grippy-booking-flow .grippy-step-title { font-size: 20px !important; }
}

/* ============================================================
   v3.0.9 — Dashboard desktop restore + calendar-right layout
   Desktop: wider centered container (1160px), and the main column
   puts stat-cards on the left with the compact booking calendar
   on the right, sharing a row. Sidebar keeps preferred-dietician.
   Phone: everything stacks, credit stat card + booking CTA visible.
   ============================================================ */

/* Restore a wider centered container on desktop */
body .grippy-client-dashboard#grippy-client-dashboard {
    max-width: 1160px !important;
    margin: 0 auto !important;
    padding: 40px 24px 60px !important;
}

/* Wider main column, 260px aside for preferred-dietician */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 20px !important;
    align-items: start !important;
}

/* Main column becomes a grid so stats + calendar share a row */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-areas:
        "tabs     tabs"
        "content  content"
        "stats    calendar" !important;
    gap: 18px !important;
    min-width: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-tabs,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-tabs--top {
    grid-area: tabs !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-tab-content {
    grid-area: content !important;
    min-width: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-stat-cards {
    grid-area: stats !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
    align-self: start !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-booking-calendar,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-booking-calendar--compact {
    grid-area: calendar !important;
    margin: 0 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Header alignment — keep actions near title, centered column */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    padding: 14px 20px !important;
    margin: 0 0 20px !important;
}

/* Tablet: collapse calendar below stats, sidebar below main */
@media (max-width: 1024px) {
    body .grippy-client-dashboard#grippy-client-dashboard {
        max-width: 960px !important;
        padding: 32px 20px 48px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }
}

@media (max-width: 820px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: 1fr !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "tabs"
            "content"
            "stats"
            "calendar" !important;
    }
}

/* Phone ≤640px: stack stats 1 col, calendar full-width, credits visible */
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard {
        padding: 24px 14px 48px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card {
        padding: 14px !important;
        min-height: 0 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-value {
        font-size: 22px !important;
    }
}

/* ============================================================
   v3.0.9 — Phone fix for booking flow credits display
   Make the credits box clearly visible, qty buttons fat-finger
   friendly, and the "Use credits" CTA full width.
   ============================================================ */
@media (max-width: 640px) {
    #grippy-booking-flow .grippy-credit-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    #grippy-booking-flow .grippy-credit-info {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    #grippy-booking-flow .grippy-credit-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 26px !important;
        flex-shrink: 0 !important;
    }
    #grippy-booking-flow .grippy-credit-info strong {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    #grippy-booking-flow .grippy-credit-count {
        font-size: 22px !important;
        display: inline !important;
    }
    #grippy-booking-flow .grippy-credit-balance {
        font-size: 12px !important;
    }
    #grippy-booking-flow .grippy-credit-actions {
        align-items: stretch !important;
        width: 100% !important;
    }
    #grippy-booking-flow .grippy-credit-qty-wrap {
        width: 100% !important;
        text-align: center !important;
    }
    #grippy-booking-flow .grippy-credit-qty-label {
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    #grippy-booking-flow .grippy-credit-qty-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    #grippy-booking-flow .grippy-credit-qty-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        touch-action: manipulation !important;
    }
    #grippy-booking-flow .grippy-credit-qty-val {
        font-size: 24px !important;
        min-width: 36px !important;
    }
    #grippy-booking-flow .grippy-use-credits-btn {
        width: 100% !important;
        min-height: 48px !important;
    }
}

/* ============================================================
   v3.0.10 — PREMIUM DASHBOARD SHELL
   ============================================================ */

body:has(.grippy-client-dashboard#grippy-client-dashboard) {
    background:
        radial-gradient(1100px 500px at 10% -5%, rgba(253,97,81,.08), transparent 60%),
        radial-gradient(900px 450px at 100% 0%, rgba(148,165,163,.10), transparent 55%),
        #f6f7fb !important;
}

body .grippy-client-dashboard#grippy-client-dashboard {
    max-width: none !important;
    padding: 36px clamp(20px, 4vw, 64px) 80px !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* HEADER */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    position: relative !important;
    padding: 24px 28px !important;
    margin: 0 0 28px !important;
    background: linear-gradient(135deg, rgba(253,97,81,.08) 0%, rgba(255,255,255,1) 55%, rgba(148,165,163,.08) 100%) !important;
    border: 1px solid rgba(253,97,81,.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04) !important;
    overflow: hidden !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header::before {
    content: '';
    position: absolute;
    top: -60px; right: -40px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(253,97,81,.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    background: linear-gradient(135deg, #1f2937 0%, #fd6151 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 4px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title p {
    font-size: 13.5px !important;
    color: #6b7280 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header .grippy-book-now-btn {
    background: linear-gradient(135deg, #fd6151 0%, #e04a3b 100%) !important;
    box-shadow: 0 6px 18px -4px rgba(253,97,81,.45) !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header .grippy-book-now-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -4px rgba(253,97,81,.55) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header .grippy-logout-btn {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    font-weight: 600 !important;
}

/* TABS */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top {
    padding: 6px !important;
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
    gap: 4px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top .grippy-tab-btn {
    min-height: 42px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top .grippy-tab-btn.active {
    background: linear-gradient(135deg, #fd6151 0%, #e04a3b 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -4px rgba(253,97,81,.45) !important;
}

/* TAB CONTENT PANEL */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
    min-height: 160px !important;
}

body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content table th {
    text-align: left;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #9ca3af !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #eef0f5 !important;
    font-weight: 700 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content table td {
    padding: 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: 14px !important;
    color: #374151 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content table tr:last-child td {
    border-bottom: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content table tr:hover td {
    background: #fafbff !important;
}

body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state {
    text-align: center !important;
    padding: 48px 20px !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state a {
    color: #fd6151 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* STAT CARDS */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card {
    position: relative !important;
    padding: 20px 20px 20px 24px !important;
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
    overflow: hidden !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fd6151 0%, #e04a3b 100%);
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(2)::before {
    background: linear-gradient(180deg, #94A5A3 0%, #6b7b79 100%);
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(3)::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(4)::before {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px -16px rgba(15,23,42,.15), 0 2px 6px rgba(15,23,42,.05) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    margin-bottom: 16px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(1) .grippy-stat-card-icon {
    background: linear-gradient(135deg, rgba(253,97,81,.15) 0%, rgba(253,97,81,.06) 100%) !important;
    color: #fd6151 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(2) .grippy-stat-card-icon {
    background: linear-gradient(135deg, rgba(148,165,163,.20) 0%, rgba(148,165,163,.06) 100%) !important;
    color: #6b7b79 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(3) .grippy-stat-card-icon {
    background: linear-gradient(135deg, rgba(16,185,129,.18) 0%, rgba(16,185,129,.06) 100%) !important;
    color: #059669 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card:nth-child(4) .grippy-stat-card-icon {
    background: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(99,102,241,.06) 100%) !important;
    color: #4f46e5 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    margin-bottom: 6px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

/* CALENDAR PANEL */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--compact {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-header {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-title {
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.01em !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav button {
    border: 1px solid #eef0f5 !important;
    background: #fff !important;
    border-radius: 8px !important;
    transition: all .15s !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav button:hover {
    background: #fff7f5 !important;
    border-color: #fd6151 !important;
    color: #fd6151 !important;
}

/* SIDEBAR */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
    position: sticky !important;
    top: 20px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block:not(:empty) {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
    position: relative !important;
    overflow: hidden !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block:not(:empty)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(135deg, rgba(253,97,81,.08) 0%, rgba(148,165,163,.08) 100%);
    pointer-events: none;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block > * {
    position: relative;
    z-index: 1;
}

/* MEETINGS */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-meet-card,
body .grippy-client-dashboard#grippy-client-dashboard [class*="meet-item"] {
    background: #fafbff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: all .2s !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-meet-card:hover,
body .grippy-client-dashboard#grippy-client-dashboard [class*="meet-item"]:hover {
    border-color: #fd6151 !important;
    background: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(253,97,81,.25) !important;
}

/* MOBILE */
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard {
        padding: 20px 14px 60px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
        padding: 18px !important;
        border-radius: 16px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
        font-size: 22px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card {
        padding: 16px 16px 16px 20px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-value {
        font-size: 26px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-icon {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 12px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--compact {
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* ============================================================
   v3.0.11 — ALIGNMENT PASS
   Fix vertical centering in header, balance stats vs calendar
   heights, prevent tab-bar wrap, normalize inner spacing.
   ============================================================ */

/* Header: vertical-center title beside the buttons, push actions right */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
    flex: 1 1 auto !important;
    min-width: 220px !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    line-height: 1.15 !important;
    padding-bottom: 2px !important;   /* prevents gradient-clip descender trim */
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 10px !important;
    align-items: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Body grid: align children to the top so columns share a baseline */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    align-items: start !important;
}

/* Main column: stats + calendar share a row with equal height */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    align-items: stretch !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-stat-cards,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-booking-calendar,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-booking-calendar--compact {
    align-self: stretch !important;
    height: 100% !important;
}

/* Stats grid: equal card heights, tight internal rhythm */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-cards {
    grid-auto-rows: 1fr !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-height: 128px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-icon {
    margin-bottom: 12px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-label {
    margin-bottom: 4px !important;
}

/* Calendar: fill its grid cell top to bottom */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--compact {
    display: flex !important;
    flex-direction: column !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-grid {
    flex: 1 1 auto !important;
}

/* Tabs: no wrap on desktop, even distribution, centered labels */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top {
    flex-wrap: nowrap !important;
    width: 100% !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top .grippy-tab-btn {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Tab content: consistent padding-top alignment */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content > :first-child {
    margin-top: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content > :last-child {
    margin-bottom: 0 !important;
}

/* Sidebar: match top of main-column tabs (not pushed down) */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
    align-self: start !important;
    margin-top: 0 !important;
}

/* Preferred-dietician inner elements: centered column */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block:not(:empty) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding-top: 64px !important;  /* room for the gradient banner */
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block img {
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.08) !important;
    align-self: center !important;
}

/* Meetings list: consistent column with aligned actions */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-meet-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-meet-card-actions,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-meet-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: 4px !important;
}

/* Tablet: when calendar drops below stats, stretch full-width */
@media (max-width: 1024px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "tabs"
            "content"
            "stats"
            "calendar" !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-stat-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Mobile: header stacks, title centers with actions below */
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 14px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
        width: 100% !important;
        justify-content: stretch !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
        flex: 1 1 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card {
        min-height: 108px !important;
    }
}

@media (max-width: 420px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top .grippy-tab-btn {
        font-size: 12px !important;
        padding: 8px 8px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-stat-card-value {
        font-size: 22px !important;
    }
}

/* ============================================================
   v3.0.12 — DASHBOARD REDESIGN + BOOKING-FLOW POLISH
   * Removed stat cards; calendar now fills main column full width
   * Credits pill lives in header actions next to Book Now
   * "Past" tab renamed to "Completed"
   * All booking-flow step titles + subtitles centered
   * Booking-flow Step-1 filter sidebar matches the Directory look
   * Tokenized colors — uses admin-picked CSS vars
   ============================================================ */

/* Re-tokenize the v3.0.10 premium blocks — primary/accent now respect admin colors */
:root {
    --grippy-dash-primary: var(--grippy-primary, #fd6151);
    --grippy-dash-primary-dark: var(--grippy-primary-dark, #e04a3b);
    --grippy-dash-primary-rgb: var(--grippy-primary-rgb, 253,97,81);
    --grippy-dash-accent: var(--grippy-accent, #FBBF24);
}

/* ---------- CREDITS PILL in header ---------- */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    min-height: 44px !important;
    background: linear-gradient(135deg, rgba(var(--grippy-dash-primary-rgb), .12) 0%, rgba(var(--grippy-dash-primary-rgb), .05) 100%) !important;
    border: 1px solid rgba(var(--grippy-dash-primary-rgb), .25) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    color: var(--grippy-dash-primary-dark) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.05) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: inherit !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill-val {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--grippy-dash-primary-dark) !important;
    letter-spacing: -0.01em !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--grippy-dash-primary-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    opacity: .85 !important;
}

/* ---------- DASHBOARD: main column full width (no more stats row) ---------- */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
        "tabs"
        "content"
        "calendar" !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide {
    grid-area: calendar !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
}

/* Wider calendar inside: larger cells + bigger nav */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-weekday {
    font-size: 12px !important;
    padding: 10px 6px !important;
    font-weight: 700 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-cell {
    min-height: 92px !important;
    padding: 8px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-daynum {
    font-size: 14px !important;
    font-weight: 600 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-event {
    font-size: 11px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
}

@media (max-width: 820px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--wide .grippy-bcal-cell {
        min-height: 56px !important;
    }
}

/* ---------- BOOKING-FLOW: center all step text ---------- */
#grippy-booking-flow .grippy-step-title,
#grippy-booking-flow .grippy-step-subtitle {
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#grippy-booking-flow .grippy-step-content {
    text-align: initial !important;  /* only titles center, body content keeps natural flow */
}
#grippy-booking-flow .grippy-credit-hint {
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 60px !important;
}

/* ---------- BOOKING-FLOW Step 1 filters: match Directory look ---------- */
#grippy-booking-flow .grippy-bf-sidebar {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
#grippy-booking-flow .grippy-bf-sidebar-head {
    background: linear-gradient(135deg, rgba(var(--grippy-dash-primary-rgb), .06) 0%, #fff 100%) !important;
    border-bottom: 1px solid #eef0f5 !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#grippy-booking-flow .grippy-bf-sidebar-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #111827 !important;
}
#grippy-booking-flow .grippy-bf-active-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: 8px !important;
    background: var(--grippy-dash-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#grippy-booking-flow .grippy-bf-sidebar-body {
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
#grippy-booking-flow .grippy-bf-search-wrap {
    position: relative !important;
}
#grippy-booking-flow .grippy-bf-search {
    width: 100% !important;
    padding: 11px 14px 11px 40px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transition: all .2s !important;
}
#grippy-booking-flow .grippy-bf-search:focus {
    outline: none !important;
    border-color: var(--grippy-dash-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--grippy-dash-primary-rgb), .12) !important;
}
#grippy-booking-flow .grippy-bf-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px; height: 16px;
    background: currentColor;
    color: #9ca3af;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center;
}
#grippy-booking-flow .grippy-bf-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
#grippy-booking-flow .grippy-bf-filter-group:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
#grippy-booking-flow .grippy-bf-filter-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 0 !important;
}
#grippy-booking-flow .grippy-bf-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
#grippy-booking-flow .grippy-bf-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    line-height: 1.3 !important;
}
#grippy-booking-flow .grippy-bf-chip:hover {
    border-color: var(--grippy-dash-primary) !important;
    color: var(--grippy-dash-primary-dark) !important;
    background: rgba(var(--grippy-dash-primary-rgb), .06) !important;
}
#grippy-booking-flow .grippy-bf-chip.active {
    background: var(--grippy-dash-primary) !important;
    border-color: var(--grippy-dash-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -3px rgba(var(--grippy-dash-primary-rgb), .4) !important;
}
#grippy-booking-flow .grippy-bf-clear-btn {
    width: 100% !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 4px !important;
    transition: all .15s !important;
}
#grippy-booking-flow .grippy-bf-clear-btn:hover {
    border-color: var(--grippy-dash-primary) !important;
    color: var(--grippy-dash-primary-dark) !important;
    background: rgba(var(--grippy-dash-primary-rgb), .04) !important;
}

/* Step-3 scheduling: center everything */
#grippy-booking-flow .grippy-session-progress,
#grippy-booking-flow .grippy-sched-modes,
#grippy-booking-flow .grippy-schedule-picker,
#grippy-booking-flow .grippy-calendar-header {
    text-align: center !important;
}
#grippy-booking-flow .grippy-sched-modes {
    justify-content: center !important;
}
#grippy-booking-flow .grippy-session-progress {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#grippy-booking-flow .grippy-calendar-header {
    justify-content: space-between !important;
}

/* Tokenize the v3.0.10 header band + tabs so admin colors flow through */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    background: linear-gradient(135deg, rgba(var(--grippy-dash-primary-rgb), .08) 0%, #fff 55%, rgba(148,165,163,.08) 100%) !important;
    border-color: rgba(var(--grippy-dash-primary-rgb), .18) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header::before {
    background: radial-gradient(circle, rgba(var(--grippy-dash-primary-rgb), .18) 0%, transparent 70%) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    background: linear-gradient(135deg, #1f2937 0%, var(--grippy-dash-primary) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header .grippy-book-now-btn {
    background: linear-gradient(135deg, var(--grippy-dash-primary) 0%, var(--grippy-dash-primary-dark) 100%) !important;
    box-shadow: 0 6px 18px -4px rgba(var(--grippy-dash-primary-rgb), .45) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top .grippy-tab-btn.active {
    background: linear-gradient(135deg, var(--grippy-dash-primary) 0%, var(--grippy-dash-primary-dark) 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(var(--grippy-dash-primary-rgb), .45) !important;
}

/* ============================================================
   v3.0.13 — CENTERED DASHBOARD + COLLAPSIBLE BOOKING FILTERS
   ============================================================ */

/* ---------- Dashboard: everything centered, credits under name ---------- */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 18px !important;
    padding: 28px 24px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    text-align: center !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title p {
    text-align: center !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title .grippy-credit-pill {
    margin-top: 4px !important;
    align-self: center !important;
    width: auto !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
    /* All three buttons on ONE row, right-aligned, no wrapping. The
       earlier rule's width:100% + flex-wrap:wrap was pushing Book Now
       onto its own line above Browse + Log out. */
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Center body + main column contents */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    justify-items: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    justify-items: stretch !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-tabs.grippy-tabs--top {
    justify-content: center !important;
    width: 100% !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state {
    text-align: center !important;
}

/* Sidebar stays right of main on desktop */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 32px !important;
}

/* Mobile: header actions one row, credits pill centered under name */
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
        padding: 22px 16px !important;
        gap: 14px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill {
        width: auto !important;
        padding: 10px 20px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Booking flow: collapsible filter groups ---------- */
#grippy-booking-flow .grippy-bf-group-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font: inherit !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    text-align: left !important;
}
#grippy-booking-flow .grippy-bf-group-toggle:hover {
    color: var(--grippy-dash-primary-dark, var(--grippy-primary-dark, #e04a3b)) !important;
}
#grippy-booking-flow .grippy-bf-chevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .15s, color .15s;
    flex-shrink: 0;
}
#grippy-booking-flow .grippy-bf-chevron::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .25s;
}
#grippy-booking-flow .grippy-bf-group-toggle:hover .grippy-bf-chevron {
    background: rgba(var(--grippy-dash-primary-rgb, var(--grippy-primary-rgb, 253,97,81)), .12) !important;
    color: var(--grippy-dash-primary-dark, var(--grippy-primary-dark, #e04a3b)) !important;
}

/* Expanded state: chevron points up (^) */
#grippy-booking-flow .grippy-bf-filter-group:not(.is-collapsed) .grippy-bf-chevron {
    transform: rotate(180deg);
}

/* Collapsed state: hide the chips with smooth transition */
#grippy-booking-flow .grippy-bf-group-body {
    max-height: 600px;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.4,0,.2,1), margin-top .3s, opacity .2s;
    opacity: 1;
    margin-top: 10px;
}
#grippy-booking-flow .grippy-bf-filter-group.is-collapsed .grippy-bf-group-body {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Tighten the group spacing now that label is a button */
#grippy-booking-flow .grippy-bf-filter-group {
    padding: 14px 0 !important;
    gap: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
#grippy-booking-flow .grippy-bf-filter-group:first-of-type {
    padding-top: 0 !important;
}
#grippy-booking-flow .grippy-bf-filter-group:last-of-type {
    padding-bottom: 6px !important;
    border-bottom: none !important;
}

/* Phone view polish — booking flow filter drawer */
@media (max-width: 1024px) {
    #grippy-booking-flow .grippy-bf-group-toggle {
        padding: 8px 0 !important;
    }
    #grippy-booking-flow .grippy-bf-chevron {
        width: 22px;
        height: 22px;
    }
}

/* Phone view: dashboard credit pill compact, single-line */
@media (max-width: 420px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
        font-size: 20px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title p {
        font-size: 13px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill {
        padding: 8px 16px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill-val {
        font-size: 16px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill-label {
        font-size: 11px !important;
    }
}

/* ============================================================
   v3.0.14 — Revert header to row layout, keep body centered
   Header: title (with credits beneath name) on the left,
   action buttons on the right — same as before. Everything
   below header stays centered.
   ============================================================ */

body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 20px !important;
    padding: 24px 28px !important;
    flex-wrap: wrap !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 220px !important;
    gap: 6px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title h2 {
    text-align: left !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title p {
    text-align: left !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title .grippy-credit-pill {
    align-self: flex-start !important;
    margin-top: 6px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
    /* Stack vertically, each button the same width — clean column. */
    flex: 0 0 auto !important;
    width: 200px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Mobile: header stacks, title + credits left-aligned, buttons full width */
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        padding: 22px 18px !important;
        gap: 14px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-title {
        align-items: flex-start !important;
        width: 100% !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions {
        width: 100% !important;
        justify-content: stretch !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header-actions > * {
        flex: 1 1 0 !important;
        width: auto !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-credit-pill {
        width: auto !important;
        align-self: flex-start !important;
    }
}

/* ============================================================
   v3.0.15 — True center for main column (tabs + calendar)
   Add a matching empty left column so the main is visually
   centered in the viewport while the sidebar stays right.
   ============================================================ */

body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 920px) 260px !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
    max-width: 1460px !important;
    margin: 0 auto !important;
    align-items: start !important;
    justify-content: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    grid-column: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
    grid-column: 3 !important;
    width: 100% !important;
}

/* When the sidebar has no content, main stays centered thanks to the
   grid. The empty left column mirrors the sidebar's width, producing
   perfect horizontal centering of tabs + calendar. */

/* Tablet ≤1200px: drop the left spacer, main + sidebar share space */
@media (max-width: 1200px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: minmax(0, 1fr) 260px !important;
        max-width: 1180px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
        grid-column: 1 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
        grid-column: 2 !important;
    }
}

/* ≤820px: stack sidebar below, main full width centered */
@media (max-width: 820px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: 1fr !important;
        max-width: 820px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
        grid-column: 1 !important;
    }
}

/* ==========================================================================
   Directory: flush-to-header (match booking page treatment)
   Eliminate whitespace above the hero by killing the header-offset padding,
   so the directory hero sits directly below the site header like /book/.
   ========================================================================== */
body #grippy-directory {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
    background: #ffffff !important;
}
body #grippy-directory .grippy-dir-hero {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
    margin-top: 0 !important;
}
@media (max-width: 782px) {
    body #grippy-directory {
        padding-top: 0 !important;
    }
    body #grippy-directory .grippy-dir-hero {
        padding-top: 16px !important;
        padding-bottom: 14px !important;
    }
}
/* Per-page selector — sits next to Sort in the toolbar */
.grippy-dir-per-page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}
.grippy-dir-per-page label {
    font-size: 13px;
    font-weight: 600;
    color: var(--grippy-text-muted, #64748B);
}
.grippy-dir-per-page select {
    min-height: 40px;
    padding: 6px 32px 6px 12px;
    border: 1px solid var(--grippy-border-light, #E5E7EB);
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: var(--grippy-text, #0F172A);
    cursor: pointer;
}
.grippy-dir-per-page select:focus {
    outline: 2px solid var(--grippy-primary, #94A5A3);
    outline-offset: 1px;
}

/* ===== v3.3.0 — client intake form section ===== */
.wxa-section-divider {
    margin: 24px 0 12px;
    text-align: center;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    border-top: 1px solid #E5E7EB;
    padding-top: 18px;
    line-height: 1.4;
}
.wxa-section-divider em {
    font-style: normal;
    color: #94A3B8;
    font-weight: 400;
    font-size: 12px;
}
.wxa-form .wxa-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.wxa-form .wxa-row > * { min-width: 0; }
@media (max-width: 520px) {
    .wxa-form .wxa-row { grid-template-columns: 1fr; }
}
.wxa-optional {
    color: #94A3B8;
    font-weight: 400;
    font-size: 12px;
}

/* ===== v3.3.0 — dietician dashboard client intake panel ===== */
.grippy-client-card { display: block; }
.grippy-client-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.grippy-client-toggle {
    margin-left: auto;
    font-size: 13px;
    padding: 6px 14px;
    min-height: 36px;
}
.grippy-client-profile {
    margin-top: 14px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}
.grippy-client-profile[hidden] { display: none; }
.grippy-client-profile-grid { display: grid; gap: 10px; }
.grippy-client-profile-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: start;
}
.grippy-client-profile-label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
}
.grippy-client-profile-value {
    color: #0F172A;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.grippy-client-profile-empty {
    text-align: left;
    color: #475569;
}
.grippy-client-profile-empty p { margin: 6px 0; }
@media (max-width: 600px) {
    .grippy-client-profile-row { grid-template-columns: 1fr; gap: 4px; }
    .grippy-client-toggle { width: 100%; margin-left: 0; margin-top: 8px; }
    .grippy-client-card-head { flex-wrap: wrap; }
}

/* ===== v3.4.0 — reschedule modal ===== */
.grippy-reschedule-modal { max-width: 520px; }
.grippy-reschedule-body { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.grippy-resched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 4px; }
.grippy-resched-slot { font-variant-numeric: tabular-nums; padding: 8px 6px; min-height: 38px; }
.grippy-resched-slot.is-active { background: var(--grippy-primary, #94A5A3); color: #fff; border-color: var(--grippy-primary, #94A5A3); }
.grippy-reschedule-modal .grippy-form-group { display: flex; flex-direction: column; gap: 6px; }
.grippy-reschedule-modal input[type=date] { min-height: 42px; padding: 8px 10px; }
.grippy-form-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; line-height: 1.4; }
.grippy-form-check input[type=radio] { margin-top: 4px; }

/* ===== v3.4.0 — messaging two-pane mailbox ===== */
.grippy-messages { font-size: 14px; }
.grippy-msg-shell { display: grid; grid-template-columns: 320px 1fr; min-height: 540px; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; background: #fff; }
.grippy-msg-threads { border-right: 1px solid #E5E7EB; background: #F8FAFC; display: flex; flex-direction: column; }
.grippy-msg-threads-head { padding: 14px 16px; font-weight: 600; border-bottom: 1px solid #E5E7EB; }
.grippy-msg-thread-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.grippy-msg-thread { padding: 12px 16px; border-bottom: 1px solid #EEF2F4; cursor: pointer; transition: background 0.15s; }
.grippy-msg-thread:hover { background: #F1F5F9; }
.grippy-msg-thread.is-active { background: #fff; border-left: 3px solid var(--grippy-primary, #94A5A3); }
.grippy-msg-thread-head { display: flex; align-items: center; gap: 6px; }
.grippy-msg-thread-name { font-weight: 600; flex: 1; }
.grippy-msg-unread-badge { background: var(--grippy-primary, #94A5A3); color: #fff; border-radius: 10px; font-size: 11px; padding: 2px 7px; min-width: 18px; text-align: center; }
.grippy-msg-flag { color: #DC2626; font-size: 14px; }
.grippy-msg-thread-snip { color: #64748B; font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grippy-msg-thread-when { color: #94A3B8; font-size: 11px; margin-top: 2px; }
.grippy-msg-pane { display: flex; flex-direction: column; }
.grippy-msg-pane-head { padding: 14px 18px; border-bottom: 1px solid #E5E7EB; }
.grippy-msg-list { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; max-height: 480px; }
.grippy-msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; background: #F1F5F9; color: #0F172A; align-self: flex-start; }
.grippy-msg-bubble.is-mine { background: var(--grippy-primary, #94A5A3); color: #fff; align-self: flex-end; }
.grippy-msg-bubble.is-flagged { outline: 1px dashed #F59E0B; }
.grippy-msg-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; }
.grippy-msg-compose { display: flex; gap: 10px; padding: 12px; border-top: 1px solid #E5E7EB; }
.grippy-msg-compose textarea { flex: 1; resize: vertical; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid #E5E7EB; }
.grippy-msg-empty { padding: 18px; color: #64748B; text-align: left; }
.grippy-msg-empty--center { display: flex; align-items: center; justify-content: center; flex: 1; text-align: center; }
@media (max-width: 760px) {
    .grippy-msg-shell { grid-template-columns: 1fr; }
    .grippy-msg-threads { max-height: 220px; }
}

.grippy-tab-btn--link { text-decoration: none; }
.grippy-tab-btn--link:hover { color: var(--grippy-primary, #94A5A3); }

/* ===== Session notes modal — original tall single-column layout ===== */
.grippy-notes-modal { max-width: 640px; }
.grippy-notes-section { margin: 14px 0; padding-top: 12px; border-top: 1px solid #EEF2F4; }
.grippy-notes-section:first-of-type { border-top: 0; padding-top: 0; }
.grippy-notes-section h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #0F172A; display: flex; align-items: center; gap: 6px; }
.grippy-notes-section h4 .grippy-help { font-size: 12px; color: #94A3B8; font-weight: 400; }
.grippy-notes-section textarea { width: 100%; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; font: inherit; resize: vertical; }
.grippy-notes-status { margin-top: 8px; font-size: 13px; color: #64748B; }
.grippy-notes-status--ok { color: #16A34A; }
.grippy-notes-status--err { color: #DC2626; }
.grippy-notes-block { background: #F8FAFC; padding: 12px 14px; border-radius: 10px; margin: 6px 0 16px; line-height: 1.55; color: #0F172A; }

/* ============================================================
   v3.4.1 — Wider dashboard + embedded messages tab + attachments
   ============================================================ */

/* Break out of theme's narrow content area on dashboard pages so the
   preferred-dietician sidebar isn't clipped. */
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
    width: 100%;
    box-sizing: border-box;
}

/* Generous main column, wider sidebar (360px) so the My Dietician card's
   View profile + Switch buttons both fit without clipping. */
.grippy-dash-body {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 32px !important;
}
@media (max-width: 1100px) {
    .grippy-dash-body { grid-template-columns: 1fr !important; }
    .grippy-dash-side { position: static !important; }
}

/* Inline-embedded messages tab inside the dashboard */
.grippy-tab-content .grippy-msg-shell {
    min-height: 540px;
    margin-top: 12px;
}

/* Attachment rendering inside message bubbles */
.grippy-msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    margin-top: 6px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-width: 100%;
}
.grippy-msg-bubble.is-mine .grippy-msg-attachment {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.grippy-msg-attachment-icon { font-size: 18px; }
.grippy-msg-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.grippy-msg-attachment img {
    max-width: 280px;
    max-height: 220px;
    border-radius: 8px;
    display: block;
}

/* File picker in compose */
.grippy-msg-compose {
    flex-direction: column;
    align-items: stretch;
}
.grippy-msg-compose-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.grippy-msg-attach-btn {
    border: 1px solid #E5E7EB;
    background: #fff;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}
.grippy-msg-attach-btn:hover { background: #F1F5F9; }
.grippy-msg-attach-input { display: none; }
.grippy-msg-attach-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #F1F5F9;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    color: #475569;
}
.grippy-msg-attach-preview button {
    background: none;
    border: 0;
    cursor: pointer;
    color: #DC2626;
    font-size: 16px;
    padding: 0;
}

/* ============================================================
   v3.4.2 — SaaS dashboard polish (Stripe / Linear inspired)
   ============================================================ */

/* Full-width app shell + subtle off-white app background that contrasts
   with white content cards. Standard SaaS layering. */
body.page-template-default .grippy-client-dashboard,
body.page-template-default .grippy-dietician-dashboard,
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(20px, 4vw, 64px) !important;
    padding-right: clamp(20px, 4vw, 64px) !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, #F7F8FA 0%, #FFFFFF 240px);
    background-attachment: local;
}

/* Polished header: app-bar feel — bigger title, calmer surface */
.grippy-client-dashboard .grippy-dash-header,
.grippy-dietician-dashboard .grippy-dash-header {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 22px 28px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08) !important;
    margin-bottom: 28px !important;
}
.grippy-client-dashboard .grippy-dash-header-title h2,
.grippy-dietician-dashboard .grippy-dash-header-title h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #0F172A !important;
}
.grippy-client-dashboard .grippy-dash-header-title p,
.grippy-dietician-dashboard .grippy-dash-header-title p {
    font-size: 15px !important;
    color: #64748B !important;
    margin-top: 6px !important;
}

/* Tabs as a SaaS pill group on a white card */
.grippy-tabs.grippy-tabs--top {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    gap: 4px !important;
    margin-bottom: 20px !important;
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn {
    flex: 0 1 auto !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748B !important;
    border-radius: 10px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}
.grippy-tabs.grippy-tabs--top .grippy-tab-btn.active {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
    color: var(--grippy-primary, #0F172A) !important;
    box-shadow:
        0 0 0 1px #E4E7EB,
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 8px -2px rgba(15, 23, 42, 0.05) !important;
    font-weight: 600 !important;
}

/* Each tab's content area gets the SaaS card treatment */
.grippy-client-dashboard .grippy-tab-content,
.grippy-dietician-dashboard .grippy-tab-content {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 20px;
}
/* Don't double-card the embedded messages shell (it's already a card) */
.grippy-client-dashboard #grippy-tab-messages,
.grippy-dietician-dashboard #grippy-tab-messages {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.grippy-client-dashboard #grippy-tab-messages .grippy-msg-shell,
.grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell {
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid #E4E7EB !important;
}

/* Booking calendar widget — refined SaaS treatment */
.grippy-booking-calendar {
    border-color: #E4E7EB !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.grippy-bcal-title { letter-spacing: -0.01em; }

/* Tables inside cards — quieter borders, comfortable rows */
.grippy-dashboard-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #E4E7EB !important;
}
.grippy-dashboard-table tbody td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 14px !important;
}
.grippy-dashboard-table tbody tr:hover td {
    background: #F8FAFC !important;
}

/* My-Dietician sidebar card — premium SaaS aside */
.grippy-dash-side .grippy-my-dietician-card {
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -12px rgba(15, 23, 42, 0.08) !important;
    padding: 22px 18px !important;
}
.grippy-dash-side .grippy-my-dietician-photo {
    box-shadow: 0 0 0 3px var(--grippy-primary, #94A5A3) !important;
}

/* Empty states — friendly SaaS feel */
.grippy-empty-state {
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 14px;
    padding: 36px 24px;
    text-align: center;
    color: #64748B;
}
.grippy-empty-state p { margin: 0; font-size: 14px; }
.grippy-empty-state a { font-weight: 600; }

/* Buttons — slight upgrade for SaaS consistency */
.grippy-btn {
    transition: all 0.15s ease !important;
}
.grippy-btn--primary {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

/* Responsive: collapse into single column gracefully on small screens */
@media (max-width: 1100px) {
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 640px) {
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        padding: 14px;
    }
    .grippy-tabs.grippy-tabs--top .grippy-tab-btn {
        flex: 1 1 auto !important;
        padding: 9px 12px !important;
    }
}

/* Messaging UI — tighter borders + softer shadow to match SaaS look */
.grippy-msg-shell {
    border-color: #E4E7EB !important;
}
.grippy-msg-thread.is-active {
    background: #fff !important;
    border-left-color: var(--grippy-primary, #94A5A3) !important;
}
.grippy-msg-bubble.is-mine {
    background: var(--grippy-primary, #94A5A3) !important;
}

/* ============================================================
   v3.4.3 — Three-column SaaS dashboard (left nav + main + sidebar)
   ============================================================ */

.grippy-dash-body--saas {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 380px !important;
    gap: 28px !important;
    align-items: start !important;
    max-width: none !important;
}

/* Override the constrained-width client dashboard rule */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body--saas {
    grid-template-columns: 240px minmax(0, 1fr) 380px !important;
    max-width: none !important;
}

/* ── LEFT NAV ── */
.grippy-dash-nav {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.06) !important;
    position: sticky !important;
    top: 100px !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}
.grippy-dash-nav .grippy-tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: left !important;
    padding: 11px 14px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 10px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    white-space: nowrap !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
}
.grippy-dash-nav .grippy-tab-btn:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    box-shadow: none !important;
}
.grippy-dash-nav .grippy-tab-btn.active {
    background: linear-gradient(180deg, var(--grippy-primary, #94A5A3) 0%, color-mix(in srgb, var(--grippy-primary, #94A5A3) 80%, #000) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.15) !important;
    font-weight: 600 !important;
}
.grippy-nav-ico {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.grippy-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grippy-nav-count {
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.grippy-dash-nav .grippy-tab-btn.active .grippy-nav-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── RIGHT SIDEBAR (wider Your Dietician card) ── */
.grippy-dash-body--saas .grippy-dash-side {
    width: 100%;
    position: sticky;
    top: 100px;
    align-self: start;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-card {
    border: 1px solid #E4E7EB !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.12) !important;
    padding: 32px 28px !important;
    gap: 14px !important;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-photo {
    width: 120px !important;
    height: 120px !important;
    font-size: 40px !important;
    box-shadow: 0 0 0 4px var(--grippy-primary, #94A5A3) !important;
    margin-bottom: 4px;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-label {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    color: var(--grippy-primary, #94A5A3) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-tagline {
    font-size: 14px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin-top: 6px !important;
}
.grippy-my-dietician-stats {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}
.grippy-my-dietician-stat { flex: 1; }
.grippy-my-dietician-stat-value {
    font-size: 18px;
    color: #FBBF24;
    letter-spacing: 1px;
    line-height: 1;
}
.grippy-my-dietician-stat-label {
    font-size: 12px;
    color: #64748B;
    margin-top: 4px;
    font-weight: 500;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 8px !important;
}
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions a,
.grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
}

/* Stack chart container properly in the right sidebar (dietitian dash) */
.grippy-dash-body--saas .grippy-dash-side .grippy-chart-container {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.10);
}

/* ── MOBILE / TABLET (≤1100px): collapse to single column with horizontal nav ── */
@media (max-width: 1100px) {
    .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .grippy-dash-nav {
        position: static !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding: 6px !important;
        scrollbar-width: thin;
    }
    .grippy-dash-nav .grippy-tab-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 9px 14px !important;
        min-height: 38px !important;
    }
    .grippy-nav-ico { display: none !important; }
    .grippy-nav-count { padding: 1px 6px !important; }
    .grippy-dash-body--saas .grippy-dash-side {
        position: static !important;
    }
}

/* ============================================================
   v3.4.4 - Profile editor, My Files, compact left calendar, mobile pass
   ============================================================ */

/* Update SaaS layout to 3 cols where the LEFT column holds nav + calendar */
.grippy-dash-body--saas {
    grid-template-columns: 260px minmax(0, 1fr) 380px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body--saas {
    grid-template-columns: 260px minmax(0, 1fr) 380px !important;
}

.grippy-dash-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;
    align-self: start;
}
.grippy-dash-left .grippy-dash-nav {
    position: static !important;
    top: auto !important;
}

/* Compact mini-calendar widget */
.grippy-booking-calendar.grippy-booking-calendar--mini {
    padding: 12px !important;
    border-radius: 16px !important;
    background: #fff;
    border: 1px solid #E4E7EB;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.06);
}
.grippy-booking-calendar--mini .grippy-bcal-title { font-size: 14px !important; }
.grippy-booking-calendar--mini .grippy-bcal-header { margin-bottom: 8px !important; }
.grippy-booking-calendar--mini .grippy-bcal-grid,
.grippy-booking-calendar--mini .grippy-bcal-cell,
.grippy-booking-calendar--mini .grippy-bcal-day { font-size: 12px !important; }
.grippy-booking-calendar--mini .grippy-bcal-day-num { font-size: 12px !important; }
.grippy-booking-calendar--mini .grippy-bcal-cell { min-height: 38px !important; padding: 4px !important; }
.grippy-booking-calendar--mini .grippy-bcal-event { font-size: 10px !important; padding: 2px 4px !important; line-height: 1.2 !important; }
.grippy-booking-calendar--mini .grippy-bcal-legend { display: none !important; }
.grippy-booking-calendar--mini .grippy-bcal-nav { gap: 6px !important; }
.grippy-booking-calendar--mini .grippy-bcal-prev,
.grippy-booking-calendar--mini .grippy-bcal-next {
    width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important;
}

/* Profile editor styles */
.grippy-profile-editor { max-width: 720px; }
.grippy-profile-editor-head { margin-bottom: 20px; }
.grippy-profile-editor-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0F172A;
}
.grippy-profile-form .grippy-form-group { margin-bottom: 16px; }
.grippy-profile-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
.grippy-form-optional { color: #94A3B8; font-weight: 400; font-size: 12px; }
.grippy-profile-form textarea,
.grippy-profile-form input[type=date],
.grippy-profile-form input[type=number] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E4E7EB;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: #0F172A;
    box-sizing: border-box;
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.grippy-profile-form textarea { min-height: 56px; resize: vertical; }
.grippy-profile-form textarea:focus,
.grippy-profile-form input:focus {
    outline: none;
    border-color: var(--grippy-primary, #94A5A3);
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.15);
}
.grippy-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.grippy-profile-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.grippy-profile-status { font-size: 13px; color: #64748B; }
.grippy-profile-status--ok { color: #16A34A; font-weight: 600; }
.grippy-profile-status--err { color: #DC2626; font-weight: 600; }

/* My Files grid */
.grippy-files-view { max-width: 1100px; }
.grippy-files-head { margin-bottom: 18px; }
.grippy-files-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0F172A;
}
.grippy-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.grippy-file-card {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}
.grippy-file-card:hover {
    transform: translateY(-2px);
    border-color: var(--grippy-primary, #94A5A3);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.15);
}
.grippy-file-thumb {
    aspect-ratio: 4/3;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grippy-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.grippy-file-thumb--icon { font-size: 48px; }
.grippy-file-meta { padding: 12px 14px; }
.grippy-file-name {
    font-weight: 600;
    color: #0F172A;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grippy-file-sub {
    color: #64748B;
    font-size: 12px;
    margin-top: 4px;
}

/* Mobile optimization */
@media (max-width: 1100px) {
    .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
    }
    .grippy-dash-left {
        position: static !important;
        gap: 12px !important;
    }
    .grippy-dash-left .grippy-dash-nav,
    .grippy-dash-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        gap: 6px !important;
        padding: 6px !important;
    }
    .grippy-dash-left .grippy-dash-nav .grippy-tab-btn,
    .grippy-dash-nav .grippy-tab-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 9px 14px !important;
        min-height: 38px !important;
    }
    .grippy-nav-ico { display: none !important; }
    .grippy-dash-side, .grippy-dash-body--saas .grippy-dash-side {
        position: static !important;
    }
    .grippy-booking-calendar.grippy-booking-calendar--mini {
        max-width: none !important;
    }
}

@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard,
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 88px !important;
    }

    .grippy-client-dashboard .grippy-dash-header,
    .grippy-dietician-dashboard .grippy-dash-header {
        padding: 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .grippy-client-dashboard .grippy-dash-header-title h2,
    .grippy-dietician-dashboard .grippy-dash-header-title h2 {
        font-size: 20px !important;
    }
    .grippy-client-dashboard .grippy-dash-header-actions,
    .grippy-dietician-dashboard .grippy-dash-header-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .grippy-client-dashboard .grippy-dash-header-actions .grippy-btn,
    .grippy-client-dashboard .grippy-dash-header-actions a,
    .grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn,
    .grippy-dietician-dashboard .grippy-dash-header-actions a {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .grippy-stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .grippy-stat-card {
        padding: 14px !important;
    }
    .grippy-stat-card-value { font-size: 22px !important; }

    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .grippy-form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grippy-files-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-card {
        padding: 22px 18px !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-photo {
        width: 96px !important;
        height: 96px !important;
        font-size: 32px !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-name {
        font-size: 18px !important;
    }

    .grippy-dashboard-table thead th { font-size: 11px !important; padding: 8px !important; }
    .grippy-dashboard-table tbody td { padding: 10px 8px !important; font-size: 13px !important; }
    .grippy-table-actions { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
    .grippy-table-actions .grippy-btn--sm { font-size: 12px !important; padding: 6px 10px !important; min-height: 32px !important; }

    .grippy-msg-shell { grid-template-columns: 1fr !important; min-height: 480px !important; }
    .grippy-msg-threads { max-height: 200px !important; }
    .grippy-msg-bubble { max-width: 88% !important; }

    .grippy-review-modal,
    .grippy-notes-modal,
    .grippy-reschedule-modal {
        margin: 16px !important;
        padding: 20px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

@media (max-width: 640px) {
    .grippy-btn, .grippy-tab-btn, .grippy-form-check, .grippy-resched-slot {
        min-height: 44px !important;
    }
}

/* ============================================================
   v3.4.5 - Chip-based profile fields, calendar fixes, content centering
   ============================================================ */

/* Mini calendar - tight arrow buttons + nowrap month label */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-booking-calendar--mini .grippy-bcal-nav,
.grippy-booking-calendar--mini .grippy-bcal-nav {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.grippy-booking-calendar--mini .grippy-bcal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important;
}
.grippy-booking-calendar--mini .grippy-bcal-title {
    flex: 1 1 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.grippy-booking-calendar--mini .grippy-bcal-weekday {
    font-size: 10px !important;
    padding: 4px 0 !important;
}
.grippy-booking-calendar--mini .grippy-bcal-cell {
    min-height: 32px !important;
    padding: 2px !important;
}

/* Center main column content - readable max-width on tab content cards */
.grippy-dash-body--saas .grippy-dash-main {
    width: 100%;
}
.grippy-client-dashboard .grippy-dash-main .grippy-tab-content,
.grippy-dietician-dashboard .grippy-dash-main .grippy-tab-content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 880px !important;
    width: 100% !important;
}
.grippy-client-dashboard .grippy-dash-main #grippy-tab-messages,
.grippy-dietician-dashboard .grippy-dash-main #grippy-tab-messages {
    max-width: 1100px !important;
}
.grippy-client-dashboard .grippy-dash-main #grippy-tab-files {
    max-width: 1100px !important;
}

/* Chip-based selectors */
.grippy-chip-group {
    margin-bottom: 22px;
}
.grippy-chip-group-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}
.grippy-chip-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.grippy-chip-option {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #E4E7EB;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
    line-height: 1;
    user-select: none;
}
.grippy-chip-option:hover {
    border-color: var(--grippy-primary, #94A5A3);
    color: var(--grippy-primary, #94A5A3);
    background: #F8FAFC;
}
.grippy-chip-option.is-active {
    background: var(--grippy-primary, #94A5A3);
    color: #fff;
    border-color: var(--grippy-primary, #94A5A3);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    font-weight: 600;
}
.grippy-chip-option.is-active::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
}
.grippy-chip-extra {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #E4E7EB;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    background: #fff;
    color: #0F172A;
    box-sizing: border-box;
    min-height: 40px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.grippy-chip-extra:focus {
    outline: none;
    border-color: var(--grippy-primary, #94A5A3);
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.15);
}
.grippy-chip-extra::placeholder {
    color: #94A3B8;
    font-style: italic;
}

/* Mobile: chips wrap nicely with slightly smaller gap */
@media (max-width: 640px) {
    .grippy-chip-options { gap: 6px; }
    .grippy-chip-option { font-size: 12px; padding: 7px 12px; min-height: 34px; }
    .grippy-client-dashboard .grippy-dash-main .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-dash-main .grippy-tab-content {
        max-width: 100% !important;
    }
}

/* ============================================================
   v3.4.6 - Unify dietitian profile pills with SaaS chip style
   ============================================================ */

/* Apply the chip look to the existing .grippy-pill-select used in
   the dietitian dashboard's specialties + languages pickers. */
.grippy-pill-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.grippy-pill-select {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: 36px !important;
    line-height: 1 !important;
    user-select: none !important;
    margin: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
}
.grippy-pill-select:hover {
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary, #94A5A3) !important;
    background: #F8FAFC !important;
}
.grippy-pill-select.grippy-pill-select--on {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
    font-weight: 600 !important;
}
.grippy-pill-select.grippy-pill-select--on::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Hide the underlying checkbox - the entire pill is the click target */
.grippy-pill-select input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Profile sections in the dietitian dashboard - cleaner spacing */
.grippy-profile-section {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #F1F5F9;
}
.grippy-profile-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.grippy-profile-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.grippy-profile-section h3 .grippy-field-hint {
    font-weight: 400;
    color: #94A3B8;
    font-size: 13px;
}

/* Mobile: smaller pills */
@media (max-width: 640px) {
    .grippy-pill-group { gap: 6px !important; }
    .grippy-pill-select {
        font-size: 12px !important;
        padding: 7px 12px !important;
        min-height: 34px !important;
    }
}

/* ============================================================
   v3.4.7 - Bookings filter, calendar popover, button polish, empty states
   ============================================================ */

/* Empty state - centered content with primary CTA */
.grippy-empty-state {
    text-align: center !important;
    border: 1px dashed #E4E7EB !important;
    background: #fff !important;
    color: #475569 !important;
    padding: 36px 22px !important;
}
.grippy-empty-state p { margin: 0 0 14px !important; font-size: 14px; color: #64748B; }
.grippy-empty-state a { font-weight: 600; }
.grippy-empty-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 4px;
}

/* Bookings filter pills */
.grippy-bookings-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.grippy-bookings-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #E4E7EB;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
}
.grippy-bookings-filter-pill span {
    background: #F1F5F9;
    color: #64748B;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}
.grippy-bookings-filter-pill:hover {
    border-color: var(--grippy-primary, #94A5A3);
    color: var(--grippy-primary, #94A5A3);
}
.grippy-bookings-filter-pill.is-active {
    background: var(--grippy-primary, #94A5A3);
    border-color: var(--grippy-primary, #94A5A3);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.grippy-bookings-filter-pill.is-active span {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Calendar - clickable cells + day popover */
.grippy-bcal-cell.is-clickable {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.grippy-bcal-cell.is-clickable:hover {
    background: rgba(148, 165, 163, 0.08) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}
.grippy-bcal-pop { max-width: 480px; }
.grippy-bcal-pop-list { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.grippy-bcal-pop-item {
    background: #F8FAFC;
    border: 1px solid #E4E7EB;
    border-left: 3px solid var(--grippy-primary, #94A5A3);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.grippy-bcal-pop-item--cancelled { border-left-color: #94A3B8; opacity: 0.7; }
.grippy-bcal-pop-item--completed { border-left-color: #16A34A; }
.grippy-bcal-pop-time { font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; }
.grippy-bcal-pop-who { color: #64748B; font-size: 13px; flex: 1; min-width: 120px; }

/* Booking flow - constrain Next button width (was full-width) */
.grippy-bf-actions, .grippy-step-actions, .grippy-bf-content .grippy-step-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
}
.grippy-next-btn,
.grippy-bf-content .grippy-btn--primary,
.grippy-step-actions .grippy-btn--primary,
.grippy-step-content .grippy-btn--primary {
    width: auto !important;
    min-width: 160px !important;
    max-width: 260px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    align-self: flex-end !important;
    display: inline-flex !important;
}
/* Package card title — graceful wrap for awkward names like
   "1 on 1 Consultation" that look weird as a single line. Modern browsers
   balance lines so "1 on 1" stays together and "Consultation" drops to
   line 2, matching multi-word titles like "4 Sessions Package". */
.grippy-package-card h3,
.grippy-package-card .grippy-package-name,
.grippy-package-card .grippy-package-title {
    text-wrap: balance;
    white-space: normal;
    word-break: keep-all;
    hyphens: none;
    line-height: 1.2;
}

/* "View my appointments" button on the post-booking success screen —
   hardened against any cached/overridden CSS bleed-through from a
   previous build. Pill shape, brand color, capped width. */
.grippy-success-view-appts {
    text-wrap: nowrap;
    white-space: nowrap;
}

/* Messages: per-thread delete — a bare clickable glyph, no button
   chrome at all. The old CSS kept losing to .grippy-btn cascade rules
   that re-painted it as a pill. This time we nuke every visual
   property a button could inherit, with extra specificity prefix. */
.grippy-msg-thread .grippy-msg-thread-trash,
.grippy-msg-thread-list .grippy-msg-thread-trash,
button.grippy-msg-thread-trash {
    /* Reset every property a parent .grippy-btn / WP button rule could set */
    all: unset !important;
    /* Re-apply only what we want */
    margin-left: auto !important;
    cursor: pointer !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    border-radius: 4px !important;
    flex: 0 0 22px !important;
    box-sizing: border-box !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
}
.grippy-msg-thread .grippy-msg-thread-trash:hover,
button.grippy-msg-thread-trash:hover {
    color: #B91C1C !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.grippy-msg-thread .grippy-msg-thread-trash:active {
    color: #7F1D1D !important;
    background: rgba(239, 68, 68, 0.16) !important;
}
.grippy-msg-thread .grippy-msg-thread-trash:focus-visible {
    outline: 2px solid #FCA5A5 !important;
    outline-offset: 1px !important;
}
.grippy-msg-thread .grippy-msg-thread-trash svg {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    stroke: currentColor !important;
    fill: none !important;
    pointer-events: none !important;
}
.grippy-msg-thread-head { display: flex !important; align-items: center !important; gap: 6px !important; }

/* In-plugin confirm modal (replaces window.confirm). */
.grippy-msg-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    animation: grippy-fade-in 0.15s ease;
}
@keyframes grippy-fade-in { from { opacity: 0; } to { opacity: 1; } }
.grippy-msg-modal {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    max-width: 440px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    animation: grippy-pop-in 0.18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes grippy-pop-in { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.grippy-msg-modal-title {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
}
.grippy-msg-modal-body {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 20px;
}
.grippy-msg-modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 4px !important;
}
/* Cancel + Delete buttons — `all: unset` nukes every inherited style
   from .grippy-btn / WordPress button rules that were bleeding through
   as the sage-green pill and coral hover border. Then we re-apply ONLY
   the props we want. High-specificity selectors ensure these win. */
.grippy-msg-modal .grippy-msg-modal-cancel,
.grippy-msg-modal .grippy-msg-modal-confirm,
button.grippy-msg-modal-cancel,
button.grippy-msg-modal-confirm {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    min-width: 96px !important;
    text-align: center !important;
    font-family: inherit !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    -webkit-appearance: none !important;
            appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.grippy-msg-modal .grippy-msg-modal-cancel,
button.grippy-msg-modal-cancel {
    background: #F8FAFC !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
}
.grippy-msg-modal .grippy-msg-modal-cancel:hover,
button.grippy-msg-modal-cancel:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}
.grippy-msg-modal .grippy-msg-modal-cancel:active {
    background: #E2E8F0 !important;
    transform: scale(0.98) !important;
}
.grippy-msg-modal .grippy-msg-modal-confirm,
button.grippy-msg-modal-confirm {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}
.grippy-msg-modal .grippy-msg-modal-confirm:hover,
button.grippy-msg-modal-confirm:hover {
    filter: brightness(0.95) !important;
}
.grippy-msg-modal .grippy-msg-modal-confirm:active {
    transform: scale(0.98) !important;
}
/* Danger variant — solid red, no gradient, no shadow. The previous
   gradient + heavy shadow read as cartoonish; flat solid feels more
   professional and matches modern dialog patterns (Linear, Notion). */
.grippy-msg-modal .grippy-msg-modal-confirm.is-danger,
button.grippy-msg-modal-confirm.is-danger {
    background: #DC2626 !important;
    color: #fff !important;
    border-color: #DC2626 !important;
}
.grippy-msg-modal .grippy-msg-modal-confirm.is-danger:hover,
button.grippy-msg-modal-confirm.is-danger:hover {
    background: #B91C1C !important;
    border-color: #B91C1C !important;
    filter: none !important;
}
.grippy-msg-modal .grippy-msg-modal-confirm:focus-visible,
.grippy-msg-modal .grippy-msg-modal-cancel:focus-visible {
    outline: 2px solid #94A3B8 !important;
    outline-offset: 2px !important;
}

/* Package card's Select button — center it, don't right-align like Next.
   The generic .grippy-btn--primary rule above was bleeding through into
   package cards and pushing Select to the right edge. */
.grippy-package-card .grippy-select-package,
.grippy-step-content .grippy-package-card .grippy-btn--primary {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 140px !important;
}
@media (max-width: 640px) {
    .grippy-next-btn,
    .grippy-bf-content .grippy-btn--primary {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Remove orange dashed/border styling from frontend UI elements.
   Keep brand color in primary fills, but neutral borders elsewhere. */
.grippy-empty-state,
.grippy-booking-calendar,
.grippy-tab-content {
    border-color: #E4E7EB !important;
}
.grippy-bcal-prev:hover, .grippy-bcal-next:hover,
.grippy-bcal-nav:hover {
    background: #F1F5F9 !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary, #94A5A3) !important;
}
/* Override the legacy orange #fd6151 hover ring on dashboard nav buttons */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav:hover,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav button:hover {
    background: #F1F5F9 !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary, #94A5A3) !important;
}
/* Browse Dieticians button: neutralize the orange tinted background */
.grippy-browse-btn {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-browse-btn:hover {
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary, #94A5A3) !important;
    background: #F8FAFC !important;
}
/* Outline-danger - quieter red, no orange tint */
.grippy-btn--outline-danger {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
}
.grippy-btn--outline-danger:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}

/* Messages compose - aligned attach button + textarea + send */
.grippy-msg-compose {
    flex-direction: column !important;
    align-items: stretch !important;
}
.grippy-msg-compose-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100%;
}
.grippy-msg-compose-row textarea {
    flex: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    line-height: 1.4 !important;
    resize: none !important;
}
.grippy-msg-compose-row textarea:focus {
    height: auto !important;
    min-height: 80px !important;
    resize: vertical !important;
}
.grippy-msg-attach-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.grippy-msg-compose-row .grippy-btn--primary {
    flex-shrink: 0 !important;
    height: 44px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    align-self: center !important;
}

/* ============================================================
   v3.4.8 - Centered content, button text contrast, neutral focus rings,
            compact + professional My Profile
   ============================================================ */

/* ── 1. Center the booking filter pills ── */
.grippy-bookings-filter {
    justify-content: center !important;
    margin-bottom: 22px !important;
}

/* ── 2. White text on the "Book a session" empty-state CTA (and any
        primary button anywhere) — fixes the unreadable coral-on-sage ── */
.grippy-empty-state .grippy-btn,
.grippy-empty-state .grippy-btn--primary,
.grippy-empty-cta,
.grippy-btn--primary {
    color: #fff !important;
    text-decoration: none !important;
}
.grippy-btn--primary:hover,
.grippy-btn--primary:focus,
.grippy-empty-cta:hover {
    color: #fff !important;
}
/* Tighter empty-state - the CTA shouldn't span the whole card */
.grippy-empty-state {
    text-align: center !important;
}
.grippy-empty-state .grippy-btn,
.grippy-empty-state .grippy-empty-cta {
    display: inline-flex !important;
    width: auto !important;
    max-width: 320px !important;
    min-width: 200px !important;
    margin: 6px auto 0 !important;
    padding: 12px 28px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── 3. Calendar arrows - neutral border, no coral ring ── */
.grippy-bcal-nav,
.grippy-bcal-nav button,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav button {
    border: 1px solid #E4E7EB !important;
    background: #F8FAFC !important;
    color: #475569 !important;
    box-shadow: none !important;
    outline: none !important;
}
.grippy-bcal-nav:hover,
.grippy-bcal-nav button:hover,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav:hover,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bcal-nav button:hover {
    background: #fff !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* ── 4. Remove the coral/orange browser-default outline on chips and
        pills, replace with a quiet brand-colored ring ── */
.grippy-chip-option,
.grippy-pill-select,
.grippy-bookings-filter-pill,
.grippy-bcal-nav,
.grippy-bcal-nav button,
.grippy-tab-btn,
.grippy-btn {
    outline: none !important;
}
.grippy-chip-option:focus-visible,
.grippy-pill-select:focus-visible,
.grippy-bookings-filter-pill:focus-visible,
.grippy-bcal-nav:focus-visible,
.grippy-bcal-nav button:focus-visible,
.grippy-tab-btn:focus-visible,
.grippy-btn:focus-visible {
    outline: 2px solid rgba(148, 165, 163, 0.55) !important;
    outline-offset: 2px !important;
}

/* Kill any legacy box-shadow rings that look orange */
.grippy-chip-option,
.grippy-pill-select {
    box-shadow: none !important;
}
.grippy-chip-option.is-active,
.grippy-pill-select.grippy-pill-select--on {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

/* ── 5. My Profile - compact, centered, professional ── */
.grippy-profile-editor {
    max-width: 720px !important;
    margin: 0 auto !important;
}
.grippy-profile-editor-head { text-align: left; }
.grippy-profile-editor-head h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
}
.grippy-profile-editor-head .grippy-help {
    font-size: 13px !important;
    color: #64748B !important;
    margin: 0 0 28px !important;
    line-height: 1.5 !important;
}

/* Chip groups - more breathing room between groups, less inside */
.grippy-chip-group {
    margin-bottom: 22px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
.grippy-chip-group:last-of-type {
    border-bottom: 0 !important;
}
.grippy-chip-group-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 4px !important;
    letter-spacing: 0 !important;
}
.grippy-chip-group .grippy-help {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    color: #94A3B8 !important;
}
.grippy-chip-options {
    gap: 6px !important;
    margin-bottom: 10px !important;
}

/* Chips - smaller, tighter, professional */
.grippy-chip-option {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    border-width: 1px !important;
    border-color: #E4E7EB !important;
    background: #fff !important;
    color: #475569 !important;
}
.grippy-chip-option:hover {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
.grippy-chip-option.is-active {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    font-weight: 600 !important;
}
.grippy-chip-option.is-active::before {
    margin-right: 5px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* The "Other (optional)" extra input - smaller, subtle */
.grippy-chip-extra {
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    background: #FAFBFC !important;
    border-color: #E4E7EB !important;
}
.grippy-chip-extra::placeholder {
    color: #CBD5E1 !important;
    font-style: normal !important;
}

/* Free-text fields (interests, medical_notes) - cleaner labels */
.grippy-profile-form .grippy-form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}
.grippy-profile-form textarea {
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: #FAFBFC !important;
    min-height: 70px !important;
    line-height: 1.5 !important;
}
.grippy-profile-form textarea:focus,
.grippy-profile-form input:focus,
.grippy-chip-extra:focus {
    background: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.18) !important;
}
.grippy-profile-form input[type=date],
.grippy-profile-form input[type=number] {
    font-size: 13px !important;
    padding: 9px 12px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    background: #FAFBFC !important;
}

/* Date / Height / Weight row tightened */
.grippy-form-row {
    gap: 10px !important;
    margin-bottom: 22px !important;
}
.grippy-form-optional {
    color: #CBD5E1 !important;
    font-weight: 400 !important;
    font-size: 11px !important;
}

/* Save button - aligned right, professional */
.grippy-profile-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #F1F5F9 !important;
}
.grippy-profile-form-actions .grippy-btn--primary {
    min-width: 160px !important;
    padding: 11px 24px !important;
    font-size: 14px !important;
}

@media (max-width: 640px) {
    .grippy-chip-option { font-size: 12px !important; padding: 6px 10px !important; }
    .grippy-bookings-filter-pill { font-size: 12px !important; padding: 7px 12px !important; }
    .grippy-profile-form-actions { flex-direction: column-reverse !important; align-items: stretch !important; }
    .grippy-profile-form-actions .grippy-btn--primary { width: 100% !important; }
}

/* ============================================================
   v3.4.9 - Medium chip sizing, 2FA form, session timeout banner
   ============================================================ */

/* Medium-sized chips (between previous "small" v3.4.8 and original "big" v3.4.5) */
.grippy-chip-option,
.grippy-pill-select,
.grippy-bookings-filter-pill {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    line-height: 1.2 !important;
}
.grippy-chip-option.is-active,
.grippy-pill-select.grippy-pill-select--on,
.grippy-bookings-filter-pill.is-active {
    font-weight: 600 !important;
}
.grippy-chip-options {
    gap: 8px !important;
}
.grippy-chip-option.is-active::before {
    margin-right: 6px !important;
    font-size: 11px !important;
}

/* 2FA code input - clean center-aligned big digits */
form#grippy-login-form input[name="grippy-2fa-code"],
form#grippy-register-form input[name="grippy-2fa-code"],
input[name="grippy-2fa-code"] {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 22px !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    background: #FAFBFC !important;
    color: #0F172A !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
}
input[name="grippy-2fa-code"]:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.18) !important;
}
[data-grippy-2fa] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-grippy-2fa] [data-grippy-2fa-submit] {
    width: 100%;
    margin-top: 4px;
}
[data-grippy-2fa] [data-grippy-2fa-cancel] {
    width: 100%;
    background: transparent;
    color: #64748B;
}

/* Idle-timeout banner on /sign-in/?timeout=1 */
.grippy-timeout-banner {
    margin: 0 auto 16px;
    max-width: 480px;
    padding: 12px 18px;
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    color: #9A3412;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
}
.grippy-timeout-banner strong { color: #9A3412; }

/* ============================================================
   v3.4.10 - Universal centering for empty states + calendar dates
   ============================================================ */

/* Empty states - center BOTH the text and any inline content/CTAs */
.grippy-empty-state,
.grippy-empty-state p,
.grippy-empty-state > * {
    text-align: center !important;
}
.grippy-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}
.grippy-empty-state p {
    margin: 0 auto !important;
    max-width: 520px !important;
}

/* Bookings filter content panes - center empty messages */
.grippy-bookings-content,
.grippy-bookings-content > .grippy-empty-state,
.grippy-bookings-content p {
    text-align: center !important;
}

/* My Files / Profile / any tab content empty state */
.grippy-files-view .grippy-empty-state,
.grippy-files-view .grippy-empty-state p {
    text-align: center !important;
    max-width: none !important;
}

/* Calendar day numbers - centered in each cell */
.grippy-bcal-cell,
.grippy-bcal-cell .grippy-bcal-daynum {
    text-align: center !important;
}
.grippy-bcal-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.grippy-bcal-cell .grippy-bcal-daynum {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 500 !important;
}
.grippy-bcal-cell .grippy-bcal-event,
.grippy-bcal-cell .grippy-bcal-more {
    width: 100% !important;
    text-align: center !important;
}

/* Weekday headers - centered too for visual alignment */
.grippy-bcal-weekday,
.grippy-bcal-weekdays > * {
    text-align: center !important;
}

/* Section headers in My Files / Profile / Bookings - keep left-aligned
   inside their wrappers but center the wrapper itself in the middle column */
.grippy-files-view,
.grippy-profile-editor {
    margin-left: auto !important;
    margin-right: auto !important;
}
.grippy-files-head,
.grippy-profile-editor-head {
    text-align: left;
}

/* Loading spinner centering */
.grippy-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    gap: 10px !important;
    color: #64748B !important;
}

/* ============================================================
   v3.4.11 - Center tab headings + vertically center calendar day numbers
   ============================================================ */

/* Center all tab page headings (My Files / My Profile / etc.) */
.grippy-files-head,
.grippy-files-head h2,
.grippy-files-head p,
.grippy-profile-editor-head,
.grippy-profile-editor-head h2,
.grippy-profile-editor-head p {
    text-align: center !important;
}
.grippy-files-head h2,
.grippy-profile-editor-head h2 {
    margin-left: auto !important;
    margin-right: auto !important;
}
.grippy-files-head p,
.grippy-profile-editor-head p {
    max-width: 640px !important;
    margin: 6px auto 0 !important;
}

/* Calendar cells - vertically center the day number */
.grippy-bcal-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 36px !important;
    padding: 4px 2px !important;
}
.grippy-bcal-cell .grippy-bcal-daynum {
    margin: 0 auto !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* If the cell has bookings, day number stays at top and events stack
   below — the existing layout keeps that. For empty cells, day number
   centers because it's the only child. */
.grippy-bcal-cell.has-booking {
    justify-content: flex-start !important;
}
.grippy-bcal-cell.has-booking .grippy-bcal-daynum {
    margin-bottom: 2px !important;
}

/* Mini calendar - tighter cells with vertically centered day numbers */
.grippy-booking-calendar--mini .grippy-bcal-cell {
    min-height: 32px !important;
    padding: 2px !important;
}
.grippy-booking-calendar--mini .grippy-bcal-daynum {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}
.grippy-booking-calendar--mini .grippy-bcal-cell.is-today .grippy-bcal-daynum {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    font-weight: 700 !important;
}

/* ============================================================
   v3.4.12 - Kill orange Meet link pill + filter pill focus rings
   ============================================================ */

/* The Meet link URL pill - was coral on coral. Now neutral. */
.grippy-meeting-url {
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E4E7EB !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.grippy-meeting-url:hover {
    background: #fff !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* Note line - quiet gray, no orange */
.grippy-meetings-note,
.grippy-meetings-note * {
    color: #94A3B8 !important;
}

/* Booking-filter pills + bookings table action buttons:
   nuke ALL focus/active outlines that browsers add in coral.
   Inactive pills should have neutral border, active gets brand fill. */
.grippy-bookings-filter-pill,
.grippy-bookings-filter-pill:focus,
.grippy-bookings-filter-pill:focus-visible,
.grippy-bookings-filter-pill:active {
    outline: none !important;
    box-shadow: none !important;
}
.grippy-bookings-filter-pill {
    border: 1px solid #E4E7EB !important;
}
.grippy-bookings-filter-pill.is-active {
    border-color: var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.grippy-bookings-filter-pill:not(.is-active) {
    background: #fff !important;
    color: #475569 !important;
}
.grippy-bookings-filter-pill:not(.is-active):hover {
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
.grippy-bookings-filter-pill:not(.is-active) span {
    background: #F1F5F9 !important;
    color: #64748B !important;
}

/* Join Meet button - clean primary, no coral ring */
.grippy-meeting-actions .grippy-btn--primary,
.grippy-meeting-actions .grippy-btn--primary:focus,
.grippy-meeting-actions .grippy-btn--primary:focus-visible {
    outline: none !important;
    border: 1px solid var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    color: #fff !important;
}
.grippy-meeting-actions .grippy-btn--ghost,
.grippy-meeting-actions .grippy-btn--ghost:focus,
.grippy-meeting-actions .grippy-btn--ghost:focus-visible {
    outline: none !important;
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
    box-shadow: none !important;
}
.grippy-meeting-actions .grippy-btn--ghost:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

/* Universal focus rule - any button/link in the dashboard cannot
   show a coral browser default outline */
.grippy-client-dashboard *:focus,
.grippy-client-dashboard *:focus-visible,
.grippy-dietician-dashboard *:focus,
.grippy-dietician-dashboard *:focus-visible {
    outline: none !important;
}
.grippy-client-dashboard button:focus-visible,
.grippy-client-dashboard a:focus-visible,
.grippy-dietician-dashboard button:focus-visible,
.grippy-dietician-dashboard a:focus-visible {
    outline: 2px solid rgba(148, 165, 163, 0.45) !important;
    outline-offset: 2px !important;
}

/* Browse Dieticians button in the header — same neutralization */
.grippy-browse-btn,
.grippy-browse-btn:focus,
.grippy-browse-btn:focus-visible {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #E4E7EB !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Status pill ("Confirmed") in the bookings table - neutral */
.grippy-status-pill,
.grippy-status-pill--confirmed,
[class*="status-pill"][class*="confirmed"] {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border: 1px solid #A7F3D0 !important;
}

/* ============================================================
   v3.4.13 - Compact Join Meeting button
   ============================================================ */

/* Constrain Join Meeting + Copy buttons to a normal CTA size */
.grippy-meeting-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
.grippy-meeting-actions .grippy-btn,
.grippy-meeting-actions a.grippy-btn,
.grippy-meeting-actions .grippy-btn--primary,
.grippy-meeting-actions .grippy-btn--ghost {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inside the bookings table, the Join Meeting button is sm + filled
   sage-green (matches the marketplace primary so client & dietitian
   dashboards have identical CTAs). Heavy-handed selectors because the
   dietitian dashboard's local shell rules were beating the previous override. */
body .grippy-table-actions a.grippy-btn--primary,
body .grippy-dashboard-table a.grippy-btn--primary,
body .grippy-dietician-dashboard a.grippy-btn--primary,
body .grippy-client-dashboard a.grippy-btn--primary,
body .grippy-table-actions .grippy-btn--primary,
body .grippy-dashboard-table .grippy-btn--primary {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    background: #94A5A3 !important;
    background-color: #94A5A3 !important;
    background-image: none !important;
    border: 1px solid #94A5A3 !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.08) !important;
    text-decoration: none !important;
}
body .grippy-table-actions a.grippy-btn--primary:hover,
body .grippy-dashboard-table a.grippy-btn--primary:hover,
body .grippy-dietician-dashboard a.grippy-btn--primary:hover,
body .grippy-client-dashboard a.grippy-btn--primary:hover,
body .grippy-table-actions .grippy-btn--primary:hover,
body .grippy-dashboard-table .grippy-btn--primary:hover {
    background: #7A8F8C !important;
    background-color: #7A8F8C !important;
    border-color: #7A8F8C !important;
    color: #fff !important;
}
body .grippy-table-actions a.grippy-btn--primary svg,
body .grippy-dashboard-table a.grippy-btn--primary svg,
body .grippy-dietician-dashboard a.grippy-btn--primary svg,
body .grippy-client-dashboard a.grippy-btn--primary svg {
    stroke: #fff !important;
}

/* ============================================================
   v3.4.14 - Messages unread badge + mobile polish (≤640px)
   ============================================================ */

/* Red unread-count badge on Messages nav item */
.grippy-nav-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #DC2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 7px;
    height: 18px;
    min-width: 18px;
    border-radius: 9px;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
}
.grippy-tab-btn.active .grippy-nav-unread {
    background: #fff;
    color: #DC2626;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
@media (max-width: 1100px) {
    .grippy-nav-unread {
        margin-left: 6px;
        height: 16px;
        min-width: 16px;
        font-size: 10px;
        padding: 0 5px;
    }
}

/* ============================================================
   MOBILE - keep desktop the same, fix everything ≤640px
   ============================================================ */
@media (max-width: 640px) {
    /* Container: kill all horizontal padding/margin from the theme */
    body .grippy-client-dashboard#grippy-client-dashboard,
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        padding: 80px 12px 32px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Header: tighter, 2-col actions */
    .grippy-client-dashboard .grippy-dash-header,
    .grippy-dietician-dashboard .grippy-dash-header {
        padding: 14px 14px 16px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }
    .grippy-client-dashboard .grippy-dash-header-title h2,
    .grippy-dietician-dashboard .grippy-dash-header-title h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }
    .grippy-client-dashboard .grippy-dash-header-title p,
    .grippy-dietician-dashboard .grippy-dash-header-title p {
        font-size: 13px !important;
        margin: 4px 0 8px !important;
    }
    .grippy-credit-badge,
    [class*=credit-badge] {
        font-size: 11px !important;
    }
    .grippy-dash-header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }
    .grippy-dash-header-actions > * {
        margin: 0 !important;
        font-size: 12px !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
    .grippy-dash-header-actions > *:first-child {
        grid-column: 1 / -1 !important; /* Book Now full-width on top row */
    }

    /* Nav becomes a horizontal scroll bar */
    .grippy-dash-left { gap: 10px !important; }
    .grippy-dash-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 10px !important;
        position: static !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .grippy-dash-nav .grippy-tab-btn {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        width: auto !important;
        border-radius: 8px !important;
    }
    .grippy-nav-ico { display: none !important; }
    .grippy-nav-label { font-size: 12px !important; }
    .grippy-nav-count {
        padding: 1px 5px !important;
        font-size: 10px !important;
        min-width: 18px !important;
    }

    /* Calendar — much more compact, takes less vertical space */
    .grippy-booking-calendar.grippy-booking-calendar--mini {
        padding: 8px !important;
        border-radius: 10px !important;
    }
    .grippy-booking-calendar--mini .grippy-bcal-cell {
        min-height: 26px !important;
        padding: 1px !important;
    }
    .grippy-booking-calendar--mini .grippy-bcal-daynum {
        font-size: 11px !important;
    }
    .grippy-booking-calendar--mini .grippy-bcal-cell.is-today .grippy-bcal-daynum {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }
    .grippy-booking-calendar--mini .grippy-bcal-weekday {
        font-size: 9px !important;
        padding: 2px 0 !important;
    }
    .grippy-booking-calendar--mini .grippy-bcal-title {
        font-size: 12px !important;
    }

    /* Main content cards — tighter */
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Booking filter pills — 3 across */
    .grippy-bookings-filter {
        gap: 6px !important;
        margin-bottom: 12px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: thin;
    }
    .grippy-bookings-filter-pill {
        flex: 1 1 0 !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        gap: 6px !important;
    }
    .grippy-bookings-filter-pill span {
        font-size: 10px !important;
        padding: 1px 6px !important;
    }

    /* Booking table → card-like rows on mobile */
    .grippy-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .grippy-dashboard-table {
        font-size: 12px !important;
    }
    .grippy-dashboard-table thead {
        display: none !important;
    }
    .grippy-dashboard-table tbody tr {
        display: block !important;
        margin-bottom: 10px !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
    }
    .grippy-dashboard-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 12px !important;
        gap: 10px !important;
    }
    .grippy-dashboard-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748B;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.06em;
        flex-shrink: 0;
    }

    /* Meeting card on mobile — vertical stack */
    .grippy-meeting-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .grippy-meeting-when, .grippy-meeting-who, .grippy-meeting-link {
        text-align: center !important;
    }
    .grippy-meeting-actions {
        justify-content: center !important;
    }
    .grippy-meeting-url {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    /* My Dietician sidebar card — make it compact, full-width, below content */
    .grippy-dash-side {
        order: 99 !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-card {
        padding: 16px !important;
        border-radius: 14px !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-photo {
        width: 64px !important;
        height: 64px !important;
        font-size: 24px !important;
        flex-shrink: 0 !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-info { flex: 1; min-width: 0; }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-label { font-size: 10px !important; }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-name { font-size: 15px !important; }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-tagline { font-size: 12px !important; line-height: 1.4 !important; }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-stats { display: none !important; }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions a,
    .grippy-dash-body--saas .grippy-dash-side .grippy-my-dietician-actions button {
        flex: 1 1 0 !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Profile tab on mobile - tighter chips */
    .grippy-profile-editor h2,
    .grippy-files-head h2 {
        font-size: 18px !important;
    }
    .grippy-chip-options { gap: 5px !important; }
    .grippy-chip-option {
        font-size: 11px !important;
        padding: 5px 10px !important;
        min-height: 28px !important;
    }
    .grippy-chip-option.is-active::before { font-size: 9px !important; margin-right: 3px !important; }

    /* Files grid — single column */
    .grippy-files-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Messages on mobile — tighter */
    .grippy-msg-shell {
        grid-template-columns: 1fr !important;
        min-height: 420px !important;
        border-radius: 12px !important;
    }
    .grippy-msg-threads { max-height: 200px !important; }
    .grippy-msg-bubble { max-width: 85% !important; font-size: 13px !important; }
    .grippy-msg-compose textarea { font-size: 14px !important; }

    /* Modals — full width with margins */
    .grippy-review-modal,
    .grippy-notes-modal,
    .grippy-reschedule-modal,
    .grippy-bcal-pop {
        margin: 12px !important;
        padding: 18px !important;
        max-width: calc(100vw - 24px) !important;
        width: auto !important;
    }

    /* Header - hide the legacy WP admin bar to give more room (only when logged in) */
    body.admin-bar .grippy-client-dashboard,
    body.admin-bar .grippy-dietician-dashboard {
        padding-top: 64px !important;
    }
}

/* Phones smaller than 380px - extra tight */
@media (max-width: 380px) {
    .grippy-client-dashboard .grippy-dash-header,
    .grippy-dietician-dashboard .grippy-dash-header {
        padding: 12px !important;
    }
    .grippy-client-dashboard .grippy-dash-header-title h2 { font-size: 16px !important; }
    .grippy-dash-nav .grippy-tab-btn { padding: 7px 10px !important; font-size: 11px !important; }
    .grippy-bookings-filter-pill { padding: 7px 8px !important; font-size: 11px !important; }
}

/* ============================================================
   v3.4.15 — Fix My Dietician card on mobile (selectors were too specific)
   ============================================================ */
@media (max-width: 640px) {
    /* Make sure the side column stacks below content and is full width */
    .grippy-dash-side {
        order: 99 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    /* The card itself - compact horizontal layout, no oversized padding */
    .grippy-my-dietician-card {
        padding: 14px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Photo: small circle on the left */
    .grippy-my-dietician-card .grippy-my-dietician-photo {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        flex: 0 0 56px !important;
        font-size: 22px !important;
        margin: 0 !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Info column: take the rest of the row */
    .grippy-my-dietician-card .grippy-my-dietician-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100% - 72px) !important;
        text-align: left !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-label {
        font-size: 10px !important;
        margin: 0 0 2px !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-name {
        font-size: 15px !important;
        line-height: 1.2 !important;
        margin: 0 0 2px !important;
        word-break: break-word !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-tagline {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Hide the inline stats row on mobile - takes too much space */
    .grippy-my-dietician-card .grippy-my-dietician-stats {
        display: none !important;
    }

    /* Action buttons: full-width row below, evenly split */
    .grippy-my-dietician-card .grippy-my-dietician-actions {
        flex: 1 0 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 4px 0 0 !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-actions a,
    .grippy-my-dietician-card .grippy-my-dietician-actions button {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Primary "Message" button takes full row on top */
    .grippy-my-dietician-card .grippy-my-dietician-msg-btn {
        flex: 1 0 100% !important;
    }

    /* Switch dietician button (whatever it's called) - keep it visible */
    .grippy-my-dietician-card .grippy-btn--ghost {
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
    }
}

/* ============================================================
   v3.4.16 — Center everything + kill ALL horizontal scrolling
   ============================================================ */
@media (max-width: 640px) {
    /* === Global no-horizontal-scroll guarantee === */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .grippy-client-dashboard,
    .grippy-dietician-dashboard,
    .grippy-client-dashboard *,
    .grippy-dietician-dashboard * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .grippy-client-dashboard img,
    .grippy-dietician-dashboard img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Long words/URLs break to wrap instead of overflow */
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Containers themselves don't scroll horizontally */
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content,
    .grippy-dash-body,
    .grippy-dash-main,
    .grippy-dash-side {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Booking table cards must wrap, never scroll */
    .grippy-table-wrap {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .grippy-dashboard-table,
    .grippy-dashboard-table tbody,
    .grippy-dashboard-table tbody tr,
    .grippy-dashboard-table tbody td {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .grippy-dashboard-table tbody td {
        flex-wrap: wrap !important;
    }

    /* Filter pills row: wrap to 2 rows instead of horizontal scroll */
    .grippy-bookings-filter {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
    }
    .grippy-bookings-filter-pill {
        flex: 1 1 calc(33.333% - 4px) !important;
        min-width: 0 !important;
    }

    /* Top tab nav: wrap instead of scroll */
    .grippy-dash-nav {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        justify-content: center !important;
    }
    .grippy-dash-nav .grippy-tab-btn {
        flex: 0 1 auto !important;
    }

    /* === CENTER ALL TEXT in tab content areas === */
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content,
    .grippy-client-dashboard .grippy-tab-content > *,
    .grippy-dietician-dashboard .grippy-tab-content > *,
    .grippy-tab-content h1, .grippy-tab-content h2, .grippy-tab-content h3,
    .grippy-tab-content p, .grippy-tab-content .grippy-empty,
    .grippy-tab-content .grippy-empty-state,
    .grippy-tab-content .grippy-section-title,
    .grippy-tab-content .grippy-section-subtitle {
        text-align: center !important;
    }
    /* Header is centered */
    .grippy-dash-header,
    .grippy-dash-header-title {
        text-align: center !important;
    }
    .grippy-dash-header-title h2,
    .grippy-dash-header-title p {
        text-align: center !important;
    }
    .grippy-dash-header-actions {
        justify-content: center !important;
    }

    /* === DIETICIAN CARD: center everything === */
    .grippy-my-dietician-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-photo {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        flex: 0 0 64px !important;
        margin: 0 auto 8px !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-info {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-label,
    .grippy-my-dietician-card .grippy-my-dietician-name,
    .grippy-my-dietician-card .grippy-my-dietician-tagline {
        text-align: center !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }
    .grippy-my-dietician-card .grippy-my-dietician-actions a,
    .grippy-my-dietician-card .grippy-my-dietician-actions button {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Meeting card centered */
    .grippy-meeting-card,
    .grippy-meeting-card * {
        text-align: center !important;
    }
    .grippy-meeting-actions {
        justify-content: center !important;
    }
    .grippy-meeting-url {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }

    /* Files grid centered */
    .grippy-files-grid {
        justify-items: center !important;
        text-align: center !important;
    }

    /* Profile editor centered chips */
    .grippy-chip-options {
        justify-content: center !important;
    }
    .grippy-profile-editor,
    .grippy-profile-editor * {
        text-align: center !important;
    }
    .grippy-profile-editor input,
    .grippy-profile-editor textarea,
    .grippy-profile-editor select {
        text-align: left !important;
    }

    /* Messages centered shell */
    .grippy-msg-empty,
    .grippy-msg-meta,
    .grippy-msg-thread-empty {
        text-align: center !important;
    }
}

/* ============================================================
   v3.4.17 — Center dashboard header + fix Upcoming table + kill outer scroll
   ============================================================ */
/* Document-level scroll lock — body only (do NOT touch Elementor wrappers,
   that hides the site header burger menu dropdown which positions absolute) */
@media (max-width: 640px) {
    html { overflow-x: hidden !important; max-width: 100vw !important; }
    body { overflow-x: hidden !important; max-width: 100vw !important; }

    /* === DASHBOARD HEADER CARD: full-column centered === */
    .grippy-client-dashboard .grippy-dash-header,
    .grippy-dietician-dashboard .grippy-dash-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 18px 14px !important;
    }
    .grippy-dash-header-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .grippy-dash-header-title h2,
    .grippy-dash-header-title p,
    .grippy-credit-pill,
    .grippy-credit-badge {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }
    .grippy-credit-pill {
        display: inline-flex !important;
        margin: 4px auto 0 !important;
    }
    .grippy-dash-header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-content: center !important;
        justify-items: stretch !important;
        align-items: center !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 8px auto 0 !important;
    }
    .grippy-dash-header-actions > *:first-child {
        grid-column: 1 / -1 !important;
    }
    .grippy-dash-header-actions > * {
        text-align: center !important;
        justify-content: center !important;
    }

    /* === BOOKINGS TABLE on mobile: fix Upcoming/Completed cells === */
    /* Override v3.4.14 card layout so flex doesn't fight my centering rules */
    .grippy-dashboard-table {
        display: block !important;
        width: 100% !important;
    }
    .grippy-dashboard-table thead { display: none !important; }
    .grippy-dashboard-table tbody { display: block !important; width: 100% !important; }
    .grippy-dashboard-table tbody tr {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    .grippy-dashboard-table tbody td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        border: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
    }
    .grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 600 !important;
        color: #64748B !important;
        text-transform: uppercase !important;
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 2px !important;
        text-align: center !important;
    }
    /* Action buttons row — center them */
    .grippy-dashboard-table tbody td .grippy-table-actions,
    .grippy-table-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .grippy-dashboard-table tbody td .grippy-btn,
    .grippy-table-actions .grippy-btn {
        flex: 0 1 auto !important;
        margin: 0 !important;
    }
    .grippy-empty-state {
        text-align: center !important;
        padding: 24px 12px !important;
    }
    .grippy-empty-state p {
        text-align: center !important;
        margin: 0 0 12px !important;
    }
    .grippy-empty-cta {
        display: inline-flex !important;
        margin: 0 auto !important;
    }
}

/* ============================================================
   v3.4.18 — Mobile reorder: My Dietician → Nav → Content → Calendar
              + scroll-hint arrow on nav + Upcoming render fix
   ============================================================ */
@media (max-width: 640px) {
    /* Promote .grippy-dash-left children to siblings of .grippy-dash-body so we can reorder */
    .grippy-client-dashboard .grippy-dash-body,
    .grippy-dietician-dashboard .grippy-dash-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .grippy-dash-left { display: contents !important; }

    /* Reorder: My Dietician card → nav → tab content → calendar */
    .grippy-dash-side                  { order: 1 !important; margin-top: 0 !important; }
    .grippy-dash-nav                   { order: 2 !important; }
    .grippy-dash-main                  { order: 3 !important; }
    .grippy-booking-calendar,
    .grippy-booking-calendar--mini     { order: 4 !important; margin-top: 4px !important; }

    /* Nav: horizontal scroll with sticky-right arrow hint */
    .grippy-dash-nav {
        position: relative !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 28px !important;  /* leave room for arrow */
        background: #F8FAFC !important;
        border-radius: 10px !important;
        justify-content: flex-start !important;
    }
    .grippy-dash-nav .grippy-tab-btn {
        scroll-snap-align: start !important;
        flex: 0 0 auto !important;
    }
    /* (Arrow indicator removed in v3.4.19 per user request) */
    .grippy-dash-nav::after { content: none !important; display: none !important; }
    .grippy-dash-nav { padding-right: 4px !important; }

    /* === UPCOMING / COMPLETED bookings: rebuild card layout cleanly === */
    /* Reset the flex/text-align inheritance and explicitly style each row */
    .grippy-bookings-content {
        text-align: left !important;
    }
    .grippy-bookings-content .grippy-table-wrap {
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table {
        display: block !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table thead {
        display: none !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody {
        display: block !important;
        width: 100% !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 12px !important;
        padding: 14px 12px !important;
        margin: 0 0 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
        text-align: center !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        border: 0 !important;
        text-align: center !important;
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin-bottom: 3px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td:last-child {
        padding-top: 10px !important;
        border-top: 1px solid #F1F5F9 !important;
        margin-top: 6px !important;
    }
    .grippy-bookings-content .grippy-table-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .grippy-bookings-content .grippy-table-actions .grippy-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    /* Status pill stays inline-block */
    .grippy-bookings-content .grippy-status-pill {
        display: inline-block !important;
        margin: 2px auto !important;
    }
}

/* ============================================================
   v3.4.19 — Restore site header/burger + remove nav arrow + polish Upcoming
   ============================================================ */

/* SAFETY: undo any aggressive global overflow lock that hid Elementor menus.
   These rules apply at ALL widths so the site nav always works. */
.elementor,
.elementor-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
header.site-header,
.elementor-location-header,
.ehf-template-hello-elementor,
nav.elementor-nav-menu,
.elementor-menu-toggle,
.hfe-nav-menu__layout-horizontal,
.hfe-mobile-menu-wrapper,
[class*="elementor-widget-nav-menu"],
[class*="hfe-nav-menu"] {
    overflow: visible !important;
    overflow-x: visible !important;
    max-width: none !important;
}

/* Make sure the site header itself is allowed to render its dropdowns */
header, .site-header, [class*="site-header"], .elementor-location-header,
.hfe-has-submenu-container {
    overflow: visible !important;
}

@media (max-width: 640px) {
    /* === PROFESSIONAL UPCOMING / COMPLETED CARDS — fully centered === */
    /* Wipe legacy alignment + rebuild with a clean grid */
    .grippy-bookings-content,
    .grippy-bookings-content * {
        text-align: center !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 18px 14px !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
        margin-bottom: 12px !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        text-align: center !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin: 0 0 4px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #94A5A3 !important;
        text-align: center !important;
    }
    /* Value text: keep it centered and readable */
    .grippy-bookings-content table.grippy-dashboard-table tbody td > * {
        text-align: center !important;
        margin: 0 auto !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td strong {
        display: block !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #0F172A !important;
        margin: 0 auto !important;
    }
    /* Date row gets emphasized */
    .grippy-bookings-content table.grippy-dashboard-table tbody td:first-child::before {
        color: #94A5A3 !important;
    }
    /* Last cell (actions) — divider + centered button row */
    .grippy-bookings-content table.grippy-dashboard-table tbody td:last-child {
        margin-top: 4px !important;
        padding-top: 10px !important;
        border-top: 1px solid #F1F5F9 !important;
    }
    .grippy-bookings-content .grippy-table-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .grippy-bookings-content .grippy-table-actions .grippy-btn,
    .grippy-bookings-content .grippy-table-actions a,
    .grippy-bookings-content .grippy-table-actions button {
        flex: 0 1 auto !important;
        min-width: 110px !important;
        max-width: 100% !important;
        padding: 9px 16px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }
    /* Status pill centered */
    .grippy-bookings-content .grippy-status-pill,
    .grippy-bookings-content [class*="status-pill"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
    }

    /* Filter pills row above the cards — clean centered */
    .grippy-bookings-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin: 0 0 14px !important;
        padding: 4px !important;
        background: #F8FAFC !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .grippy-bookings-filter-pill {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 9px 6px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        display: inline-flex !important;
        gap: 4px !important;
        border-radius: 7px !important;
        white-space: nowrap !important;
    }
    .grippy-bookings-filter-pill span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 18px !important;
        padding: 1px 5px !important;
        font-size: 10px !important;
        border-radius: 9px !important;
    }
}

/* ============================================================
   v3.4.20 — Force-center the Upcoming bookings cards on mobile
   (the table + tab-content wrapper were left-anchored)
   ============================================================ */
@media (max-width: 640px) {
    /* Reset tab-content padding so cards span full width and center */
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        padding: 12px 10px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    /* Bookings content pane fills width, centers children */
    .grippy-bookings-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }
    .grippy-bookings-content > * {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Table wrapper + table fill the pane */
    .grippy-bookings-content .grippy-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    /* Each booking card fills the full pane width and is centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   v3.4.21 — Lock booking card to viewport + stack avatar/name + clean bg
   ============================================================ */
@media (max-width: 640px) {
    /* Hard lock the table itself to never exceed its container */
    .grippy-bookings-content table.grippy-dashboard-table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    /* Every cell strictly bound to card width */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr,
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    /* The whole card gets a single white background, no row striping */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        background: #fff !important;
        background-color: #fff !important;
    }

    /* Force any flex inside a cell (like avatar+name) to stack vertically and center */
    .grippy-bookings-content table.grippy-dashboard-table tbody td > * {
        max-width: 100% !important;
        text-align: center !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td .grippy-dietician-cell,
    .grippy-bookings-content table.grippy-dashboard-table tbody td [class*="dietician-info"],
    .grippy-bookings-content table.grippy-dashboard-table tbody td [class*="avatar"],
    .grippy-bookings-content table.grippy-dashboard-table tbody td span,
    .grippy-bookings-content table.grippy-dashboard-table tbody td a {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    /* Avatar image: small centered circle on its own line */
    .grippy-bookings-content table.grippy-dashboard-table tbody td img {
        display: block !important;
        margin: 0 auto 4px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        flex: 0 0 auto !important;
    }
    /* Name text below avatar */
    .grippy-bookings-content table.grippy-dashboard-table tbody td strong,
    .grippy-bookings-content table.grippy-dashboard-table tbody td b {
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        word-break: break-word !important;
        font-size: 14px !important;
    }

    /* Outer card padding tighter so values can breathe */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        padding: 16px 12px !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        padding: 8px 0 !important;
    }
}

/* ============================================================
   v3.4.22 — Ensure the entire Upcoming section is horizontally
              centered within its container chain on mobile.
   ============================================================ */
@media (max-width: 640px) {
    /* Step 1: dashboard wrapper itself centered with symmetric padding */
    .grippy-client-dashboard,
    .grippy-dietician-dashboard {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Step 2: dash-body and main are full-width centered */
    .grippy-dash-body,
    .grippy-dash-main {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    /* Step 3: tab-content is full-width centered with symmetric padding */
    #grippy-tab-bookings,
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 14px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Step 4: bookings pane (Upcoming/Meetings/Completed) — centered grid */
    .grippy-bookings-content {
        display: grid !important;
        place-items: center !important;
        grid-template-columns: 1fr !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .grippy-bookings-content > * {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Step 5: table wrap and table — centered, full pane width */
    .grippy-bookings-content .grippy-table-wrap,
    .grippy-bookings-content table.grippy-dashboard-table,
    .grippy-bookings-content table.grippy-dashboard-table tbody {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Step 6: each card (<tr>) — centered with symmetric padding */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 12px !important;
        padding: 16px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Step 7: each cell (<td>) — full width, content centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 8px 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Step 8: cell content (text, strong, span, img) all centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody td > *,
    .grippy-bookings-content table.grippy-dashboard-table tbody td > * > * {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   v3.4.23 — Hotfix: undo the display:block override that forced
              all tabs visible and made Bookings appear stuck loading
   ============================================================ */
@media (max-width: 640px) {
    /* The JS toggles tab visibility via inline style="display:block/none".
       Do NOT force display from CSS — let the JS-driven inline style win. */
    .grippy-client-dashboard .grippy-tab-content,
    .grippy-dietician-dashboard .grippy-tab-content {
        display: revert !important;
    }
    /* Active tab (the one JS set to display:block) stays a normal block */
    .grippy-client-dashboard .grippy-tab-content[style*="display: block"],
    .grippy-dietician-dashboard .grippy-tab-content[style*="display: block"],
    .grippy-client-dashboard .grippy-tab-content[style*="display:block"],
    .grippy-dietician-dashboard .grippy-tab-content[style*="display:block"] {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 14px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   v3.4.24 — Real fix: hide inactive tabs by their inline display:none
              (overrides the v3.4.22 display:block !important blunder)
   ============================================================ */
@media (max-width: 640px) {
    /* Anything the JS marked as display:none stays hidden, period. */
    .grippy-client-dashboard .grippy-tab-content[style*="display: none"],
    .grippy-client-dashboard .grippy-tab-content[style*="display:none"],
    .grippy-dietician-dashboard .grippy-tab-content[style*="display: none"],
    .grippy-dietician-dashboard .grippy-tab-content[style*="display:none"] {
        display: none !important;
    }
}
/* Same rule outside the media query so desktop is also unbroken. */
.grippy-client-dashboard .grippy-tab-content[style*="display: none"],
.grippy-client-dashboard .grippy-tab-content[style*="display:none"],
.grippy-dietician-dashboard .grippy-tab-content[style*="display: none"],
.grippy-dietician-dashboard .grippy-tab-content[style*="display:none"] {
    display: none !important;
}

/* ============================================================
   v3.4.25 — REVERT broken layout overrides (v3.4.22 grid + flex
   blockers) and apply ONLY a minimal centering fix to the
   Upcoming/Completed booking table cells on mobile.
   ============================================================ */

/* Always respect [hidden] on filter panes — fixes meetings/completed
   not switching when clicked (v3.4.22 made them all visible). */
.grippy-bookings-content[hidden] { display: none !important; }

@media (max-width: 640px) {
    /* Reset bookings-content to plain centered block (undo v3.4.22 grid) */
    .grippy-bookings-content:not([hidden]) {
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reset table back to plain block, full width, centered */
    .grippy-bookings-content table.grippy-dashboard-table,
    .grippy-bookings-content table.grippy-dashboard-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        table-layout: auto !important;
    }

    /* Each booking card: centered card, contents centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 12px !important;
        padding: 14px 12px !important;
        text-align: center !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* Each cell: simple centered block, not flex */
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Label above value, centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin: 0 auto 3px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }

    /* All inline content (text, strong, span, img, buttons) centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody td * {
        text-align: center !important;
    }
}

/* ============================================================
   v3.4.26 — Constrain Upcoming card to viewport + truly center
              every cell's content (no right shift)
   ============================================================ */
@media (max-width: 640px) {
    /* The bookings card cannot exceed the phone viewport */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 14px 0 !important;  /* zero side padding so cells span full card width */
        box-sizing: border-box !important;
    }
    /* Each cell takes the FULL card width with NO side padding,
       so its centered text actually lands in the visual middle */
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;  /* symmetric inner padding */
        margin: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    /* The before label is a centered block */
    .grippy-bookings-content table.grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 4px !important;
        text-align: center !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }
    /* Make sure the value content is text-centered within the cell.
       Also stop any inline avatar+name from forcing the cell wider. */
    .grippy-bookings-content table.grippy-dashboard-table tbody td > * {
        display: inline-block !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        vertical-align: middle !important;
    }
    /* Avatar image: stack above name on its own centered line */
    .grippy-bookings-content table.grippy-dashboard-table tbody td img {
        display: block !important;
        margin: 0 auto 6px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    /* Just in case any cell still resists */
    .grippy-bookings-content table.grippy-dashboard-table tbody td,
    .grippy-bookings-content table.grippy-dashboard-table tbody td * {
        text-align: center !important;
    }
}

/* ============================================================
   v3.4.27 — Hard-center the Upcoming card with absolute-positioned
              transform trick (defeats any parent grid/flex offset)
   ============================================================ */
@media (max-width: 640px) {
    /* Step 1: every parent in the chain becomes a plain block container */
    .grippy-client-dashboard .grippy-dash-main,
    .grippy-dietician-dashboard .grippy-dash-main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-template-areas: none !important;
    }
    .grippy-client-dashboard .grippy-tab-content[id="grippy-tab-bookings"],
    .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-bookings"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Step 2: bookings pane is plain centered block */
    .grippy-bookings-content:not([hidden]) {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Step 3: table-wrap is full-width with NO offset */
    .grippy-bookings-content .grippy-table-wrap {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Step 4: table is plain block, full container width */
    .grippy-bookings-content table.grippy-dashboard-table {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        box-sizing: border-box !important;
    }
    .grippy-bookings-content table.grippy-dashboard-table tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Step 5: each booking card is a plain centered block at full width */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 16px 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        background: #fff !important;
        border: 1px solid #E4E7EB !important;
        border-radius: 12px !important;
    }

    /* Step 6: each cell is plain block, content centered */
    .grippy-bookings-content table.grippy-dashboard-table tbody td {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        text-align: center !important;
        background: transparent !important;
        border: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   v3.4.28 — Standardize action buttons across Upcoming/Completed
              cards on mobile (Join Meeting, View Notes, Leave Review)
   ============================================================ */
@media (max-width: 640px) {
    /* Action row in any booking card: centered, evenly spaced */
    .grippy-bookings-content .grippy-table-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px auto 0 !important;
        padding: 0 !important;
    }

    /* Every action button — uniform size, look identical to Join Meeting */
    .grippy-bookings-content .grippy-table-actions .grippy-btn,
    .grippy-bookings-content .grippy-table-actions a.grippy-btn,
    .grippy-bookings-content .grippy-table-actions button.grippy-btn,
    .grippy-bookings-content .grippy-table-actions a,
    .grippy-bookings-content .grippy-table-actions button {
        flex: 0 1 auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 9px 18px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Notes/Review/Reschedule "ghost" buttons (light) match the look */
    .grippy-bookings-content .grippy-table-actions .grippy-btn--ghost,
    .grippy-bookings-content .grippy-table-actions .grippy-btn--secondary,
    .grippy-bookings-content .grippy-table-actions [class*="btn--ghost"],
    .grippy-bookings-content .grippy-table-actions [class*="btn--secondary"] {
        background: #fff !important;
        color: #475569 !important;
        border: 1px solid #E4E7EB !important;
    }

    /* Status pill in completed (Completed/Cancelled) sits centered, not stretched */
    .grippy-bookings-content .grippy-status-pill,
    .grippy-bookings-content [class*="status-pill"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 2px auto !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 999px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   v3.4.29 — Standardize ALL booking action buttons (desktop + mobile)
              so Join Meeting / Leave review / Session notes / Reschedule
              all share identical dimensions and pro look.
   ============================================================ */

/* All sizes — applies at every viewport width */
.grippy-bookings-content .grippy-table-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.grippy-bookings-content .grippy-table-actions .grippy-btn,
.grippy-bookings-content .grippy-table-actions a.grippy-btn,
.grippy-bookings-content .grippy-table-actions button.grippy-btn,
.grippy-bookings-content .grippy-table-actions a,
.grippy-bookings-content .grippy-table-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 220px !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

/* Primary (Join Meeting) — solid sage fill */
.grippy-bookings-content .grippy-table-actions .grippy-btn--primary {
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-bookings-content .grippy-table-actions .grippy-btn--primary:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}

/* Ghost / secondary (Leave review, Session notes, Reschedule) — outlined */
.grippy-bookings-content .grippy-table-actions .grippy-btn--ghost,
.grippy-bookings-content .grippy-table-actions .grippy-btn--secondary,
.grippy-bookings-content .grippy-table-actions [class*="btn--ghost"],
.grippy-bookings-content .grippy-table-actions [class*="btn--secondary"] {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-bookings-content .grippy-table-actions .grippy-btn--ghost:hover,
.grippy-bookings-content .grippy-table-actions [class*="btn--ghost"]:hover {
    background: #F8FAFC !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* Cancel button (destructive) */
.grippy-bookings-content .grippy-table-actions .grippy-btn--danger,
.grippy-bookings-content .grippy-table-actions .grippy-cancel-btn,
.grippy-bookings-content .grippy-table-actions [class*="cancel"] {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
}
.grippy-bookings-content .grippy-table-actions .grippy-btn--danger:hover,
.grippy-bookings-content .grippy-table-actions .grippy-cancel-btn:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}

/* Mobile: center the action row instead of left-align */
@media (max-width: 640px) {
    .grippy-bookings-content .grippy-table-actions {
        justify-content: center !important;
    }
    .grippy-bookings-content .grippy-table-actions .grippy-btn,
    .grippy-bookings-content .grippy-table-actions a,
    .grippy-bookings-content .grippy-table-actions button {
        min-width: 120px !important;
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* ============================================================
   v3.4.30 — Polish: bottom divider, fix active filter pill color,
              small yellow stars in review modal, hide Join Meeting
              on completed bookings (JS handles the conditional now)
   ============================================================ */

/* (1) Active Completed/Upcoming/Meetings pill stays sage-green when clicked */
.grippy-bookings-filter-pill.is-active,
.grippy-bookings-filter-pill.is-active:hover,
.grippy-bookings-filter-pill.is-active:focus,
.grippy-bookings-filter-pill.is-active:focus-visible,
.grippy-bookings-filter-pill.is-active:active {
    background: #94A5A3 !important;
    background-color: #94A5A3 !important;
    border-color: #94A5A3 !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
.grippy-bookings-filter-pill.is-active span {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

/* (2) Bottom divider line on every booking card */
.grippy-bookings-content table.grippy-dashboard-table tbody tr {
    border-bottom: 2px solid #94A5A3 !important;
}
@media (min-width: 641px) {
    /* Desktop: keep the existing white card with subtle bottom accent line */
    .grippy-bookings-content table.grippy-dashboard-table tbody tr td:last-child {
        border-bottom: 1px solid #E4E7EB !important;
        padding-bottom: 12px !important;
    }
}

/* (3) Review modal stars — small yellow gold stars, neat layout */
.grippy-review-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}
.grippy-review-modal {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 420px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2) !important;
    box-sizing: border-box !important;
}
.grippy-review-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}
.grippy-review-modal-header h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}
.grippy-review-modal-close {
    background: transparent !important;
    border: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #64748B !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
}
.grippy-rating-picker {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 8px 0 16px !important;
}
.grippy-star-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #E4E7EB !important;  /* unselected = light grey */
    transition: color 0.15s ease, transform 0.1s ease !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
}
.grippy-star-btn:hover {
    transform: scale(1.1) !important;
    color: #FBBF24 !important;  /* gold/yellow on hover */
}
.grippy-star-btn.is-active {
    color: #FBBF24 !important;  /* gold/yellow when selected */
}
.grippy-review-comment {
    width: 100% !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: #0F172A !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
.grippy-review-comment:focus {
    outline: none !important;
    border-color: #94A5A3 !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,0.15) !important;
}
.grippy-review-modal-actions {
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
}
.grippy-review-modal-actions .grippy-btn--primary {
    min-width: 140px !important;
    min-height: 38px !important;
    padding: 9px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-review-modal-status {
    margin-top: 10px !important;
    font-size: 12px !important;
    text-align: center !important;
    min-height: 16px !important;
}
.grippy-review-modal-status--err { color: #DC2626 !important; }
.grippy-review-modal-status--ok  { color: #16A34A !important; }

/* ============================================================
   v3.4.31 — Closing line at bottom of bookings table + new
              "preference shortcut" booking step (returning client)
   ============================================================ */

/* Closing horizontal line at the bottom of the entire table */
.grippy-bookings-content .grippy-table-wrap {
    padding-bottom: 0 !important;
}
.grippy-bookings-content .grippy-table-wrap::after {
    content: '' !important;
    display: block !important;
    height: 1px !important;
    background: #E4E7EB !important;
    margin: 4px 0 0 !important;
    width: 100% !important;
}

/* ============================================================
   Booking flow — Preference shortcut card pair
   ============================================================ */
.grippy-pref-shortcut {
    max-width: 720px;
    margin: 32px auto;
    padding: 40px 28px;
    text-align: center;
}
.grippy-pref-title {
    font-size: 28px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.grippy-pref-sub {
    font-size: 15px;
    color: #64748B;
    margin: 0 auto 32px;
    max-width: 520px;
    line-height: 1.55;
}
.grippy-pref-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.grippy-pref-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
    border: 2px solid #E4E7EB;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    font-family: inherit;
}
.grippy-pref-card:hover {
    border-color: #94A5A3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.grippy-pref-card--primary {
    background: linear-gradient(135deg, #F8FAFC 0%, #fff 100%);
    border-color: #94A5A3;
}
.grippy-pref-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 14px;
}
.grippy-pref-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 14px;
}
.grippy-pref-name {
    font-size: 18px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 4px;
}
.grippy-pref-tag {
    font-size: 13px;
    color: #64748B;
    margin-bottom: 16px;
}
.grippy-pref-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #94A5A3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}
.grippy-pref-card--ghost .grippy-pref-cta {
    background: #fff;
    color: #475569;
    border: 1px solid #E4E7EB;
}
.grippy-pref-card--ghost:hover .grippy-pref-cta {
    background: #94A5A3;
    color: #fff;
    border-color: #94A5A3;
}
@media (max-width: 640px) {
    .grippy-pref-options { grid-template-columns: 1fr; gap: 12px; }
    .grippy-pref-shortcut { padding: 24px 16px; }
    .grippy-pref-title { font-size: 22px; }
    .grippy-pref-sub { font-size: 14px; margin-bottom: 20px; }
    .grippy-pref-card { padding: 22px 18px; }
    .grippy-pref-avatar, .grippy-pref-icon { width: 60px; height: 60px; font-size: 24px; }
}

/* ============================================================
   v3.4.32 — Dietitian dashboard: header greeting card + stat
              cards + tab content empty states
   ============================================================ */

/* Dietitian header card with avatar greeting */
.grippy-dietician-dashboard .grippy-dash-header {
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%);
    border: 1px solid #E4E7EB;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.grippy-dietician-dashboard .grippy-dash-header-greeting {
    display: flex;
    align-items: center;
    gap: 16px;
}
.grippy-dietician-dashboard .grippy-dash-header-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 56px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.grippy-dietician-dashboard .grippy-dash-header-avatar--initials {
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.grippy-dietician-dashboard .grippy-dash-header-title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
}
.grippy-dietician-dashboard .grippy-dash-header-title p {
    margin: 2px 0 0;
    font-size: 14px;
    color: #64748B;
}
.grippy-dietician-dashboard .grippy-dash-header-actions {
    display: flex;
    gap: 8px;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn {
    min-height: 38px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}

/* Stat cards row */
.grippy-dietician-dashboard .grippy-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.grippy-dietician-dashboard .grippy-stat-card {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.grippy-dietician-dashboard .grippy-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    border-color: #94A5A3;
}
.grippy-dietician-dashboard .grippy-stat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
}
.grippy-dietician-dashboard .grippy-stat-card--primary .grippy-stat-card-icon {
    background: rgba(148,165,163,0.12);
    color: #94A5A3;
}
.grippy-dietician-dashboard .grippy-stat-card--info .grippy-stat-card-icon {
    background: rgba(59,130,246,0.12);
    color: #3B82F6;
}
.grippy-dietician-dashboard .grippy-stat-card--accent .grippy-stat-card-icon {
    background: rgba(168,85,247,0.12);
    color: #A855F7;
}
.grippy-dietician-dashboard .grippy-stat-card--success .grippy-stat-card-icon {
    background: rgba(22,163,74,0.12);
    color: #16A34A;
}
.grippy-dietician-dashboard .grippy-stat-card-body {
    min-width: 0;
    flex: 1;
}
.grippy-dietician-dashboard .grippy-stat-card-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.grippy-dietician-dashboard .grippy-stat-card-value {
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1;
}

/* Make tab content visible by default (override any old hide-on-click rule) */
.grippy-dietician-dashboard .grippy-tab-content {
    min-height: 80px;
}

/* Empty state for tabs */
.grippy-dietician-dashboard .grippy-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #64748B;
    background: #F8FAFC;
    border: 1px dashed #E4E7EB;
    border-radius: 12px;
}

/* Mobile dietitian header */
@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-dash-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 18px 14px;
    }
    .grippy-dietician-dashboard .grippy-dash-header-greeting {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .grippy-dietician-dashboard .grippy-dash-header-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .grippy-dietician-dashboard .grippy-stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 380px) {
    .grippy-dietician-dashboard .grippy-stat-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   v3.4.33 — Dietitian dashboard: SaaS 3-column layout matching
              client dashboard + fancy chart + nav polish + calendar
   ============================================================ */

/* === 3-column SaaS body for dietitian (matches client) === */
.grippy-dietician-dashboard .grippy-dash-body--saas {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

/* Left column: vertical nav + calendar */
.grippy-dietician-dashboard .grippy-dash-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 20px;
}

/* Vertical nav (override the horizontal --top default for dietitian dashboard) */
.grippy-dietician-dashboard .grippy-dash-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    overflow: visible !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn.active {
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(148, 165, 163, 0.3) !important;
}
.grippy-dietician-dashboard .grippy-nav-ico {
    font-size: 18px !important;
    flex: 0 0 auto !important;
}
.grippy-dietician-dashboard .grippy-nav-label {
    flex: 1 !important;
    font-size: 14px !important;
}
.grippy-dietician-dashboard .grippy-nav-count {
    background: #F1F5F9 !important;
    color: #64748B !important;
    padding: 1px 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    min-width: 22px !important;
    text-align: center !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn.active .grippy-nav-count {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}

/* Right column: fancy appointments chart card */
.grippy-dietician-dashboard .grippy-dash-side {
    position: sticky;
    top: 20px;
}
.grippy-diet-chart-card {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.grippy-diet-chart-card .grippy-chart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
}
.grippy-diet-chart-card .grippy-chart-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #94A5A3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.grippy-diet-chart-card .grippy-chart-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.grippy-diet-chart-card .grippy-chart-total {
    text-align: right;
    flex-shrink: 0;
}
.grippy-diet-chart-card .grippy-chart-total-num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #94A5A3;
    line-height: 1;
    letter-spacing: -0.02em;
}
.grippy-diet-chart-card .grippy-chart-total-label {
    display: block;
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}
.grippy-diet-chart-card .grippy-chart-canvas-wrap {
    position: relative;
    height: 220px;
    margin: 0;
}
.grippy-diet-chart-card .grippy-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}
.grippy-diet-chart-card .grippy-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}
.grippy-diet-chart-card .grippy-chart-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

/* Calendar pip — small dot indicator on days with bookings */
.grippy-dietician-dashboard .grippy-bcal-pip {
    display: inline-block;
    background: #94A5A3;
    color: #fff;
    border-radius: 9px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
    margin-top: 1px;
    line-height: 1.4;
}
.grippy-dietician-dashboard .grippy-bcal-cell.has-booking .grippy-bcal-daynum {
    color: #94A5A3;
    font-weight: 700;
}
.grippy-dietician-dashboard .grippy-bcal-cell.is-today {
    background: linear-gradient(135deg, rgba(148,165,163,0.12) 0%, rgba(148,165,163,0.06) 100%);
    border-radius: 8px;
}

/* Tab content min-height so user sees something on click */
.grippy-dietician-dashboard .grippy-tab-content {
    min-height: 200px;
}

/* Mobile dietitian dashboard — stack like client */
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr;
    }
    .grippy-dietician-dashboard .grippy-dash-left,
    .grippy-dietician-dashboard .grippy-dash-side {
        position: static;
    }
    .grippy-dietician-dashboard .grippy-dash-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
}
@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-dash-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    .grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .grippy-dietician-dashboard .grippy-nav-ico { display: none !important; }
    .grippy-dietician-dashboard .grippy-stat-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   v3.4.34 — Dietitian dashboard polish: wider main, fancy chart,
              redesigned availability, uniform buttons, un-sticky save
   ============================================================ */

.grippy-dietician-dashboard .grippy-dash-body--saas {
    grid-template-columns: 220px minmax(0, 1fr) 290px !important;
    gap: 16px !important;
}
@media (max-width: 1280px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 200px minmax(0, 1fr) 270px !important;
    }
}
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
    }
}

.grippy-diet-chart-card {
    background: linear-gradient(165deg, #ffffff 0%, #F8FAFC 100%) !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
}
.grippy-diet-chart-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(148,165,163,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.grippy-diet-chart-card .grippy-chart-eyebrow {
    color: #94A5A3 !important;
    font-size: 10px !important;
}
.grippy-diet-chart-card .grippy-chart-total-num {
    background: linear-gradient(135deg, #94A5A3 0%, #64748B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grippy-profile-editor .grippy-form-actions,
.grippy-dietician-dashboard .grippy-form-actions,
.grippy-profile-editor [class*="form-footer"],
.grippy-profile-editor [class*="save-bar"] {
    position: static !important;
    bottom: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
}

.grippy-dietician-dashboard .grippy-btn {
    min-height: 38px !important;
    min-width: 0 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}
.grippy-dietician-dashboard .grippy-btn--sm {
    min-height: 32px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
}
.grippy-dietician-dashboard .grippy-btn--primary {
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-dietician-dashboard .grippy-btn--primary:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}
.grippy-dietician-dashboard .grippy-btn--ghost,
.grippy-dietician-dashboard .grippy-btn--secondary {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-dietician-dashboard .grippy-btn--ghost:hover,
.grippy-dietician-dashboard .grippy-btn--secondary:hover {
    background: #F8FAFC !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* REDESIGNED Availability tab */
.grippy-availability-wrap {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.grippy-availability-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}
.grippy-availability-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
}
.grippy-availability-sub {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
    max-width: 520px;
}
.grippy-availability-quick {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.grippy-availability-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.grippy-availability-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: #F8FAFC;
    border: 1px solid #E4E7EB;
    border-radius: 12px;
    transition: all 0.15s ease;
}
.grippy-availability-card.is-on {
    background: linear-gradient(135deg, rgba(148,165,163,0.08) 0%, #fff 100%);
    border-color: #94A5A3;
}
.grippy-availability-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.grippy-availability-toggle .grippy-day-enabled {
    width: 18px;
    height: 18px;
    accent-color: #94A5A3;
    cursor: pointer;
}
.grippy-availability-day-name {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}
.grippy-availability-day-short { display: none; }
.grippy-availability-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    transition: opacity 0.15s ease;
}
.grippy-availability-fields .grippy-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.grippy-availability-fields .grippy-field-group label {
    font-size: 10px;
    font-weight: 600;
    color: #94A5A3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.grippy-availability-fields input[type="time"],
.grippy-availability-fields select {
    padding: 8px 10px;
    border: 1px solid #E4E7EB;
    border-radius: 8px;
    font-size: 13px;
    color: #0F172A;
    background: #fff;
    transition: all 0.15s ease;
}
.grippy-availability-fields input[type="time"]:focus,
.grippy-availability-fields select:focus {
    outline: none;
    border-color: #94A5A3;
    box-shadow: 0 0 0 3px rgba(148,165,163,0.15);
}
.grippy-availability-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 14px;
}
.grippy-availability-status {
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 700px) {
    .grippy-availability-head { flex-direction: column; }
    .grippy-availability-card { grid-template-columns: 1fr; gap: 12px; }
    .grippy-availability-fields { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
}
@media (max-width: 480px) {
    .grippy-availability-fields { grid-template-columns: 1fr 1fr; }
    .grippy-availability-fields .grippy-field-group:last-child { grid-column: 1 / -1; }
}

.grippy-clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.grippy-client-card {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.grippy-client-card:hover {
    border-color: #94A5A3;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.grippy-client-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.grippy-client-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex: 0 0 44px;
}
.grippy-client-info { flex: 1; min-width: 0; }
.grippy-client-name {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 2px;
    word-break: break-word;
}
.grippy-client-meta { font-size: 12px; color: #64748B; }
.grippy-client-card .grippy-btn {
    flex-shrink: 0;
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 32px !important;
}

.grippy-dietician-dashboard .grippy-dashboard-table th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-availability-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .grippy-clients-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   v3.4.36 — Match client dashboard look on dietitian side:
   tighter header gap, smaller buttons, centered cards, chart
   subtitle styling, schedule table polish.
   ============================================================ */

/* Bring header closer to body (was 18px, match client at 12px) */
.grippy-dietician-dashboard .grippy-dash-header {
    margin-bottom: 12px !important;
    padding: 18px 22px !important;
}
.grippy-dietician-dashboard .grippy-dash-header h2 {
    font-size: 20px !important;
}

/* Smaller, more uniform header buttons — match client */
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
}

/* Stat cards — exact widths align with table card below */
.grippy-dietician-dashboard .grippy-stat-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}
.grippy-dietician-dashboard .grippy-stat-card {
    padding: 14px 16px !important;
    border-radius: 12px !important;
}
.grippy-dietician-dashboard .grippy-stat-card-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
}
.grippy-dietician-dashboard .grippy-stat-card-value {
    font-size: 22px !important;
}
.grippy-dietician-dashboard .grippy-stat-card-label {
    font-size: 10px !important;
}

/* Schedule table card — match stat cards spacing/radius/shadow */
.grippy-dietician-dashboard .grippy-tab-content {
    padding: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap,
.grippy-dietician-dashboard .grippy-card,
.grippy-dietician-dashboard .grippy-google-status,
.grippy-dietician-dashboard .grippy-availability-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    padding: 18px !important;
    margin: 0 !important;
}

/* Smaller, consistent action buttons (Notes, Cancel, Join) */
.grippy-dietician-dashboard .grippy-table-actions .grippy-btn,
.grippy-dietician-dashboard .grippy-table-actions a,
.grippy-dietician-dashboard .grippy-table-actions button {
    min-height: 30px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    min-width: 0 !important;
}

/* Outline-danger Cancel — match client style */
.grippy-dietician-dashboard .grippy-btn--outline-danger {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
}
.grippy-dietician-dashboard .grippy-btn--outline-danger:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}

/* Chart subtitle — quiet caption beneath title */
.grippy-diet-chart-card .grippy-chart-subtitle {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    color: #94A5A3 !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

/* Center the body grid so it lines up cleanly with the header */
.grippy-dietician-dashboard .grippy-dash-body--saas {
    margin-top: 0 !important;
}

/* Documents tab — professional card grid */
.grippy-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.grippy-doc-card {
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 14px;
    padding: 18px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.grippy-doc-card:hover {
    border-color: #94A5A3;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.grippy-doc-card-header {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 12px;
}
.grippy-doc-upload-zone {
    border: 2px dashed #CBD5E1;
    border-radius: 10px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #F8FAFC;
}
.grippy-doc-upload-zone:hover,
.grippy-doc-dragover {
    border-color: #94A5A3;
    background: rgba(148,165,163,0.06);
}
.grippy-doc-upload-icon {
    color: #94A5A3;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}
.grippy-doc-upload-text {
    font-size: 13px;
    color: #64748B;
    margin: 0 0 4px;
}
.grippy-doc-upload-hint {
    font-size: 11px;
    color: #94A5A3;
}
.grippy-doc-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #F8FAFC;
    border-radius: 10px;
    margin-bottom: 12px;
}
.grippy-doc-file-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    background: rgba(148,165,163,0.15);
    color: #94A5A3;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grippy-doc-filename {
    color: #0F172A;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
}
.grippy-doc-filename:hover {
    color: #94A5A3;
    text-decoration: underline;
}
.grippy-doc-card-actions {
    display: flex;
    gap: 6px;
}
.grippy-doc-card-actions .grippy-btn {
    flex: 1;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* Doc safety badge */
.grippy-doc-safety-note {
    margin-top: 14px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-left: 3px solid #94A5A3;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}
.grippy-doc-safety-note::before {
    content: "🛡️";
    font-size: 14px;
}

/* Mobile */
@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-stat-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grippy-doc-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   v3.4.37 — Owner banner on public profile (visible only when
   the dietitian is viewing their own page) + storage hints
   ============================================================ */
.grippy-pp2-owner-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(148,165,163,0.15) 0%, rgba(148,165,163,0.05) 100%);
    border: 1px solid rgba(148,165,163,0.4);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.grippy-pp2-owner-banner-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}
.grippy-pp2-owner-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.grippy-pp2-owner-banner-text strong {
    font-size: 15px;
    color: #0F172A;
    font-weight: 600;
}
.grippy-pp2-owner-banner-text span {
    font-size: 13px;
    color: #475569;
}
.grippy-pp2-owner-banner-cta {
    flex-shrink: 0;
    min-height: 38px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
    text-decoration: none !important;
}
.grippy-pp2-owner-banner-cta:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
    color: #fff !important;
}
@media (max-width: 640px) {
    .grippy-pp2-owner-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .grippy-pp2-owner-banner-text {
        align-items: center;
    }
}

/* Document safety badge styling reuse */
.grippy-doc-card-safe-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(22,163,74,0.1);
    color: #16A34A;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
}

/* ============================================================
   v3.4.38 — Draft profile banner variant (orange/amber tint
   to indicate the profile is unpublished)
   ============================================================ */
.grippy-pp2-owner-banner--draft {
    background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(251,191,36,0.05) 100%) !important;
    border-color: rgba(251,191,36,0.45) !important;
}
.grippy-pp2-owner-banner--draft .grippy-pp2-owner-banner-cta {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #fff !important;
}
.grippy-pp2-owner-banner--draft .grippy-pp2-owner-banner-cta:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    color: #fff !important;
}

/* ============================================================
   v3.4.39 — Hotfix: owner banner layout broke (word-by-word
   wrapping + full-width button). Force inline layout cleanly.
   ============================================================ */
.grippy-pp2-owner-banner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.grippy-pp2-owner-banner-icon {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 32px !important;
    text-align: center !important;
}
.grippy-pp2-owner-banner-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}
.grippy-pp2-owner-banner-text strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
    margin: 0 0 2px 0 !important;
    word-break: normal !important;
    white-space: normal !important;
}
.grippy-pp2-owner-banner-text span {
    display: block !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    white-space: normal !important;
}
.grippy-pp2-owner-banner-cta {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: 200px !important;
    white-space: nowrap !important;
}
@media (max-width: 640px) {
    .grippy-pp2-owner-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }
    .grippy-pp2-owner-banner-cta {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   v3.4.40 — Dietitian dashboard restructure: remove right
   sidebar, full-width main column, centered text, fix
   Connect Google Calendar button, close schedule table.
   ============================================================ */

/* Body grid: only 2 columns now (left nav + full-width main) */
.grippy-dietician-dashboard .grippy-dash-body--saas {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 1280px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 200px minmax(0, 1fr) !important;
    }
}
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
    }
}

/* Hide any leftover side aside if it sneaks in */
.grippy-dietician-dashboard .grippy-dash-side {
    display: none !important;
}
.grippy-dietician-dashboard .grippy-diet-chart-card,
.grippy-dietician-dashboard #grippy-diet-chart {
    display: none !important;
}

/* Main column: full available width */
.grippy-dietician-dashboard .grippy-dash-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Stat cards: keep their original sizing — DO NOT modify */
.grippy-dietician-dashboard .grippy-stat-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

/* Submenu content panes are now full width below the stat cards */
.grippy-dietician-dashboard .grippy-tab-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Center all text inside the dietitian dashboard tab content */
.grippy-dietician-dashboard .grippy-tab-content,
.grippy-dietician-dashboard .grippy-tab-content > *,
.grippy-dietician-dashboard .grippy-tab-content h1,
.grippy-dietician-dashboard .grippy-tab-content h2,
.grippy-dietician-dashboard .grippy-tab-content h3,
.grippy-dietician-dashboard .grippy-tab-content p,
.grippy-dietician-dashboard .grippy-card,
.grippy-dietician-dashboard .grippy-card-title,
.grippy-dietician-dashboard .grippy-card-subtitle,
.grippy-dietician-dashboard .grippy-empty-state {
    text-align: center !important;
}
/* Inputs and form fields stay left-aligned for readability */
.grippy-dietician-dashboard input,
.grippy-dietician-dashboard textarea,
.grippy-dietician-dashboard select {
    text-align: left !important;
}

/* === Schedule table: close it with bottom border === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 14px 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th {
    background: #F8FAFC !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #475569 !important;
    border-bottom: 2px solid #E4E7EB !important;
}
/* Last row gets the closing line */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 1px solid #E4E7EB !important;
}
/* Below the table, footer line */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap::after {
    content: '' !important;
    display: block !important;
    height: 0 !important;
    border-top: 0 !important;
}

/* === Google Calendar tab: fix button width === */
.grippy-dietician-dashboard #grippy-tab-google .grippy-google-status,
.grippy-dietician-dashboard #grippy-tab-google .grippy-card {
    text-align: center !important;
    padding: 24px !important;
}
.grippy-dietician-dashboard #grippy-tab-google .grippy-btn,
.grippy-dietician-dashboard #grippy-tab-google a.grippy-btn,
.grippy-dietician-dashboard #grippy-tab-google button.grippy-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: 320px !important;
    margin: 12px auto 0 !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* === Availability quick-action buttons: keep them tidy === */
.grippy-availability-quick {
    flex-wrap: wrap;
    gap: 6px;
}
.grippy-availability-quick .grippy-btn {
    min-width: 120px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    min-height: 32px !important;
}

/* === Mobile: keep stat cards 2x2, center everything === */
@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-stat-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead {
        display: none !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
        display: block !important;
        border-bottom: 1px solid #E4E7EB !important;
        padding: 12px !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
        display: block !important;
        border-bottom: 0 !important;
        padding: 6px 0 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }
}

/* ============================================================
   v3.4.41 — Dietitian dashboard mirrors client dashboard:
   3-column SaaS layout + Search Clients sidebar widget
   (replaces what was "My Dietician" on the client side)
   ============================================================ */

/* Restore 3-column grid (left nav + main + side widget) */
.grippy-dietician-dashboard .grippy-dash-body--saas {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 290px !important;
    gap: 16px !important;
    align-items: start !important;
}
@media (max-width: 1280px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 200px minmax(0, 1fr) 270px !important;
    }
}
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
    }
}

/* Show the side aside (was hidden in v3.4.40) */
.grippy-dietician-dashboard .grippy-dash-side {
    display: block !important;
    position: sticky !important;
    top: 20px !important;
}

/* Tighter header gap to match client dashboard */
.grippy-dietician-dashboard .grippy-dash-header {
    margin-bottom: 12px !important;
    padding: 16px 20px !important;
}
.grippy-dietician-dashboard .grippy-dash-header h2 {
    font-size: 19px !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title p {
    font-size: 13px !important;
}
.grippy-dietician-dashboard .grippy-dash-header-avatar {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    font-size: 19px !important;
}

/* === Search Clients widget — styled to mirror "My Dietician" card === */
.grippy-clients-widget {
    background: linear-gradient(165deg, #fff 0%, #F8FAFC 100%);
    border: 1px solid #E4E7EB;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.grippy-clients-widget-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F1F5F9;
}
.grippy-clients-widget-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(148,165,163,0.18) 0%, rgba(148,165,163,0.08) 100%);
    color: #94A5A3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: 0 0 44px;
}
.grippy-clients-widget-label {
    font-size: 11px;
    font-weight: 600;
    color: #94A5A3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.grippy-clients-widget-name {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}
.grippy-clients-widget-search {
    margin-bottom: 12px;
}
.grippy-clients-widget-search input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #E4E7EB;
    border-radius: 10px;
    font-size: 13px;
    color: #0F172A;
    background: #fff;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.grippy-clients-widget-search input:focus {
    outline: none;
    border-color: #94A5A3;
    box-shadow: 0 0 0 3px rgba(148,165,163,0.15);
}
.grippy-clients-widget-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 14px;
    padding-right: 2px;
}
.grippy-clients-widget-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 12px;
    color: #94A5A3;
    line-height: 1.5;
}
.grippy-clients-widget-empty span {
    font-size: 11px;
    color: #CBD5E1;
}
.grippy-clients-widget-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease;
    font-family: inherit;
}
.grippy-clients-widget-item:hover {
    background: rgba(148,165,163,0.08);
    border-color: rgba(148,165,163,0.25);
}
.grippy-clients-widget-item-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.grippy-clients-widget-item-info {
    flex: 1;
    min-width: 0;
}
.grippy-clients-widget-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grippy-clients-widget-item-meta {
    font-size: 11px;
    color: #64748B;
}
.grippy-clients-widget-item-arrow {
    color: #94A5A3;
    font-size: 18px;
    flex: 0 0 auto;
}
.grippy-clients-widget-more {
    font-size: 11px;
    color: #94A5A3;
    text-align: center;
    padding: 4px;
}
.grippy-clients-widget-actions .grippy-btn {
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-clients-widget-actions .grippy-btn:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}

/* Mobile: side widget moves below content */
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-side {
        position: static !important;
    }
}
@media (max-width: 640px) {
    .grippy-clients-widget {
        padding: 16px;
    }
}

/* ============================================================
   v3.4.42 — Header matches client dashboard exactly + tab
   content fills full width + schedule actions aligned + My
   Clients fancy color cards
   ============================================================ */

/* === Header: drop the avatar styling, use client dashboard look === */
.grippy-dietician-dashboard .grippy-dash-header {
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title h2 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title p {
    margin: 4px 0 8px !important;
    font-size: 14px !important;
    color: #64748B !important;
}
.grippy-dietician-dashboard .grippy-credit-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(148,165,163,0.12) !important;
    color: #475569 !important;
    border: 1px solid rgba(148,165,163,0.25) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.grippy-dietician-dashboard .grippy-credit-pill-icon { font-size: 14px; }
.grippy-dietician-dashboard .grippy-credit-pill-val {
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 13px !important;
}
.grippy-dietician-dashboard .grippy-credit-pill-label { font-size: 12px; }

.grippy-dietician-dashboard .grippy-dash-header-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn {
    min-height: 38px !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* === Tab content fills the full main column (no left/right white space) === */
.grippy-dietician-dashboard .grippy-dash-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.grippy-dietician-dashboard .grippy-tab-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.grippy-dietician-dashboard .grippy-tab-content > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Schedule wrap fills width */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* === Schedule Actions column: align centered with rest of rows === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td:last-child {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 14px 12px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 auto !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
    min-height: 30px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    margin: 0 !important;
}

/* === My Profile, Availability, Documents fill full width === */
.grippy-dietician-dashboard .grippy-card,
.grippy-dietician-dashboard .grippy-availability-wrap,
.grippy-dietician-dashboard .grippy-google-status,
.grippy-dietician-dashboard #grippy-profile-host,
.grippy-dietician-dashboard #grippy-profile-host > *,
.grippy-dietician-dashboard .grippy-profile-editor {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* === My Clients: fancier colored cards with rotating accent stripe === */
.grippy-dietician-dashboard .grippy-clients-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 14px !important;
}
.grippy-dietician-dashboard .grippy-client-card {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    padding: 18px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
.grippy-dietician-dashboard .grippy-client-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #94A5A3 0%, #7B8C8A 100%) !important;
}
.grippy-dietician-dashboard .grippy-client-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.08) !important;
    border-color: #94A5A3 !important;
}
/* Rotate accent colors per card position so it feels lively */
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+1)::before { background: linear-gradient(90deg, #94A5A3, #7B8C8A) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+2)::before { background: linear-gradient(90deg, #3B82F6, #2563EB) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+3)::before { background: linear-gradient(90deg, #A855F7, #7C3AED) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+4)::before { background: linear-gradient(90deg, #F59E0B, #D97706) !important; }

.grippy-dietician-dashboard .grippy-client-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.grippy-dietician-dashboard .grippy-client-avatar {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+1) .grippy-client-avatar { background: linear-gradient(135deg, #94A5A3, #64748B) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+2) .grippy-client-avatar { background: linear-gradient(135deg, #60A5FA, #2563EB) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+3) .grippy-client-avatar { background: linear-gradient(135deg, #C084FC, #7C3AED) !important; }
.grippy-dietician-dashboard .grippy-client-card:nth-child(4n+4) .grippy-client-avatar { background: linear-gradient(135deg, #FBBF24, #D97706) !important; }

.grippy-dietician-dashboard .grippy-client-info { flex: 1 !important; min-width: 0 !important; text-align: left !important; }
.grippy-dietician-dashboard .grippy-client-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    text-align: left !important;
}
.grippy-dietician-dashboard .grippy-client-meta {
    font-size: 12px !important;
    color: #64748B !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.grippy-dietician-dashboard .grippy-client-meta::before {
    content: '📅' !important;
    font-size: 12px !important;
}
.grippy-dietician-dashboard .grippy-client-card .grippy-btn {
    flex-shrink: 0 !important;
    min-width: 0 !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
}

/* Mobile header stacks */
@media (max-width: 700px) {
    .grippy-dietician-dashboard .grippy-dash-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
    }
    .grippy-dietician-dashboard .grippy-dash-header-actions {
        justify-content: center !important;
    }
    .grippy-dietician-dashboard .grippy-credit-pill {
        align-self: center !important;
    }
}
@media (max-width: 640px) {
    .grippy-dietician-dashboard .grippy-clients-grid {
        grid-template-columns: 1fr !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   v3.4.43 — Revert submenu My Clients to plain centered cards;
   make right sidebar widget visually mirror "Your Dietician".
   ============================================================ */

/* === REVERT: submenu My Clients — back to plain centered cards (no
   gradient stripes, no colored avatars, fully centered text). === */
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-card {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    overflow: visible !important;
    transition: all 0.15s ease !important;
}
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card::before,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-card::before {
    content: none !important;  /* remove the gradient stripe */
}
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card:hover,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-card:hover {
    border-color: #94A5A3 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.06) !important;
    transform: none !important;
}

/* Stack the avatar above the info, all centered */
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card-head,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-card-head {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}

/* Plain sage avatar (was colorful gradient) */
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-avatar,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-avatar {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08) !important;
}

/* Center the name + meta */
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-info,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-info {
    flex: none !important;
    width: 100% !important;
    text-align: center !important;
}
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-name,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-name {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 4px !important;
}
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-meta,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-meta {
    text-align: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    color: #64748B !important;
}
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-meta::before,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-meta::before {
    content: none !important;  /* drop the calendar emoji */
}

/* Center the View profile button at the bottom of the card */
.grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card .grippy-btn,
.grippy-dietician-dashboard .grippy-clients-grid .grippy-client-card .grippy-btn {
    margin: 12px auto 0 !important;
    display: inline-flex !important;
    min-width: 140px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
}

/* === RIGHT WIDGET: visually mirror the client dashboard "Your Dietician" card === */
.grippy-dietician-dashboard .grippy-clients-widget {
    /* Use the same .grippy-my-dietician-card visual treatment from the
       client dashboard (already styled in earlier CSS). We extend it
       with extra spacing for the search input + list. */
    text-align: center !important;
    padding: 22px 20px !important;
    background: linear-gradient(165deg, #fff 0%, #F8FAFC 100%) !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-photo {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(148,165,163,0.18) 0%, rgba(148,165,163,0.05) 100%) !important;
    border: 2px solid rgba(148,165,163,0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-photo span {
    font-size: 36px !important;
    line-height: 1 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-info {
    text-align: center !important;
    width: 100% !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94A5A3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 4px !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    background: linear-gradient(135deg, #0F172A 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-tagline {
    font-size: 12px !important;
    color: #64748B !important;
    margin: 0 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-search {
    width: 100% !important;
    margin: 4px 0 0 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-search input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #0F172A !important;
    background: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-search input:focus {
    outline: none !important;
    border-color: #94A5A3 !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,0.15) !important;
    text-align: left !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-list {
    width: 100% !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-empty {
    padding: 16px 8px !important;
    color: #94A5A3 !important;
    font-size: 12px !important;
    text-align: center !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: rgba(255,255,255,0.6) !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    text-align: left !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item:hover {
    background: rgba(148,165,163,0.1) !important;
    border-color: #94A5A3 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #94A5A3, #7B8C8A) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex: 0 0 32px !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item-meta {
    font-size: 11px !important;
    color: #64748B !important;
    text-align: left !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-clients-widget-item-arrow {
    font-size: 16px !important;
    color: #94A5A3 !important;
    flex: 0 0 auto !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 4px !important;
}
.grippy-dietician-dashboard .grippy-clients-widget .grippy-my-dietician-actions .grippy-btn {
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* Mobile: 1 column for client cards */
@media (max-width: 640px) {
    .grippy-dietician-dashboard #grippy-tab-clients .grippy-clients-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   v3.4.44 — Tighter header→body gap, profile editor full-width
   white box matching client dashboard
   ============================================================ */

/* Tight header → stat cards → body gap (matching client dashboard) */
.grippy-dietician-dashboard {
    padding-top: 0 !important;
}
.grippy-dietician-dashboard .grippy-dash-header {
    margin-bottom: 12px !important;
}
.grippy-dietician-dashboard .grippy-stat-cards {
    margin: 0 0 12px 0 !important;
}
.grippy-dietician-dashboard .grippy-dash-body {
    margin-top: 0 !important;
}

/* Make sure the dashboard wrapper has the same outer padding as client */
.grippy-dietician-dashboard,
.grippy-client-dashboard {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 24px 20px !important;
}

/* === My Profile editor: white box, full width, padded — same as client === */
.grippy-dietician-dashboard #grippy-tab-profile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.grippy-dietician-dashboard #grippy-profile-host {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.grippy-dietician-dashboard .grippy-profile-editor,
.grippy-dietician-dashboard #grippy-profile-host > .grippy-card,
.grippy-dietician-dashboard #grippy-profile-host > div:not(.grippy-loading) {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    box-sizing: border-box !important;
}
.grippy-dietician-dashboard .grippy-profile-editor h2,
.grippy-dietician-dashboard .grippy-profile-editor h3,
.grippy-dietician-dashboard .grippy-card-title {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}
.grippy-dietician-dashboard .grippy-profile-editor .grippy-card-subtitle {
    text-align: center !important;
    color: #64748B !important;
    font-size: 13px !important;
    margin-bottom: 18px !important;
}

/* Profile form fields full width */
.grippy-dietician-dashboard .grippy-profile-editor input[type="text"],
.grippy-dietician-dashboard .grippy-profile-editor input[type="email"],
.grippy-dietician-dashboard .grippy-profile-editor input[type="number"],
.grippy-dietician-dashboard .grippy-profile-editor textarea,
.grippy-dietician-dashboard .grippy-profile-editor select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Also Documents + Availability + Google Calendar use same white-box treatment */
.grippy-dietician-dashboard #grippy-tab-documents .grippy-card,
.grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-wrap,
.grippy-dietician-dashboard #grippy-tab-google .grippy-card,
.grippy-dietician-dashboard #grippy-tab-google .grippy-google-status,
.grippy-dietician-dashboard #grippy-tab-reviews .grippy-card,
.grippy-dietician-dashboard #grippy-tab-clients .grippy-card {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
    box-sizing: border-box !important;
}

/* Availability quick buttons keep tidy spacing */
.grippy-availability-quick .grippy-btn {
    min-width: 110px !important;
}

/* ============================================================
   v3.4.45 — Uniform width/box across ALL submenu panels +
   true vertical alignment of Schedule Actions column.
   ============================================================ */

/* === STEP 1: Wipe inconsistent widths/borders/padding from
   every tab content child, then apply ONE unified treatment.
   ============================================================ */

/* Reset: any direct child of any tab-content gets the same box */
.grippy-dietician-dashboard .grippy-tab-content > * {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
}

/* Loading & empty states: keep them flush, not double-padded */
.grippy-dietician-dashboard .grippy-tab-content > .grippy-loading,
.grippy-dietician-dashboard .grippy-tab-content > .grippy-empty-state,
.grippy-dietician-dashboard .grippy-tab-content > .grippy-notice {
    padding: 32px 20px !important;
    text-align: center !important;
}

/* The grids of cards (clients-grid, doc-grid) shouldn't get a
   second border around them — they're collections of cards. */
.grippy-dietician-dashboard .grippy-tab-content > .grippy-clients-grid,
.grippy-dietician-dashboard .grippy-tab-content > .grippy-doc-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Messages embedded shell: full bleed, no extra padding */
.grippy-dietician-dashboard #grippy-tab-messages > #grippy-messages-embedded,
.grippy-dietician-dashboard #grippy-tab-messages > * {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Tables inside the unified panel — no extra wrapper border, table
   already styled with its own borders */
.grippy-dietician-dashboard .grippy-tab-content > .grippy-table-wrap {
    padding: 0 !important;
    overflow: hidden !important;
}

/* === STEP 2: Schedule Actions column — TRUE vertical alignment === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr {
    height: auto !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    vertical-align: middle !important;
    padding: 16px 12px !important;
    line-height: 1.4 !important;
}

/* Actions cell: stay table-cell (NOT flex), use inner wrapper for alignment */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td.grippy-table-actions {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Force the buttons to a single inline-flex row so they sit on the same
   baseline as the row contents, never wrapping to new lines */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions a,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions button {
    display: inline-flex !important;
    vertical-align: middle !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    margin: 0 3px !important;
}

/* Pad header row consistently */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    padding: 12px !important;
    background: #F8FAFC !important;
    border-bottom: 2px solid #E4E7EB !important;
}

/* Mobile schedule cards: actions stack centered */
@media (max-width: 640px) {
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td.grippy-table-actions {
        display: block !important;
        text-align: center !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
        margin: 4px !important;
    }
}

/* ============================================================
   v3.4.46 — Schedule table truly full-width matching client
   bookings table. Remove inner double border, fix Cancel button
   clipping, ensure table fills the entire panel.
   ============================================================ */

/* The schedule tab panel: drop the outer white box AND let the table
   wrap BE the panel (single border, no double frame). */
.grippy-dietician-dashboard #grippy-tab-schedule {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule > * {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Empty state stays centered with padding */
.grippy-dietician-dashboard #grippy-tab-schedule > .grippy-empty-state {
    padding: 48px 20px !important;
    text-align: center !important;
}

/* Make the table fill its container fully, edge-to-edge */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    table-layout: auto !important;
}

/* Header row: subtle bg + bottom border */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid #E4E7EB !important;
    border-right: 0 !important;
    border-left: 0 !important;
    text-align: center !important;
}

/* Body cells: thin row dividers, centered alignment */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
    padding: 16px 12px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #0F172A !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Date column: bold, left-padded for visual anchor */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child {
    font-weight: 600 !important;
}

/* === Actions cell: NEVER clip, always show all buttons === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td:last-child {
    width: auto !important;
    min-width: 200px !important;
    white-space: nowrap !important;
    padding: 14px 16px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions a,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Cancel button outline-danger style (not clipped, full red text visible) */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--outline-danger {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
    overflow: visible !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--outline-danger:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}

/* Status pill aligned center */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Meet Link: clean Join button */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:nth-child(5) .grippy-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:nth-child(5) .grippy-btn:hover {
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* Mobile: stack as cards (already had this in earlier rule, just confirming) */
@media (max-width: 640px) {
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead {
        display: none !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
        display: block !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid #F1F5F9 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
        display: block !important;
        text-align: center !important;
        padding: 6px 0 !important;
        border: 0 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:last-child {
        min-width: 0 !important;
        padding: 10px 0 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ============================================================
   v3.4.47 — Schedule table EXACT clone of client bookings table:
   vertical column dividers, header bg, avatar+name client cell,
   matching button styles.
   ============================================================ */

/* Table grid: vertical dividers between columns (matching client) */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    border-collapse: collapse !important;
    width: 100% !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border-right: 1px solid #F1F5F9 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td:last-child {
    border-right: 0 !important;
}

/* Header row uniform */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #E4E7EB !important;
    text-align: left !important;
}

/* Body cells */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
    padding: 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-size: 13px !important;
    color: #0F172A !important;
}

/* Date column: bold first column */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child strong {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* === Client cell: avatar + name (matches client dashboard's DIETICIAN cell) === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-dietician {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-dietician-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #E4E7EB !important;
    color: #64748B !important;
    flex: 0 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-dietician-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Status pill — match client dashboard */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: #F1F5F9 !important;
    color: #475569 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-pill-dot {
    display: none !important;
}

/* Actions cell aligned with the rest of the row */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td.grippy-table-actions {
    text-align: left !important;
    padding: 14px 16px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* === Button styles to match client dashboard === */
/* Primary (Join Meeting) — sage filled */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--primary {
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--primary:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}
/* Ghost / secondary (Session notes, Leave review) — white outlined */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--ghost {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--ghost:hover {
    background: #F8FAFC !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}
/* Cancel — outline danger */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--outline-danger {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn--outline-danger:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}

/* Uniform button sizing */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions a,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Last row no bottom border (the panel's border closes it cleanly) */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Mobile responsive */
@media (max-width: 800px) {
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead {
        display: none !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
        display: block !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid #F1F5F9 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
        display: block !important;
        text-align: left !important;
        padding: 6px 0 !important;
        border: 0 !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #94A5A3 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td.grippy-table-actions {
        padding-top: 12px !important;
    }
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   v3.4.48 — Match client dashboard exactly: hide stat cards row,
   constrain Schedule action button widths so they don't stretch.
   ============================================================ */

/* Hide stat cards row entirely (client dashboard doesn't have it) */
.grippy-dietician-dashboard .grippy-stat-cards {
    display: none !important;
}

/* === Schedule action buttons: tight, NEVER stretch to fill cell === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td.grippy-table-actions {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 12px 16px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions a,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;        /* never grow, never shrink */
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 7px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Mobile: actions wrap into rows but still tight */
@media (max-width: 800px) {
    .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ============================================================
   v3.4.49 — Empty-state CTA color fix, tighter top spacing,
   thicker dashboard header, vertical column borders restored.
   ============================================================ */

/* === FIX: Book a session button text was inheriting coral red === */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state a.grippy-btn,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state a.grippy-empty-cta {
    color: #fff !important;
    background: #94A5A3 !important;
    border: 1px solid #94A5A3 !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state a.grippy-btn:hover,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-empty-state a.grippy-empty-cta:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
    color: #fff !important;
}

/* === Tighter top spacing — dashboard sits closer to site header === */
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    padding-top: 12px !important;
    margin-top: 0 !important;
}
body.admin-bar .grippy-client-dashboard,
body.admin-bar .grippy-dietician-dashboard {
    padding-top: 12px !important;
}

/* === Thicker, more substantial dashboard header card === */
.grippy-client-dashboard .grippy-dash-header,
.grippy-dietician-dashboard .grippy-dash-header {
    padding: 28px 32px !important;
    margin-bottom: 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
.grippy-client-dashboard .grippy-dash-header-title h2,
.grippy-dietician-dashboard .grippy-dash-header-title h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}
.grippy-client-dashboard .grippy-dash-header-title p,
.grippy-dietician-dashboard .grippy-dash-header-title p {
    font-size: 15px !important;
    margin: 6px 0 12px !important;
}
.grippy-client-dashboard .grippy-credit-pill,
.grippy-dietician-dashboard .grippy-credit-pill {
    padding: 7px 14px !important;
    font-size: 13px !important;
}
.grippy-client-dashboard .grippy-dash-header-actions .grippy-btn,
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn {
    min-height: 42px !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

/* === Vertical column borders restored on Schedule (matches client) === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table {
    border-collapse: collapse !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table td {
    border-right: 1px solid #F1F5F9 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td:last-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table th:last-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table td:last-child {
    border-right: 0 !important;
}

/* Mobile: stack header */
@media (max-width: 700px) {
    .grippy-client-dashboard .grippy-dash-header,
    .grippy-dietician-dashboard .grippy-dash-header {
        padding: 22px 20px !important;
    }
    .grippy-client-dashboard .grippy-dash-header-title h2,
    .grippy-dietician-dashboard .grippy-dash-header-title h2 {
        font-size: 22px !important;
    }
}

/* ============================================================
   v3.4.50 — Schedule title + full grid borders + booking welcome
   cards polish + round today calendar cell + tighter top spacing
   ============================================================ */

/* "My Schedule" title above the table */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-schedule-title {
    margin: 0 0 14px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* The schedule title isn't inside the white box — separate */
.grippy-dietician-dashboard #grippy-tab-schedule > .grippy-schedule-title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* === FULL GRID BORDERS on the schedule table === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #E4E7EB !important;  /* full grid: top, right, bottom, left */
    padding: 14px 16px !important;
    vertical-align: middle !important;
    text-align: left !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-top: 0 !important;  /* outer panel border handles the top */
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th {
    border-top: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child {
    border-left: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:last-child {
    border-right: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* === Round circular "today" cell in mini calendar === */
.grippy-dietician-dashboard .grippy-bcal-cell.is-today,
.grippy-client-dashboard .grippy-bcal-cell.is-today {
    background: transparent !important;
    border-radius: 0 !important;
}
.grippy-dietician-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum,
.grippy-client-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 6px rgba(148, 165, 163, 0.4) !important;
}

/* === Booking flow welcome cards: clean, centered, professional === */
.grippy-pref-shortcut {
    max-width: 720px !important;
    margin: 40px auto !important;
    padding: 32px 24px !important;
    text-align: center !important;
}
.grippy-pref-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.02em !important;
}
.grippy-pref-sub {
    font-size: 16px !important;
    color: #64748B !important;
    margin: 0 auto 36px !important;
    max-width: 540px !important;
    line-height: 1.55 !important;
}
.grippy-pref-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
}
.grippy-pref-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 32px 24px !important;
    background: #fff !important;
    border: 2px solid #E4E7EB !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    outline: none !important;
}
.grippy-pref-card:focus,
.grippy-pref-card:focus-visible {
    outline: none !important;
    border-color: #94A5A3 !important;
    box-shadow: 0 0 0 4px rgba(148, 165, 163, 0.18) !important;
}
.grippy-pref-card:hover {
    border-color: #94A5A3 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}
.grippy-pref-card--primary {
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    border-color: #94A5A3 !important;
}
.grippy-pref-card--ghost {
    background: linear-gradient(135deg, #F8FAFC 0%, #fff 100%) !important;
}
.grippy-pref-avatar {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 12px rgba(148, 165, 163, 0.3) !important;
}
.grippy-pref-icon {
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #F1F5F9 0%, #E4E7EB 100%) !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    margin-bottom: 18px !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-pref-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}
.grippy-pref-tag {
    font-size: 13px !important;
    color: #64748B !important;
    margin-bottom: 22px !important;
    line-height: 1.4 !important;
}
.grippy-pref-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 22px !important;
    background: #94A5A3 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    margin-top: auto !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.grippy-pref-card--ghost .grippy-pref-cta {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
    box-shadow: none !important;
}
.grippy-pref-card:hover .grippy-pref-cta {
    background: #7B8C8A !important;
    color: #fff !important;
    border-color: #7B8C8A !important;
}

/* === Tighter top spacing on dietitian dashboard (matching client) === */
.grippy-dietician-dashboard {
    padding-top: 8px !important;
}
body.admin-bar .grippy-dietician-dashboard {
    padding-top: 8px !important;
}

/* Mobile pref cards stack */
@media (max-width: 700px) {
    .grippy-pref-options {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .grippy-pref-shortcut { padding: 24px 16px !important; }
    .grippy-pref-title { font-size: 24px !important; }
    .grippy-pref-sub { font-size: 14px !important; margin-bottom: 24px !important; }
    .grippy-pref-avatar, .grippy-pref-icon { width: 64px !important; height: 64px !important; font-size: 26px !important; }
}

/* ============================================================
   v3.4.51 — Panel titles, full table borders inside box,
   aggressive top spacing, idle modal styles handled inline.
   ============================================================ */

/* Lift the dashboard up tight against the website header */
.grippy-client-dashboard,
.grippy-dietician-dashboard {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.admin-bar .grippy-client-dashboard,
body.admin-bar .grippy-dietician-dashboard {
    padding-top: 0 !important;
}

/* === Tab panel wrapper (white box that contains title + content) === */
.grippy-dietician-dashboard .grippy-tab-panel {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}

/* The page title sits inside the box */
.grippy-dietician-dashboard .grippy-tab-panel-title,
.grippy-dietician-dashboard .grippy-availability-wrap > .grippy-availability-head .grippy-availability-title,
.grippy-dietician-dashboard #grippy-tab-google .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-documents .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-reviews .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-clients .grippy-card-title,
.grippy-dietician-dashboard .grippy-profile-editor h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
}

/* JS-injected page titles for tabs that don't have a built-in heading.
   We inject them via CSS ::before with the tab name. */
.grippy-dietician-dashboard #grippy-tab-google::before,
.grippy-dietician-dashboard #grippy-tab-documents::before,
.grippy-dietician-dashboard #grippy-tab-reviews::before,
.grippy-dietician-dashboard #grippy-tab-clients::before,
.grippy-dietician-dashboard #grippy-tab-profile::before,
.grippy-dietician-dashboard #grippy-tab-messages::before {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin: 0 0 14px 0;
    padding: 24px 24px 14px 24px;
    border-bottom: 1px solid #F1F5F9;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border: 1px solid #E4E7EB;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: -1px;
}
.grippy-dietician-dashboard #grippy-tab-google::before { content: '🔗  Google Calendar'; }
.grippy-dietician-dashboard #grippy-tab-documents::before { content: '📄  My Documents'; }
.grippy-dietician-dashboard #grippy-tab-reviews::before { content: '⭐  Reviews'; }
.grippy-dietician-dashboard #grippy-tab-clients::before { content: '👥  My Clients'; }
.grippy-dietician-dashboard #grippy-tab-profile::before { content: '👤  My Profile'; }
.grippy-dietician-dashboard #grippy-tab-messages::before { content: '💬  Messages'; }

/* Make sure tab content panels keep the same outer treatment so titles
   merge cleanly into the white box below them */
.grippy-dietician-dashboard .grippy-tab-content > * {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0 !important;
}

/* === Schedule table: full grid borders INSIDE the white panel === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel {
    padding: 22px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel .grippy-table-wrap {
    background: transparent !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #E4E7EB !important;
    padding: 14px 16px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td {
    border-top: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child {
    border-left: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:last-child {
    border-right: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* ============================================================
   v3.4.52 — Remove duplicate ::before titles, style existing
   inline titles like My Schedule, solid-fill today calendar
   circle.
   ============================================================ */

/* === REMOVE the CSS-injected duplicate titles === */
.grippy-dietician-dashboard #grippy-tab-google::before,
.grippy-dietician-dashboard #grippy-tab-documents::before,
.grippy-dietician-dashboard #grippy-tab-reviews::before,
.grippy-dietician-dashboard #grippy-tab-clients::before,
.grippy-dietician-dashboard #grippy-tab-profile::before,
.grippy-dietician-dashboard #grippy-tab-messages::before {
    content: none !important;
    display: none !important;
}

/* Restore tab-content children to normal radius (was clipped to merge with ::before) */
.grippy-dietician-dashboard .grippy-tab-content > * {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-top: 1px solid #E4E7EB !important;
}

/* === Style existing inline titles to match My Schedule === */
.grippy-dietician-dashboard #grippy-tab-google .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-documents .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-reviews .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-clients .grippy-card-title,
.grippy-dietician-dashboard .grippy-profile-editor h2,
.grippy-dietician-dashboard .grippy-availability-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
}

/* Card-subtitle (the description below the title) */
.grippy-dietician-dashboard .grippy-card-subtitle {
    font-size: 13px !important;
    color: #64748B !important;
    margin: -8px 0 18px !important;
    text-align: left !important;
}

/* === Solid-fill today calendar circle (full coverage, no outline) === */
.grippy-dietician-dashboard .grippy-bcal-cell.is-today,
.grippy-client-dashboard .grippy-bcal-cell.is-today {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
}
.grippy-dietician-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum,
.grippy-client-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: #94A5A3 !important;
    background-image: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 2px 6px rgba(148, 165, 163, 0.4) !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================================
   v3.4.54 — Dietitian dashboard mirrors client dashboard layout
   exactly: stacked vertical header buttons, same padding, pill
   placement, panel widths, top spacing.
   ============================================================ */

/* === HEADER: stacked vertical action buttons on the right === */
.grippy-dietician-dashboard .grippy-dash-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 28px 32px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fff 0%, #F8FAFC 100%) !important;
    border: 1px solid #E4E7EB !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title h2 {
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
}
.grippy-dietician-dashboard .grippy-dash-header-title p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #64748B !important;
}
.grippy-dietician-dashboard .grippy-credit-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    margin-top: 4px !important;
    background: rgba(148, 165, 163, 0.12) !important;
    color: #475569 !important;
    border: 1px solid rgba(148, 165, 163, 0.25) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.grippy-dietician-dashboard .grippy-credit-pill-val {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* === Stacked vertical action buttons (matches client dashboard) === */
.grippy-dietician-dashboard .grippy-dash-header-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 200px !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--primary {
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--primary:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--secondary,
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-browse-btn,
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-logout-btn {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--secondary:hover,
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-browse-btn:hover,
.grippy-dietician-dashboard .grippy-dash-header-actions .grippy-logout-btn:hover {
    background: #F8FAFC !important;
    border-color: #94A5A3 !important;
    color: #0F172A !important;
}

/* === Tight top spacing === */
.grippy-dietician-dashboard {
    padding-top: 0 !important;
    margin-top: 0 !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* === Body layout: same gap and 3-column grid as client === */
.grippy-dietician-dashboard .grippy-dash-body--saas {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 290px !important;
    gap: 16px !important;
    align-items: start !important;
    margin-top: 0 !important;
}

/* === LEFT NAV: matches client (vertical pill stack) === */
.grippy-dietician-dashboard .grippy-dash-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: sticky !important;
    top: 16px !important;
}
.grippy-dietician-dashboard .grippy-dash-nav {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 0 !important;
    color: #475569 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn.active {
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(148, 165, 163, 0.3) !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn .grippy-nav-count {
    margin-left: auto !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    padding: 2px 9px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn.active .grippy-nav-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* === Mobile (matches client breakpoints) === */
@media (max-width: 1100px) {
    .grippy-dietician-dashboard .grippy-dash-body--saas {
        grid-template-columns: 1fr !important;
    }
    .grippy-dietician-dashboard .grippy-dash-left,
    .grippy-dietician-dashboard .grippy-dash-side {
        position: static !important;
    }
}
@media (max-width: 700px) {
    .grippy-dietician-dashboard .grippy-dash-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 22px 20px !important;
    }
    .grippy-dietician-dashboard .grippy-dash-header-title {
        align-items: center !important;
    }
    .grippy-dietician-dashboard .grippy-dash-header-actions {
        width: 100% !important;
    }
    .grippy-dietician-dashboard .grippy-dash-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn {
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   v3.4.55 — Schedule + Bookings tables: Excel-style FULL grid
   with rounded outer corners on BOTH client and dietitian.
   ============================================================ */

/* === Outer wrap: rounded box with NO inner padding (table fills it) === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel .grippy-table-wrap,
.grippy-client-dashboard .grippy-bookings-content .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;       /* clip table corners to box radius */
    padding: 0 !important;             /* no padding so table reaches the box edges */
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* === Table itself: collapsed grid, fills wrap === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* === Every cell: full 1px border on all 4 sides === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table td {
    border: 1px solid #E4E7EB !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
    text-align: left !important;
    background: #fff !important;
}

/* Header row bg */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 16px !important;
}

/* Outer edges: clear top/left/right/bottom on the boundary cells so the
   wrap's border becomes the visible outer border (no double line). */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr:first-child th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr:first-child td {
    border-top: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr td:first-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr th:first-child {
    border-left: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:last-child,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:last-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr td:last-child,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tr th:last-child {
    border-right: 0 !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Remove any leftover stripe on alternate rows that was overriding bg */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:nth-child(even) td {
    background: #fff !important;
}

/* Drop the schedule panel's outer padding so the table-wrap is the only frame */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel {
    padding: 24px !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel .grippy-tab-panel-title {
    margin-bottom: 16px !important;
}

/* ============================================================
   v3.4.56 — Calendar today as filled cell (no circle), table
   header color tweak, center-align all cell text.
   ============================================================ */

/* === Calendar: today fills the entire cell, no inner circle === */
.grippy-dietician-dashboard .grippy-bcal-cell.is-today,
.grippy-client-dashboard .grippy-bcal-cell.is-today {
    background: linear-gradient(135deg, #94A5A3 0%, #7B8C8A 100%) !important;
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(148, 165, 163, 0.3) !important;
    padding: 4px !important;
}
.grippy-dietician-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum,
.grippy-client-dashboard .grippy-bcal-cell.is-today .grippy-bcal-daynum {
    /* Drop the inner circle entirely — the cell itself is the highlight */
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Booking pip on today should switch to white-on-translucent so it stays visible */
.grippy-dietician-dashboard .grippy-bcal-cell.is-today .grippy-bcal-pip,
.grippy-client-dashboard .grippy-bcal-cell.is-today .grippy-bcal-pip {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* === Booking/Schedule tables: center-align all cell text === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table td {
    text-align: center !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-dietician,
.grippy-client-dashboard .grippy-bookings-content .grippy-table-dietician {
    justify-content: center !important;
}
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions,
.grippy-client-dashboard .grippy-bookings-content .grippy-table-actions {
    justify-content: center !important;
}

/* === Header text color: muted slate (more pro look) === */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table thead th {
    color: #94A5A3 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: #F8FAFC !important;
}

/* v3.4.57 — Test: table header color rgb(71,85,105) slate-600 */
.grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th,
.grippy-client-dashboard .grippy-bookings-content .grippy-dashboard-table thead th {
    color: rgb(71, 85, 105) !important;
}

/* ============================================================
   v3.4.58 — Override the legacy 160px / header-offset padding
   that's pushing the dashboard far below the website header.
   Force exact same proportions as client dashboard.
   ============================================================ */

/* Maximum-specificity override: the dashboards now sit tight
   against the website header (8-16px padding), 1400px max-width. */
html body .grippy-dietician-dashboard,
html body.page .grippy-dietician-dashboard,
html body.page-template-default .grippy-dietician-dashboard,
html body .grippy-client-dashboard,
html body.page .grippy-client-dashboard,
html body.page-template-default .grippy-client-dashboard {
    padding-top: 16px !important;
    padding-bottom: 64px !important;
    padding-left: clamp(16px, 3vw, 32px) !important;
    padding-right: clamp(16px, 3vw, 32px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Kill the legacy --grippy-header-offset variable on the dashboards */
html body #grippy-directory,
html body #grippy-booking-flow,
html body #grippy-booking-catalog,
html body #grippy-booking-sidebar,
html body .grippy-dietician-profile-page,
html body .grippy-client-dashboard,
html body .grippy-dietician-dashboard,
html body #grippy-auth {
    --grippy-header-offset: 16px !important;
}

/* ============================================================
   v3.4.59 — Full-width dashboard, panel titles consistent, hide
   duplicate availability subtitle, align nav/calendar widths.
   ============================================================ */

/* === Full width: drop the 1400px cap === */
html body .grippy-dietician-dashboard,
html body.page .grippy-dietician-dashboard,
html body.page-template-default .grippy-dietician-dashboard,
html body .grippy-client-dashboard,
html body.page .grippy-client-dashboard,
html body.page-template-default .grippy-client-dashboard {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(20px, 4vw, 60px) !important;
    padding-right: clamp(20px, 4vw, 60px) !important;
}

/* === Tab panel title (uniform across ALL submenus) === */
.grippy-dietician-dashboard .grippy-tab-panel-title {
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Title sits OUTSIDE the white box (matches My Schedule) — strip the
   per-tab background that v3.4.51 added when title was inside */
.grippy-dietician-dashboard .grippy-tab-content > .grippy-tab-panel-title {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    box-shadow: none !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 18px 0 !important;
}

/* Hide the redundant "Weekly Availability" h3 — the tab-panel-title
   "Availability" already labels the section */
.grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-title,
.grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-head .grippy-availability-title {
    display: none !important;
}
.grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-head {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}

/* Hide the inline .grippy-card-title on Documents / Google / Reviews when
   we've added a panel title via JS to avoid double labels */
.grippy-dietician-dashboard #grippy-tab-documents .grippy-card-title,
.grippy-dietician-dashboard #grippy-tab-google .grippy-card-title {
    display: none !important;
}

/* === Nav + calendar widths aligned (both fill the left column) === */
.grippy-dietician-dashboard .grippy-dash-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}
.grippy-dietician-dashboard .grippy-dash-left .grippy-dash-nav,
.grippy-dietician-dashboard .grippy-dash-left .grippy-booking-calendar,
.grippy-dietician-dashboard .grippy-dash-left .grippy-booking-calendar--mini {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   v3.4.60 — Title INSIDE the panel box separated by line, fill
   the white area above the dashboard with the page background.
   ============================================================ */

/* Each tab content panel becomes ONE white box; the title is the
   first child INSIDE the box, with a bottom divider below it. */
html body .grippy-dietician-dashboard .grippy-tab-content,
html body .grippy-dietician-dashboard .grippy-tab-content > * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* The active tab content gets ONE white panel that wraps everything */
html body .grippy-dietician-dashboard .grippy-tab-content {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Hide inactive tabs (the inline display:none rules apply naturally) */
html body .grippy-dietician-dashboard .grippy-tab-content[style*="display:none"],
html body .grippy-dietician-dashboard .grippy-tab-content[style*="display: none"],
html body .grippy-dietician-dashboard .grippy-tab-content[hidden] {
    display: none !important;
}

/* Title is the first thing INSIDE the panel, with bottom divider */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-tab-panel-title {
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Make sure the schedule's existing inner panel does NOT add a second box */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-tab-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Schedule table-wrap stays its own bordered grid inside the panel */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide redundant inline titles now that the panel title is in the box */
html body .grippy-dietician-dashboard #grippy-tab-documents .grippy-card-title,
html body .grippy-dietician-dashboard #grippy-tab-google .grippy-card-title,
html body .grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-head .grippy-availability-title {
    display: none !important;
}
html body .grippy-dietician-dashboard #grippy-tab-availability .grippy-availability-head {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}

/* === Fill the white area above the dashboard with the page background === */
html body.page,
html body.page-template,
html body.page-template-default,
html body.elementor-page {
    background: linear-gradient(180deg, #F7F8FA 0%, #ffffff 320px, #ffffff 100%) !important;
}
/* The Elementor section wrapping the dashboard inherits the same bg */
html body .elementor-element.e-con:has(.grippy-dietician-dashboard),
html body .elementor-element.e-con:has(.grippy-client-dashboard),
html body main,
html body #content,
html body .site-main {
    background: transparent !important;
}

/* ============================================================
   v3.4.61 — Title visibility, normal font sizes, page bg fill.
   ============================================================ */

/* Force the title visible — kill any inherited display:none */
html body .grippy-dietician-dashboard .grippy-tab-content > .grippy-tab-panel-title,
html body .grippy-dietician-dashboard .grippy-tab-panel-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

/* === Normal text sizes throughout the dashboard (was looking too small/zoomed-out) === */
html body .grippy-dietician-dashboard {
    font-size: 14px !important;
    line-height: 1.5 !important;
}
html body .grippy-dietician-dashboard p,
html body .grippy-dietician-dashboard label,
html body .grippy-dietician-dashboard td,
html body .grippy-dietician-dashboard th {
    font-size: 14px !important;
}
html body .grippy-dietician-dashboard .grippy-card,
html body .grippy-dietician-dashboard .grippy-google-status,
html body .grippy-dietician-dashboard .grippy-availability-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* Inner descriptions / subtitles: comfortable size */
html body .grippy-dietician-dashboard .grippy-card-subtitle,
html body .grippy-dietician-dashboard .grippy-availability-sub {
    font-size: 13.5px !important;
    color: #64748B !important;
    margin: 0 0 16px !important;
    line-height: 1.5 !important;
}

/* Buttons inside tab content scaled comfortably */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-btn {
    font-size: 13px !important;
    min-height: 38px !important;
    padding: 9px 18px !important;
}
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-btn--sm {
    font-size: 12px !important;
    min-height: 32px !important;
    padding: 7px 14px !important;
}

/* === Fill the area above the dashboard with page background === */
html body.page,
html body.page-template,
html body.page-template-default,
html body.elementor-page,
html {
    background: #F7F8FA !important;
}
html body .elementor-element.e-con:has(.grippy-dietician-dashboard),
html body .elementor-element.e-con:has(.grippy-client-dashboard) {
    background: #F7F8FA !important;
}

/* The dashboard itself drops its own outer padding so the body bg shows through */
html body .grippy-dietician-dashboard,
html body .grippy-client-dashboard {
    background: transparent !important;
}

/* Schedule table-wrap remains its own visible bordered grid */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

/* ============================================================
   v3.4.62 — Single panel per tab (no nested boxes), centered
   content, deduped titles, full width.
   ============================================================ */

/* Active tab content is the ONE white box per submenu. Inner cards
   shouldn't add their own borders/backgrounds. */
html body .grippy-dietician-dashboard .grippy-tab-content {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 26px 28px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Strip nested borders/bg from any inner wrapper inside a tab panel */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-card,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-google-status,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-availability-wrap,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-tab-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* But the schedule table-wrap is a meaningful inner grid box — keep it */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title — first child inside the panel, with bottom divider */
html body .grippy-dietician-dashboard .grippy-tab-content > .grippy-tab-panel-title {
    display: block !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 22px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: left !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hide ANY duplicate inline titles inside tab content */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-card-title,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-availability-title,
html body .grippy-dietician-dashboard .grippy-tab-content > .grippy-tab-panel > h2 {
    display: none !important;
}

/* Hide availability head's bottom border (now redundant with title divider) */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-availability-head {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}

/* Center generic empty-state content / loading inside the panel */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-empty-state,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-loading,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-notice {
    text-align: center !important;
    padding: 32px 20px !important;
    background: transparent !important;
    border: 0 !important;
}

/* Connect Google Calendar etc. — content centered inside panel */
html body .grippy-dietician-dashboard #grippy-tab-google > div:not(.grippy-tab-panel-title),
html body .grippy-dietician-dashboard #grippy-tab-google p,
html body .grippy-dietician-dashboard #grippy-tab-documents > div:not(.grippy-tab-panel-title) {
    text-align: center !important;
}

/* Dashboard fills viewport width fully; symmetric padding */
html body .grippy-dietician-dashboard,
html body .grippy-client-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(20px, 4vw, 60px) !important;
    padding-right: clamp(20px, 4vw, 60px) !important;
}

/* ============================================================
   v3.4.63 — Title centered, everything centered, single box
   for Messages too (no nested), full width.
   ============================================================ */

/* Title CENTERED (was left-aligned) */
html body .grippy-dietician-dashboard .grippy-tab-content > .grippy-tab-panel-title,
html body .grippy-dietician-dashboard .grippy-tab-panel-title {
    text-align: center !important;
}

/* Center every text element inside tab content */
html body .grippy-dietician-dashboard .grippy-tab-content,
html body .grippy-dietician-dashboard .grippy-tab-content p,
html body .grippy-dietician-dashboard .grippy-tab-content h3,
html body .grippy-dietician-dashboard .grippy-tab-content h4,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-empty-state,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-loading,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-card-subtitle,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-availability-sub {
    text-align: center !important;
}

/* Inputs / textareas keep left alignment for readability */
html body .grippy-dietician-dashboard .grippy-tab-content input,
html body .grippy-dietician-dashboard .grippy-tab-content textarea,
html body .grippy-dietician-dashboard .grippy-tab-content select {
    text-align: left !important;
}

/* === Messages: flatten the nested box ===
   #grippy-messages-embedded is the messages shell — it had its own border.
   Make it blend into the parent panel (no double box). */
html body .grippy-dietician-dashboard #grippy-tab-messages #grippy-messages-embedded,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}
/* The conversation list + thread inside should keep their internal bg/dividers */
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-threads {
    border-right: 1px solid #F1F5F9 !important;
    background: #fff !important;
}
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-thread {
    background: #fff !important;
}

/* Messages tab title comes BEFORE everything (already injected by forceTitle).
   Push the messages content below the title with breathing room. */
html body .grippy-dietician-dashboard #grippy-tab-messages > #grippy-messages-embedded {
    margin-top: 0 !important;
}

/* === Full-width — drop any leftover container caps === */
html body .grippy-dietician-dashboard,
html body .grippy-client-dashboard,
html body.page .grippy-dietician-dashboard,
html body.page .grippy-client-dashboard,
html body.page-template-default .grippy-dietician-dashboard,
html body.page-template-default .grippy-client-dashboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(20px, 4vw, 60px) !important;
    padding-right: clamp(20px, 4vw, 60px) !important;
}

/* Clients tab: keep the cards-grid centered (cards stay left-internal) */
html body .grippy-dietician-dashboard .grippy-clients-grid {
    justify-items: center !important;
    text-align: center !important;
}
html body .grippy-dietician-dashboard .grippy-client-card {
    text-align: center !important;
}

/* ============================================================
   v3.4.64 — Single panel for Schedule + Messages, darker Excel
   grid lines, click-day calendar popover.
   ============================================================ */

/* === SCHEDULE: flatten the inner table-wrap into the parent panel === */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Excel-style DARKER grid lines — every cell border on every side */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border: 1px solid #94A5A3 !important;          /* darker outer */
    border-radius: 8px !important;
    overflow: hidden !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #CBD5E1 !important;           /* darker inner divider */
    padding: 14px 16px !important;
    vertical-align: middle !important;
    text-align: center !important;
    background: #fff !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F1F5F9 !important;                  /* darker header bg */
    color: rgb(71, 85, 105) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* === MESSAGES: flatten too — single panel === */
html body .grippy-dietician-dashboard #grippy-tab-messages,
html body .grippy-dietician-dashboard #grippy-tab-messages > #grippy-messages-embedded,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-messages {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 26px 28px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
/* Internal messages dividers stay subtle */
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-threads {
    border-right: 1px solid #F1F5F9 !important;
    background: transparent !important;
}

/* === Calendar day popover === */
.grippy-cal-pop {
    position: absolute;
    z-index: 9999;
    min-width: 280px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #E4E7EB;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 14px 16px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: #0F172A;
}
.grippy-cal-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
}
.grippy-cal-pop-head strong { font-size: 14px; color: #0F172A; }
.grippy-cal-pop-close {
    background: transparent;
    border: 0;
    color: #64748B;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
}
.grippy-cal-pop-empty {
    padding: 14px 4px;
    text-align: center;
    color: #94A5A3;
    font-size: 12px;
}
.grippy-cal-pop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}
.grippy-cal-pop-item {
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E4E7EB;
    border-radius: 8px;
}
.grippy-cal-pop-time {
    font-size: 12px;
    font-weight: 700;
    color: #94A5A3;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.grippy-cal-pop-client {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 4px;
}
.grippy-cal-pop-status .grippy-pill {
    font-size: 10px;
    padding: 2px 8px;
}
.grippy-cal-pop-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}
.grippy-cal-pop-actions .grippy-btn {
    width: 100%;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

/* Calendar cell hover hint (clickable) */
html body .grippy-dietician-dashboard .grippy-bcal-cell[data-date]:hover {
    background: rgba(148, 165, 163, 0.1) !important;
    border-radius: 6px !important;
}

/* ============================================================
   v3.4.65 — Drop the inner box on Schedule + Messages, fix
   calendar hover color, centered modal for day actions.
   ============================================================ */

/* === SCHEDULE: table is now BORDERLESS on the outside.
   Cells keep their grid dividers but the table itself has no
   outer frame and no rounded corners — it sits flush in the
   parent panel like the other tab content. === */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 4px 0 0 !important;
}
/* Cell borders still form an Excel grid (just darker — same as v3.4.64) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #CBD5E1 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #fff !important;
}
/* Drop edge borders so it doesn't double with parent panel */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td {
    border-top: 1px solid #CBD5E1 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child {
    border-left: 1px solid #CBD5E1 !important;
}

/* === MESSAGES: drop the entire inner box, content sits flush === */
html body .grippy-dietician-dashboard #grippy-tab-messages #grippy-messages-embedded,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell > * {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* The conversations / thread split keeps a single thin divider only */
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-threads {
    border-right: 1px solid #F1F5F9 !important;
    padding-right: 14px !important;
}
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-thread {
    padding-left: 14px !important;
}

/* === Calendar hover: visible sage tint (was effectively invisible white) === */
html body .grippy-dietician-dashboard .grippy-bcal-cell[data-date]:hover {
    background: rgba(148, 165, 163, 0.18) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* === Centered Calendar Day Modal === */
.grippy-cal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: Inter, system-ui, sans-serif;
}
.grippy-cal-modal {
    background: #fff;
    border-radius: 18px;
    padding: 24px 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    box-sizing: border-box;
    color: #0F172A;
}
.grippy-cal-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F1F5F9;
}
.grippy-cal-modal-head h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.3;
}
.grippy-cal-modal-close {
    background: transparent;
    border: 0;
    color: #64748B;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
}
.grippy-cal-modal-section {
    margin-bottom: 18px;
}
.grippy-cal-modal-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94A5A3;
    margin-bottom: 8px;
}
.grippy-cal-modal-empty {
    padding: 14px;
    text-align: center;
    color: #94A5A3;
    font-size: 13px;
    background: #F8FAFC;
    border-radius: 8px;
}
.grippy-cal-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.grippy-cal-modal-item {
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E4E7EB;
    border-radius: 8px;
    /* Flex with wrap so the Restore/Remove button drops below when the
       row gets tight, instead of forcing a horizontal scrollbar under
       the whole popover. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
}
.grippy-cal-modal-item > .grippy-cal-modal-time { flex: 0 0 auto; }
.grippy-cal-modal-item > .grippy-cal-modal-client { flex: 1 1 80px; min-width: 0; }
.grippy-cal-modal-item > .grippy-btn { flex: 0 0 auto; white-space: nowrap; }
.grippy-cal-modal-time {
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
}
.grippy-cal-modal-client {
    color: #475569;
}
.grippy-cal-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.grippy-cal-modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.grippy-cal-modal-field span {
    font-size: 11px;
    font-weight: 600;
    color: #94A5A3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.grippy-cal-modal-field input[type="time"] {
    padding: 9px 12px;
    border: 1px solid #E4E7EB;
    border-radius: 8px;
    font-size: 13px;
    color: #0F172A;
    background: #fff;
    transition: all 0.15s ease;
}
.grippy-cal-modal-field input[type="time"]:focus {
    outline: none;
    border-color: #94A5A3;
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.15);
}
.grippy-cal-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
    flex-wrap: wrap;
}
.grippy-cal-modal .grippy-btn {
    min-height: 40px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}
.grippy-cal-modal .grippy-btn--secondary {
    background: #94A5A3 !important;
    color: #fff !important;
    border: 1px solid #94A5A3 !important;
}
.grippy-cal-modal .grippy-btn--secondary:hover {
    background: #7B8C8A !important;
    border-color: #7B8C8A !important;
}
.grippy-cal-modal .grippy-btn--outline-danger {
    background: #fff !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
}
.grippy-cal-modal .grippy-btn--outline-danger:hover {
    background: #FEF2F2 !important;
    border-color: #DC2626 !important;
}
.grippy-cal-modal .grippy-btn--ghost {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #E4E7EB !important;
}
.grippy-cal-modal .grippy-btn--ghost:hover {
    background: #F8FAFC !important;
    border-color: #94A5A3 !important;
}

@media (max-width: 540px) {
    .grippy-cal-modal-row { grid-template-columns: 1fr 1fr; }
    .grippy-cal-modal-row .grippy-btn { grid-column: 1 / -1; }
    .grippy-cal-modal-actions { flex-direction: column-reverse; }
    .grippy-cal-modal-actions .grippy-btn { width: 100%; }
}

/* ============================================================
   v3.4.66 — Force the panel to be the white box, and the title
   inside it (not the title styled as the box). The schedule
   structure was inverted.
   ============================================================ */

/* The TAB CONTENT is the WHITE BOX. Maximum specificity. */
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-schedule"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-messages"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-profile"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-clients"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-reviews"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-availability"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-google"],
html body .grippy-dietician-dashboard .grippy-tab-content[id="grippy-tab-documents"] {
    background: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 26px 28px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The TITLE is just a heading INSIDE that box: no bg, no border
   except a bottom divider, no radius, no shadow. */
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-tab-panel-title,
html body .grippy-dietician-dashboard .grippy-tab-content > h2.grippy-tab-panel-title {
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 22px 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    line-height: 1.2 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Schedule table wrapper — fully transparent so the table sits
   directly inside the panel with no second frame */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Messages: same — the embedded shell is fully flat inside the panel */
html body .grippy-dietician-dashboard #grippy-tab-messages #grippy-messages-embedded,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell,
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-shell > div {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Keep just one subtle vertical divider between threads list and active thread */
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-threads {
    border-right: 1px solid #F1F5F9 !important;
    padding-right: 14px !important;
}
html body .grippy-dietician-dashboard #grippy-tab-messages .grippy-msg-thread {
    padding-left: 14px !important;
}

/* ============================================================
   v3.4.68 — Make My Schedule visually identical to the other
   tabs: clean borderless list with subtle row dividers, same
   color palette and spacing as Profile / Documents / etc.
   ============================================================ */

/* Drop ALL cell grid borders — only subtle row dividers remain */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Header row: same subtle bg as other tabs use, no side borders */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    color: #94A5A3 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    padding: 12px 14px !important;
}

/* Body cells: NO vertical borders, only thin row divider underneath */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 16px 14px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #0F172A !important;
}

/* Last row no divider (panel's own padding handles the bottom) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Row hover for a soft interactive feel (matches client list patterns) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
    transition: background 0.15s ease !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:hover td {
    background: #F8FAFC !important;
}

/* Date cell: bold, slate-900 (matches the rest of the dashboard's emphasis) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* Action buttons stay tight + centered (matches the Profile/Documents button style) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    line-height: 1 !important;
}

/* ============================================================
   v3.4.69 — Schedule: title inside outer panel + inner Excel-
   style bordered table box with rounded edges.
   ============================================================ */

/* Inner table box: rounded edges, full Excel grid */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    width: 100% !important;
}

html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Every cell: 1px slate-300 borders on all four sides (Excel grid) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #CBD5E1 !important;
    padding: 14px 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #fff !important;
}

/* Outer edges: drop the cell border that touches the wrapper edge so the
   wrapper's border is the visible outer frame (no double line at the perimeter) */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td {
    border-top: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child {
    border-left: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:last-child,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:last-child {
    border-right: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Header row: subtle bg + label styling */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F1F5F9 !important;
    color: rgb(71, 85, 105) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Date cell stays bold for visual anchor */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* Subtle row hover */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:hover td {
    background: #F8FAFC !important;
}

/* Action buttons stay tight + centered */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    line-height: 1 !important;
}

/* ============================================================
   v3.4.70 — My Schedule = exactly like Reviews. ONE outer
   white panel containing title + divider + clean borderless
   list. No inner Excel grid box.
   ============================================================ */

/* Schedule tab content panel — white box like Reviews has */
html body .grippy-dietician-dashboard .grippy-tab-content#grippy-tab-schedule,
html body .grippy-dietician-dashboard #grippy-tab-schedule {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 16px !important;
    padding: 26px 28px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Inner table-wrap: REMOVE the inner box — fully transparent */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Table itself: NO outer border, no radius, no bg */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Header row: subtle bottom divider, NO left/right/top borders */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    color: #94A5A3 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    padding: 14px 16px !important;
}

/* Body cells: NO vertical borders, ONLY a thin row divider underneath */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 16px !important;
    font-size: 14px !important;
    color: #0F172A !important;
}

/* Last row: no bottom divider */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Date cell bold for emphasis */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* Subtle row hover */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
    transition: background 0.15s ease !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:hover td {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
}

/* Action buttons stay tight + centered */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    line-height: 1 !important;
}

/* ============================================================
   v3.4.71 — Schedule = client Completed pattern: outer white
   panel + inner bordered Excel-style table box.
   ============================================================ */

/* Outer panel stays the white box (already correct from v3.4.70) */

/* === Inner bordered table box (matches client Completed table) === */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    width: 100% !important;
}

/* Table fills the wrap, no its own border */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Every cell: 1px slate border on all four sides — Excel grid */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #E4E7EB !important;
    padding: 14px 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #fff !important;
}

/* Outer perimeter: drop the cell border on the wrap edge so the
   wrap's outer border is the only visible outer line */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr:first-child td {
    border-top: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:first-child,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:first-child {
    border-left: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr td:last-child,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tr th:last-child {
    border-right: 0 !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Header row: subtle bg + label styling */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: rgb(71, 85, 105) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Date cell stays bold for emphasis */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody td:first-child {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* Row hover */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr {
    transition: background 0.15s ease !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table tbody tr:hover td {
    background: #F8FAFC !important;
}

/* Action buttons stay tight + centered */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-actions .grippy-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    line-height: 1 !important;
}

/* ============================================================
   v3.4.72 — Visible column dividers + clean close button on
   calendar modal. Also: prep for theme-palette inheritance.
   ============================================================ */

/* === Schedule table: darker visible vertical column dividers === */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border: 1px solid #CBD5E1 !important;  /* slate-300, more visible */
    padding: 14px 16px !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #fff !important;
}
/* Outer wrap matches the darker outer border too */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    border: 1px solid #CBD5E1 !important;
}

/* Header row: subtle bg + slate-600 labels */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: #F1F5F9 !important;
    color: rgb(71, 85, 105) !important;
    font-weight: 700 !important;
}

/* === Calendar modal close button: round sage with no red focus ring === */
.grippy-cal-modal-close,
.grippy-cal-modal .grippy-cal-modal-close {
    background: #94A5A3 !important;
    background-color: #94A5A3 !important;
    color: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    transition: background 0.15s ease !important;
}
.grippy-cal-modal-close:hover,
.grippy-cal-modal .grippy-cal-modal-close:hover {
    background: #7B8C8A !important;
    background-color: #7B8C8A !important;
}
/* Kill the browser's default red/pink focus ring */
.grippy-cal-modal-close:focus,
.grippy-cal-modal-close:focus-visible,
.grippy-cal-modal .grippy-cal-modal-close:focus,
.grippy-cal-modal .grippy-cal-modal-close:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(148, 165, 163, 0.3) !important;
    border: 0 !important;
}

/* v3.4.73 — Fix today's-date hover (don't lighten the sage fill) */
html body .grippy-dietician-dashboard .grippy-bcal-cell.is-today[data-date]:hover,
html body .grippy-client-dashboard .grippy-bcal-cell.is-today[data-date]:hover {
    background: linear-gradient(135deg, #7B8C8A 0%, #64748B 100%) !important;
    box-shadow: 0 3px 10px rgba(148, 165, 163, 0.45) !important;
    border-radius: 8px !important;
}
html body .grippy-dietician-dashboard .grippy-bcal-cell.is-today[data-date]:hover .grippy-bcal-daynum,
html body .grippy-client-dashboard .grippy-bcal-cell.is-today[data-date]:hover .grippy-bcal-daynum {
    color: #fff !important;
}
/* Non-today cell hover keeps the soft sage tint already set */

/* ============================================================
   v3.4.75 — White-label: dashboard now uses theme CSS variables
   so admin's Theme & Colors picks flow into every visible element.
   Variables are output by class-grippy-public.php::build_theme_css.
   ============================================================ */

/* === Header card uses theme bg/border === */
html body .grippy-dietician-dashboard .grippy-dash-header,
html body .grippy-client-dashboard .grippy-dash-header {
    background: linear-gradient(135deg, var(--grippy-card-bg, #fff) 0%, rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.04) 100%) !important;
    border-color: var(--grippy-border, #E5E7EB) !important;
}
html body .grippy-dietician-dashboard .grippy-credit-pill,
html body .grippy-client-dashboard .grippy-credit-pill {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.12) !important;
    border-color: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.25) !important;
}

/* === Header action buttons use theme === */
html body .grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--primary,
html body .grippy-client-dashboard .grippy-dash-header-actions .grippy-btn--primary,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-btn--primary {
    background: var(--grippy-primary, #94A5A3) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-btn-text, #fff) !important;
}
html body .grippy-dietician-dashboard .grippy-dash-header-actions .grippy-btn--primary:hover,
html body .grippy-client-dashboard .grippy-dash-header-actions .grippy-btn--primary:hover,
html body .grippy-dietician-dashboard .grippy-tab-content .grippy-btn--primary:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
}

/* === Left nav active tab uses theme primary === */
html body .grippy-dietician-dashboard .grippy-dash-nav .grippy-tab-btn.active,
html body .grippy-client-dashboard .grippy-dash-nav .grippy-tab-btn.active {
    background: linear-gradient(135deg, var(--grippy-primary, #94A5A3) 0%, var(--grippy-primary-dark, #7B8C8A) 100%) !important;
    box-shadow: 0 2px 6px rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.3) !important;
}

/* === Calendar today cell uses theme primary === */
html body .grippy-dietician-dashboard .grippy-bcal-cell.is-today,
html body .grippy-client-dashboard .grippy-bcal-cell.is-today {
    background: linear-gradient(135deg, var(--grippy-primary, #94A5A3) 0%, var(--grippy-primary-dark, #7B8C8A) 100%) !important;
    box-shadow: 0 2px 6px rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.3) !important;
}
html body .grippy-dietician-dashboard .grippy-bcal-cell.is-today[data-date]:hover,
html body .grippy-client-dashboard .grippy-bcal-cell.is-today[data-date]:hover {
    background: linear-gradient(135deg, var(--grippy-primary-dark, #7B8C8A) 0%, var(--grippy-text, #64748B) 100%) !important;
    box-shadow: 0 3px 10px rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.45) !important;
}
html body .grippy-dietician-dashboard .grippy-bcal-cell[data-date]:hover {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.18) !important;
}

/* === Schedule table header + outer border use theme === */
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-table-wrap {
    border-color: var(--grippy-border, #E5E7EB) !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table th,
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table td {
    border-color: var(--grippy-border, #E5E7EB) !important;
}
html body .grippy-dietician-dashboard #grippy-tab-schedule .grippy-dashboard-table thead th {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.06) !important;
}

/* === Sidebar widgets use theme === */
html body .grippy-dietician-dashboard .grippy-clients-widget,
html body .grippy-dietician-dashboard .grippy-my-dietician-card,
html body .grippy-client-dashboard .grippy-my-dietician-card {
    background: linear-gradient(165deg, var(--grippy-card-bg, #fff) 0%, rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.04) 100%) !important;
    border-color: var(--grippy-border, #E5E7EB) !important;
}

/* === Calendar block modal close + buttons use theme === */
.grippy-cal-modal-close {
    background: var(--grippy-primary, #94A5A3) !important;
    background-color: var(--grippy-primary, #94A5A3) !important;
}
.grippy-cal-modal-close:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
}
.grippy-cal-modal .grippy-btn--secondary {
    background: var(--grippy-primary, #94A5A3) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-btn-text, #fff) !important;
}
.grippy-cal-modal .grippy-btn--secondary:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
}

/* === Owner banner gradient + draft variant use theme === */
.grippy-pp2-owner-banner {
    background: linear-gradient(135deg, rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.15) 0%, rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.05) 100%) !important;
    border-color: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.4) !important;
}
.grippy-pp2-owner-banner-cta {
    background: var(--grippy-primary, #94A5A3) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}
.grippy-pp2-owner-banner-cta:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
}

/* === Stat cards primary icon tile uses theme === */
.grippy-dietician-dashboard .grippy-stat-card--primary .grippy-stat-card-icon {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.12) !important;
    color: var(--grippy-primary, #94A5A3) !important;
}

/* === Active filter pill (Bookings: Upcoming/Meetings/Completed) === */
html body .grippy-client-dashboard .grippy-bookings-filter-pill.is-active {
    background: var(--grippy-primary, #94A5A3) !important;
    background-color: var(--grippy-primary, #94A5A3) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-btn-text, #fff) !important;
}

/* === Booking flow preference shortcut + Welcome cards === */
.grippy-pref-card--primary { border-color: var(--grippy-primary, #94A5A3) !important; }
.grippy-pref-avatar {
    background: linear-gradient(135deg, var(--grippy-primary, #94A5A3) 0%, var(--grippy-primary-dark, #7B8C8A) 100%) !important;
}
.grippy-pref-cta {
    background: var(--grippy-primary, #94A5A3) !important;
}
.grippy-pref-card:hover .grippy-pref-cta {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
}


/* ========================================================================
   v3.4.89 — Client dashboard polish
   ======================================================================== */

/* 1. Join Meeting hover/visited fix (kill green link defaults) */
.grippy-client-dashboard a.grippy-btn--primary,
.grippy-client-dashboard a.grippy-btn--primary:link,
.grippy-client-dashboard a.grippy-btn--primary:visited,
.grippy-client-dashboard a.grippy-btn--primary:hover,
.grippy-client-dashboard a.grippy-btn--primary:focus,
.grippy-client-dashboard a.grippy-btn--primary:active {
    color: #fff !important;
    text-decoration: none !important;
}
.grippy-client-dashboard a.grippy-btn--primary:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
    color: #fff !important;
}
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn,
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn:link,
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn:visited,
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn:hover {
    color: #fff !important;
    text-decoration: none !important;
}
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn--outline,
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn--ghost {
    color: var(--grippy-primary, #94A5A3) !important;
}
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn--outline:hover,
.grippy-client-dashboard .grippy-meeting-card a.grippy-btn--ghost:hover {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
}

/* 2. Upcoming bookings table actions — single row, breathable */
.grippy-client-dashboard .grippy-table-actions {
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 280px;
}
.grippy-client-dashboard .grippy-table-actions .grippy-btn {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    min-height: 34px !important;
    border-radius: 8px !important;
}
.grippy-client-dashboard .grippy-table-actions a.grippy-btn--primary { color: #fff !important; }
.grippy-client-dashboard .grippy-table-actions .grippy-btn--outline-danger {
    background: #fff !important;
    color: var(--grippy-danger, #DC2626) !important;
    border: 1.5px solid var(--grippy-danger, #DC2626) !important;
}
.grippy-client-dashboard .grippy-table-actions .grippy-btn--outline-danger:hover {
    background: var(--grippy-danger, #DC2626) !important;
    color: #fff !important;
}
.grippy-client-dashboard .grippy-table-actions .grippy-btn--ghost {
    background: #F8FAFC !important;
    color: var(--grippy-text, #0F172A) !important;
    border: 1.5px solid #E5E7EB !important;
}
.grippy-client-dashboard .grippy-table-actions .grippy-btn--ghost:hover {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}

/* 3. Meetings tab card spacing */
.grippy-client-dashboard .grippy-meeting-card {
    grid-template-columns: 160px 1fr auto !important;
    gap: 20px !important;
    padding: 16px 20px !important;
}
.grippy-client-dashboard .grippy-meeting-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.grippy-client-dashboard .grippy-meeting-card .grippy-btn {
    padding: 8px 16px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.grippy-client-dashboard .grippy-meeting-link-input,
.grippy-client-dashboard .grippy-meeting-link {
    margin-bottom: 6px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-family: ui-monospace, monospace !important;
    font-size: 12px !important;
    color: #475569 !important;
}

/* 4. Dietician sidebar card — no top blank/coral strip */
html body .grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-card,
html body .grippy-client-dashboard .grippy-my-dietician-card {
    background: #fff !important;
    border: 1px solid var(--grippy-border, #E5E7EB) !important;
    padding-top: 20px !important;
    position: relative;
    overflow: hidden;
}
html body .grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-card::before,
html body .grippy-client-dashboard .grippy-my-dietician-card::before {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
}

/* 5. Sidebar dietician action buttons restyle */
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions .grippy-btn,
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a.grippy-btn,
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions button.grippy-btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn {
    background: var(--grippy-primary, #94A5A3) !important;
    border: 1.5px solid var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href*="dietician-profile"] {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.10) !important;
    border: 1.5px solid rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.25) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href*="dietician-profile"]:hover {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.18) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href="/dieticians/"] {
    background: #fff !important;
    border: 1.5px solid #E5E7EB !important;
    color: var(--grippy-text-muted, #64748B) !important;
    font-weight: 500 !important;
}
.grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href="/dieticians/"]:hover {
    background: #F8FAFC !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}


/* ========================================================================
   v3.4.90 — Hard overrides over the v3.0.5+ sidebar gradient + actions
   ======================================================================== */

/* 1. Kill the 60px gradient banner ABOVE the dietician card.
      The earlier rule at line 11177 painted a coral-tinted gradient as
      ::before, then 11353 reserved 64px padding-top for it. Both go. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block:not(:empty) {
    padding-top: 20px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-my-dietician-block:not(:empty)::before {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
}

/* 2. Upcoming-bookings actions cell — force a wider cell so 3 buttons
      stay on ONE row instead of Cancel wrapping below. We bump min-width
      and tighten button padding so all three fit. */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* Make the Actions column wide enough so the row never has to wrap.
   The dashboard table only has 5 cols; bumping width on the Actions
   header + cell propagates via table layout. */
body .grippy-client-dashboard#grippy-client-dashboard table.grippy-dashboard-table th:last-child,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table th:nth-child(5),
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td:nth-child(5) {
    width: 320px !important;
    min-width: 320px !important;
    text-align: right !important;
}
@media (max-width: 768px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table th:nth-child(5),
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td:nth-child(5) {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* 3. Re-affirm the action button colors (still beating the sage-bg rules) */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions a.grippy-btn--primary {
    color: #fff !important;
    text-decoration: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions a.grippy-btn--primary:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    color: #fff !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn--ghost {
    background: #F8FAFC !important;
    color: var(--grippy-text, #0F172A) !important;
    border: 1.5px solid #E5E7EB !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn--ghost:hover {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn--outline-danger {
    background: #fff !important;
    color: var(--grippy-danger, #DC2626) !important;
    border: 1.5px solid var(--grippy-danger, #DC2626) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn--outline-danger:hover {
    background: var(--grippy-danger, #DC2626) !important;
    color: #fff !important;
}

/* 4. Sidebar action buttons — full-width stack with proper styling */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 14px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions > * {
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn {
    background: var(--grippy-primary, #94A5A3) !important;
    border: 1.5px solid var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn:hover {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href*="dietician-profile"] {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.12) !important;
    border: 1.5px solid rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.30) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href*="dietician-profile"]:hover {
    background: rgba(var(--grippy-primary-rgb, 148, 165, 163), 0.20) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href="/dieticians/"] {
    background: #fff !important;
    border: 1.5px solid #E5E7EB !important;
    color: var(--grippy-text-muted, #64748B) !important;
    font-weight: 500 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions a[href="/dieticians/"]:hover {
    background: #F8FAFC !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}


/* ========================================================================
   v3.4.91 — Meetings tab redesign + sidebar Book Session button
   ======================================================================== */

/* ---------- Meetings tab cards ---------- */
body .grippy-client-dashboard .grippy-meetings-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
body .grippy-client-dashboard .grippy-meeting-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 96px 1.2fr 1.4fr !important;
    gap: 24px !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 18px 22px 18px 30px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    overflow: hidden !important;
}
body .grippy-client-dashboard .grippy-meeting-card:hover {
    border-color: var(--grippy-primary, #94A5A3) !important;
    box-shadow: 0 4px 18px rgba(148,165,163,.18) !important;
    transform: translateY(-1px) !important;
}
/* Vertical sage accent strip on the left */
body .grippy-client-dashboard .grippy-meeting-card-accent {
    position: absolute !important;
    top: 14px !important; left: 14px !important; bottom: 14px !important;
    width: 4px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, var(--grippy-primary, #94A5A3) 0%, var(--grippy-primary-dark, #7B8C8A) 100%) !important;
}

/* LEFT: date block */
body .grippy-client-dashboard .grippy-meeting-when {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
body .grippy-client-dashboard .grippy-meeting-date-day {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: var(--grippy-primary, #94A5A3) !important;
    margin-bottom: 4px !important;
}
body .grippy-client-dashboard .grippy-meeting-date-num {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1 !important;
}
body .grippy-client-dashboard .grippy-meeting-date-mo {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

/* CENTER: dietitian + time */
body .grippy-client-dashboard .grippy-meeting-who {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
}
body .grippy-client-dashboard .grippy-meeting-who-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
body .grippy-client-dashboard .grippy-meeting-avatar {
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--grippy-primary, #94A5A3), var(--grippy-primary-dark, #7B8C8A)) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
body .grippy-client-dashboard .grippy-meeting-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
body .grippy-client-dashboard .grippy-meeting-label {
    font-size: 10.5px !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
body .grippy-client-dashboard .grippy-meeting-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    margin-top: 2px !important;
}
body .grippy-client-dashboard .grippy-meeting-meta {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
body .grippy-client-dashboard .grippy-meeting-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}
body .grippy-client-dashboard .grippy-meeting-meta-item svg { color: var(--grippy-primary, #94A5A3) !important; }

/* When-pill: Today / Tomorrow / In N days */
body .grippy-client-dashboard .grippy-meeting-when-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.grippy-meeting-when-pill--today {
    background: linear-gradient(135deg, var(--grippy-primary, #94A5A3), var(--grippy-primary-dark, #7B8C8A)) !important;
    color: #fff !important;
}
.grippy-meeting-when-pill--soon {
    background: #FFF7ED !important; color: #C2410C !important;
    border: 1px solid #FED7AA !important;
}
.grippy-meeting-when-pill--upcoming {
    background: rgba(148,165,163,.12) !important; color: var(--grippy-primary-dark, #7B8C8A) !important;
}
.grippy-meeting-when-pill--past {
    background: #F1F5F9 !important; color: #64748B !important;
}

/* RIGHT: meeting URL + action buttons.
   Both rows must share the same content-box width so their right edges
   line up perfectly. Force every direct child to fill 100% of the column. */
body .grippy-client-dashboard .grippy-meeting-link {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
}
body .grippy-client-dashboard .grippy-meeting-link > * {
    width: 100% !important;
    box-sizing: border-box !important;
}
body .grippy-client-dashboard .grippy-meeting-url-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-width: 0 !important;
    text-align: center !important;
}
body .grippy-client-dashboard .grippy-meeting-url {
    text-align: center !important;
    flex: 0 1 auto !important;
}
body .grippy-client-dashboard .grippy-meeting-url-icon {
    color: var(--grippy-primary, #94A5A3) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
}
body .grippy-client-dashboard .grippy-meeting-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    color: #334155 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body .grippy-client-dashboard .grippy-meeting-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}
body .grippy-client-dashboard .grippy-meeting-actions .grippy-btn {
    padding: 8px 16px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
body .grippy-client-dashboard .grippy-meeting-actions .grippy-copy-meet {
    padding: 8px 12px !important;
    background: #fff !important;
    border: 1.5px solid #E5E7EB !important;
    color: #64748B !important;
}
body .grippy-client-dashboard .grippy-meeting-actions .grippy-copy-meet:hover {
    background: var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
}
body .grippy-client-dashboard .grippy-meeting-actions a.grippy-btn--primary,
body .grippy-client-dashboard .grippy-meeting-actions a.grippy-btn--primary:link,
body .grippy-client-dashboard .grippy-meeting-actions a.grippy-btn--primary:visited,
body .grippy-client-dashboard .grippy-meeting-actions a.grippy-btn--primary:hover {
    color: #fff !important;
    text-decoration: none !important;
}

body .grippy-client-dashboard .grippy-meetings-note {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 14px 4px 0 !important;
    padding: 10px 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}
body .grippy-client-dashboard .grippy-meetings-note svg { color: var(--grippy-primary, #94A5A3) !important; }
body .grippy-client-dashboard .grippy-meetings-empty {
    text-align: center !important;
    padding: 50px 20px !important;
    color: #94A3B8 !important;
}
body .grippy-client-dashboard .grippy-meetings-empty-icon { color: var(--grippy-primary, #94A5A3) !important; }

/* Mobile stack */
@media (max-width: 768px) {
    body .grippy-client-dashboard .grippy-meeting-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 18px 18px 18px 26px !important;
    }
    body .grippy-client-dashboard .grippy-meeting-when {
        flex-direction: row !important;
        gap: 10px !important;
        align-items: baseline !important;
        text-align: left !important;
    }
}

/* ---------- Sidebar Book Session button ---------- */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-book-btn {
    background: var(--grippy-primary, #94A5A3) !important;
    border: 1.5px solid var(--grippy-primary, #94A5A3) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(148,165,163,.25) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-book-btn:hover,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-book-btn:focus {
    background: var(--grippy-primary-dark, #7B8C8A) !important;
    border-color: var(--grippy-primary-dark, #7B8C8A) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(148,165,163,.35) !important;
}

/* Demote Message to "secondary" so Book stands out as primary */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn {
    background: rgba(148,165,163,.10) !important;
    border: 1.5px solid rgba(148,165,163,.30) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-msg-btn:hover {
    background: rgba(148,165,163,.20) !important;
    border-color: var(--grippy-primary, #94A5A3) !important;
    color: var(--grippy-primary-dark, #7B8C8A) !important;
}


/* ========================================================================
   v3.4.93 — Center notes, align middle column, mobile pass
   ======================================================================== */

/* 1. Center the meetings note */
body .grippy-client-dashboard .grippy-meetings-note {
    justify-content: center !important;
    text-align: center !important;
}

/* 2. Lift the middle column so its first card aligns with the left + right
      sidebars. The .grippy-tab-content wrapper had ~18px of top margin /
      padding that the side columns don't. Zero it out. */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
    align-self: start !important;
    gap: 0 !important;
    row-gap: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main > .grippy-tab-content,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main .grippy-tab-content:first-child,
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ----------------------------------------------------------------------
   3. Mobile pass — phones (<= 640px) and small tablets (<= 900px)
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* Stack columns: left nav first, then main, then right sidebar last */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 12px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
        position: static !important;
        order: 2 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-main {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Left nav becomes a horizontal scroll-strip on mobile to save vertical space */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-left {
        order: 0 !important;
    }
}

@media (max-width: 640px) {
    /* Page header / dashboard summary */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-header,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-greet {
        padding: 16px !important;
        text-align: left !important;
    }

    /* Tabs row (Upcoming / Meetings / Completed): smaller pills, scroll-x */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-bk-tabs,
    body .grippy-client-dashboard#grippy-client-dashboard [class*="booking-tabs"],
    body .grippy-client-dashboard#grippy-client-dashboard [class*="bookings-pills"] {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-bk-tabs::-webkit-scrollbar { display: none; }

    /* Bookings table → card-style stack (each row becomes its own card) */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table thead,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tr,
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td {
        display: block !important;
        width: 100% !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table thead { display: none !important; }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tr {
        background: #fff !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td {
        padding: 6px 0 !important;
        border: 0 !important;
    }
    /* data-label trick for stacked cells */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .04em;
        display: inline-block;
        margin-right: 6px;
    }
    /* Action buttons cell on mobile — wrap, full-width buttons, no min-width */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions .grippy-btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 38px !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions a.grippy-btn--primary {
        flex: 1 1 100% !important; /* Join Meeting takes full row, prominent */
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table th:nth-child(5),
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table td:nth-child(5) {
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    /* Meetings card → vertical stack with date + content + actions stacked */
    body .grippy-client-dashboard .grippy-meeting-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 18px 18px 18px 24px !important;
    }
    body .grippy-client-dashboard .grippy-meeting-when {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 8px !important;
        text-align: left !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #F1F5F9 !important;
    }
    body .grippy-client-dashboard .grippy-meeting-date-num {
        font-size: 24px !important;
    }
    body .grippy-client-dashboard .grippy-meeting-date-day,
    body .grippy-client-dashboard .grippy-meeting-date-mo {
        font-size: 11px !important;
    }
    body .grippy-client-dashboard .grippy-meeting-actions {
        flex-wrap: wrap !important;
    }
    body .grippy-client-dashboard .grippy-meeting-actions a.grippy-btn--primary {
        flex: 1 1 100% !important;
        justify-content: center !important;
    }

    /* Sidebar "Your Dietician" card on mobile — compact horizontal */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-card {
        flex-direction: column !important;
        text-align: center !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side .grippy-my-dietician-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Calendar widget on mobile: cap width so the day numbers don't overflow */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-mini-calendar,
    body .grippy-client-dashboard#grippy-client-dashboard [class*="calendar"] {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Top stats row: My Dashboard + credits + buttons → stack vertically */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-greet,
    body .grippy-client-dashboard#grippy-client-dashboard [class*="dash-header"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard [class*="dash-header"] > * {
        width: 100% !important;
    }

    /* Messages: stack conversation list on top of the open thread */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-msg-shell,
    body .grippy-client-dashboard#grippy-client-dashboard [class*="msg-shell"] {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-msg-threads,
    body .grippy-client-dashboard#grippy-client-dashboard [class*="msg-threads"] {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
}

/* Tablet sweet spot: keep two-column layout but tighter */
@media (min-width: 641px) and (max-width: 1024px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-body {
        grid-template-columns: 1fr !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dash-side {
        position: static !important;
        order: 2 !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-meeting-card {
        grid-template-columns: 80px 1fr 1fr !important;
        gap: 16px !important;
    }
}

/* ======================================================================
   v3.4.94 — Dietitian dashboard polish
   ====================================================================== */

/* 1. Center Documents grid */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-card {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-card-title,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-card-subtitle {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-doc-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-doc-card {
    flex: 0 1 360px !important;
    max-width: 380px !important;
}

/* 2. Center Clients grid */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-clients .grippy-clients-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card {
    flex: 0 1 320px !important;
    max-width: 360px !important;
    min-width: 260px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card:hover {
    box-shadow: 0 6px 20px rgba(15,23,42,.08) !important;
    transform: translateY(-1px) !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-card-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 22px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-info { width: 100% !important; }
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-name {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #0F172A !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-meta {
    font-size: 13px !important;
    color: #64748B !important;
    margin-top: 2px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 6px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-card-actions .grippy-btn {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-message {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    border: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-message:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 4px 12px rgba(148,165,163,.35) !important;
}

/* 3. Messages tab — keep the right "My Clients" sidebar visible.
   (Earlier v3.4.94 hid it; v3.4.95 reverts that — sidebar stays in messages.) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-messages,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-messages-embedded {
    width: 100% !important;
    max-width: 100% !important;
}

/* 4. Polish Messages chrome */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-shell {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    min-height: 600px !important;
    height: calc(100vh - 320px) !important;
    max-height: 760px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-threads {
    background: #F8FAFC !important;
    border-right: 1px solid #E5E7EB !important;
    overflow-y: auto !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-threads-head {
    padding: 18px 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid #E5E7EB !important;
    background: #fff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread {
    cursor: pointer !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    transition: background .15s ease !important;
    border: 1px solid transparent !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread:hover {
    background: #fff !important;
    border-color: #E5E7EB !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread.is-active {
    background: #fff !important;
    border-color: #94A5A3 !important;
    box-shadow: 0 2px 8px rgba(148,165,163,.18) !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread-name {
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 14px !important;
    flex: 1 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-unread-badge {
    background: #94A5A3 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread-snip {
    font-size: 13px !important;
    color: #64748B !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-thread-when {
    font-size: 11px !important;
    color: #94A3B8 !important;
    margin-top: 2px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-pane {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    background: #fff !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-pane-head {
    padding: 18px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FAFBFC !important;
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-pane-head strong {
    font-size: 16px !important;
    color: #0F172A !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: #FAFBFC !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-bubble {
    max-width: 70% !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
    align-self: flex-start !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-bubble.is-mine {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    border-color: transparent !important;
    align-self: flex-end !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-bubble.is-mine .grippy-msg-meta {
    color: rgba(255,255,255,.85) !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-meta {
    font-size: 11px !important;
    color: #94A3B8 !important;
    margin-top: 4px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose {
    border-top: 1px solid #E5E7EB !important;
    padding: 14px 18px !important;
    background: #fff !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-end !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose textarea {
    flex: 1 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font: inherit !important;
    resize: none !important;
    min-height: 44px !important;
    background: #F8FAFC !important;
    transition: border-color .15s ease, background .15s ease !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose textarea:focus {
    outline: none !important;
    border-color: #94A5A3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,.18) !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-attach-btn {
    width: 40px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F1F5F9 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-attach-btn:hover {
    background: #E2E8F0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose .grippy-btn--primary {
    min-height: 44px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    border: 0 !important;
    color: #fff !important;
}

/* 5. Mobile pass for dietician dashboard */
@media (max-width: 900px) {
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dash-body,
    body .grippy-dietician-dashboard#grippy-dietician-dashboard.is-tab-messages .grippy-dash-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 12px !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-shell {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 520px !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-threads {
        max-height: 220px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #E5E7EB !important;
    }
}
@media (max-width: 640px) {
    body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-clients .grippy-client-card,
    body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-documents .grippy-doc-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-card-actions {
        flex-direction: column !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-client-card-actions .grippy-btn {
        width: 100% !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-bubble {
        max-width: 88% !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-compose {
        padding: 10px 12px !important;
    }
}


/* ======================================================================
   v3.4.95 — Bookings filter pills: a touch more breathing room above
   so they sit visually lower under the section title, matching the
   spacing on the Meetings tab.
   ====================================================================== */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-bookings-filter {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    padding-top: 4px !important;
}
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-bookings-filter {
        margin-top: 12px !important;
        margin-bottom: 14px !important;
    }
}

/* Client dashboard "Messages" panel title — matches dietitian dashboard */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-messages > .grippy-tab-panel-title {
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 22px 0 !important;
    line-height: 1.2 !important;
    width: 100% !important;
}


/* ======================================================================
   v3.4.97 — Polish three things
   1. Tighten the empty space below the dietitian Messages shell
   2. Make "My Files" title match the other tab titles (h2 size)
   3. My Schedule table: vertical column dividers + right-align actions
   ====================================================================== */

/* 1. Messages shell auto-sizes to its content (min 480px) instead of
      forcing a 600–760px box that leaves blank space underneath. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-shell {
    height: auto !important;
    min-height: 480px !important;
    max-height: none !important;
}
/* Cap the conversation list scroll height so really long threads don't
   stretch the dashboard column unreasonably. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-pane {
    max-height: 720px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-msg-list {
    max-height: 540px !important;
}

/* 2. "My Files" title — applied via the new .grippy-tab-panel-title class.
      Add a backstop selector in case anything overrides at higher specificity. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-files .grippy-files-head h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-files .grippy-files-head .grippy-help {
    text-align: center !important;
    max-width: 640px !important;
    margin: 0 auto 22px auto !important;
}

/* 3. My Schedule table — column dividers + actions alignment */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th {
    background: #F8FAFC !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #E5E7EB !important;
    text-align: center !important;
}
/* Vertical dividers between header cells (except the last) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th:not(:last-child) {
    border-right: 1px solid #E5E7EB !important;
}
/* Vertical dividers between body cells (except the last) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td {
    padding: 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td:not(:last-child) {
    border-right: 1px solid #F1F5F9 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Center the client cell content (avatar + name) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-dietician {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: center !important;
}

/* Actions column — right-align so buttons sit under the right-aligned
   ACTIONS header, gap between buttons, no wrapping on desktop. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th:last-child {
    text-align: right !important;
    padding-right: 20px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
    text-align: right !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 20px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions .grippy-btn {
    margin: 0 !important;
    white-space: nowrap !important;
    min-height: 34px !important;
}

/* Mobile: revert to the existing card-stack — kill desktop alignment that
   would conflict with the responsive transformation. */
@media (max-width: 640px) {
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th:not(:last-child),
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td:not(:last-child) {
        border-right: 0 !important;
    }
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
        justify-content: flex-start !important;
        padding-right: 0 !important;
    }
}


/* ======================================================================
   v3.4.98 — Center ACTIONS column + My Profile content (both dashboards)
   ====================================================================== */

/* 1. ACTIONS column — center the header AND the buttons under it. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th:last-child {
    text-align: center !important;
    padding-right: 16px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
    text-align: center !important;
    justify-content: center !important;
    padding-right: 0 !important;
}
@media (max-width: 640px) {
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
        justify-content: center !important;
    }
}

/* 2. My Profile (CLIENT dashboard) — center container, header, form */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor {
    max-width: 760px !important;
    margin: 0 auto !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head {
    text-align: center !important;
    margin-bottom: 18px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    text-align: center !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head .grippy-help {
    text-align: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
}
/* Center the form actions row */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-form-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
    text-align: center !important;
}
/* Section labels above the chip groups stay left-aligned for readability,
   but the form itself sits centered with breathing room. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-form {
    margin: 0 auto !important;
}

/* 3. My Profile (DIETITIAN dashboard) — center container, header, sections */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile {
    /* Center the entire profile editor inside the main column. */
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile #grippy-profile-form,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-form,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-top {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-top {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-wrap,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-publish {
    width: 100% !important;
    max-width: 540px !important;
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-label {
    justify-content: center !important;
    gap: 12px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-note {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-publish {
    display: flex !important;
    justify-content: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-photo-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-photo-actions {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
/* Inputs/labels keep left-aligned text inside (so text doesn't look weird in inputs)
   but the field block itself is centered with constrained width. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field {
    max-width: 580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field label,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field-hint {
    display: block !important;
    text-align: left !important;
}
/* Save / publish action row centered */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-save-row,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-actions,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-form-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}


/* ======================================================================
   v3.4.99 —
   • Revert My Profile layout to its original form (kept v98 over-tuned).
     We keep ONLY the centered title + subtitle text.
   • Center the ACTIONS column in the CLIENT dashboard tables (Upcoming,
     Meetings, Completed) so header and buttons align in the middle.
   • Re-confirm centering for the DIETITIAN My Schedule actions.
   ====================================================================== */

/* 1. CLIENT — revert v98 form layout overrides; keep only the title centered */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor {
    max-width: none !important;
    margin: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head {
    text-align: left !important;
    margin-bottom: 18px !important;
}
/* Title + helper stay centered (per user's request: "just move the text to the middle"). */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head h2 {
    text-align: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head .grippy-help {
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}
/* Save row goes back to flex-start (form's original behaviour). */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-form-actions {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* 2. DIETITIAN — revert v98 My Profile layout; keep only the section/title text centered */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile #grippy-profile-form,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-form,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-top {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 18px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-wrap,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-publish {
    max-width: none !important;
    width: auto !important;
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-label {
    justify-content: space-between !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-score-note {
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-publish {
    display: block !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    text-align: left !important;
}
/* Section headings (Profile Photo / Basic Info / etc.) — keep them centered. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-photo-row {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-photo-actions {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Save row reverts to default left flex. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-save-row,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-actions,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-form-actions {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* 3. CLIENT bookings (Upcoming / Meetings / Completed) — center ACTIONS */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table thead th:last-child {
    text-align: center !important;
    padding-right: 16px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions {
    text-align: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding-right: 0 !important;
}
@media (max-width: 640px) {
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-table-actions {
        justify-content: center !important;
    }
}

/* 4. DIETITIAN My Schedule — re-confirm ACTIONS center (back-stop selectors) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table thead th:last-child {
    text-align: center !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions,
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-table-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    padding-right: 0 !important;
}


/* ======================================================================
   v3.4.100 — My Profile section spacing polish (dietitian dashboard)
   • More breathing room under section titles (Basic Info, Profile Photo, …)
   • Tighter space between label + (subtitle hint) + input
   • Vertical rhythm between fields
   ====================================================================== */

body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    margin-top: 28px !important;
    padding-top: 8px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section:first-of-type {
    margin-top: 18px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    letter-spacing: -.01em !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field {
    margin-bottom: 16px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field > label {
    display: block !important;
    margin: 0 0 4px 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
}
/* The "(one-liner shown on your card)" / "(50+ characters …)" hints get a
   touch of separation from the bold label and clear breathing room before
   the input. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field-hint {
    display: block !important;
    margin: 0 0 8px 0 !important;
    font-size: 12px !important;
    color: #94A3B8 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field input,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field textarea,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field select {
    margin-top: 0 !important;
}
/* Pricing note — push it down slightly from the last field so it doesn't
   feel glued to "Years of experience". */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-pricing-note {
    margin-top: 18px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* ======================================================================
   v3.4.101 —
   • Revert v100's field-to-field spacing: only keep spacing INSIDE a field
     (label → hint → input). Field rows go back to their natural rhythm.
   • Add proper spacing between page title (h2 ".grippy-tab-panel-title")
     and the helper text below — applied consistently on both dashboards.
   ====================================================================== */

/* 1. Revert field-to-field gap and section-to-section gap on dietitian My Profile */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section:first-of-type {
    margin-top: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field {
    margin-bottom: 0 !important;
}
/* Keep spacing INSIDE a field only:
     label  ↓ 4px
     hint   ↓ 8px
     input
*/
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field > label {
    margin: 0 0 4px 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field-hint {
    margin: 0 0 8px 0 !important;
}

/* Keep section-title spacing (Basic Info → first label) — that's the
   "title to field" gap the user *did* want. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    margin: 0 0 14px 0 !important;
}

/* 2. Page title (h2) → helper subtitle gap, both dashboards.
      The h2 already has padding-bottom + border-bottom. Add margin-top
      on the helper so the subtitle sits clearly below the title line. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head h2,
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-tab-panel-title {
    margin-bottom: 18px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head .grippy-help {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Same spacing rule for the dietitian dashboard's helper texts under the
   tab title, when present. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-tab-panel-title + .grippy-help,
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-tab-panel-title + p {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ======================================================================
   v3.4.102 — Client dashboard My Profile title: match the dietitian style
   (more vertical breathing room around the underlined heading).
   ====================================================================== */

body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head h2 {
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
    margin: 22px 0 22px 0 !important;
    padding: 0 0 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}


/* ======================================================================
   v3.4.103 — Apply the polished My Profile heading style to every tab
   in the client dashboard (My Bookings, Messages, My Profile, My Files).
   ====================================================================== */

body .grippy-client-dashboard#grippy-client-dashboard .grippy-tab-content > .grippy-tab-panel-title,
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-files .grippy-files-head h2,
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head h2 {
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
    margin: 22px 0 22px 0 !important;
    padding: 0 0 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Slightly tighten the gap between the new "My Bookings" title and the
   Upcoming / Meetings / Completed pills so they sit cleanly underneath. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-bookings > .grippy-tab-panel-title {
    margin-top: 0 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-bookings .grippy-bookings-filter {
    margin-top: 8px !important;
}


/* ======================================================================
   v3.4.104 —
   • Force the polished tab-title spacing on My Bookings & Messages
     (override the v95 rule that locked them into a different margin).
   • Make My Profile section titles look professional, not generic:
     centered with a sage accent rule above the text, in uppercase
     small-caps, on BOTH the client and dietitian dashboards.
   ====================================================================== */

/* 1. Force the unified title spacing on EVERY client tab panel.
      Specificity bump: chain with both #id and class so it wins. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-bookings  > .grippy-tab-panel-title,
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-messages  > .grippy-tab-panel-title,
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile   .grippy-profile-editor-head h2,
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-files     .grippy-files-head h2 {
    display: block !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
    line-height: 1.2 !important;
    margin: 22px 0 22px 0 !important;
    padding: 0 0 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* ---------------------------------------------------------------- */
/* 2. PROFESSIONAL section titles inside My Profile.
      Pattern: short sage accent bar above + centered uppercase title.
      Applies to client (chip-group labels) AND dietitian (.grippy-profile-section h3).
      ---------------------------------------------------------------- */

/* CLIENT — the chip groups (Goals / Allergies / Dietary restrictions)
   and free-text form-group labels become the "section titles" in the
   client's My Profile flow. Center + style them like real headings. */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group {
    margin: 26px auto 18px auto !important;
    text-align: center !important;
    max-width: 720px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group-label {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #0F172A !important;
    margin: 0 0 4px 0 !important;
    position: relative !important;
    padding-top: 14px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group-label::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #94A5A3, #7A8E8B);
    margin: 0 auto 12px auto;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group .grippy-help {
    text-align: center !important;
    color: #64748B !important;
    margin: 0 auto 12px auto !important;
    font-size: 13px !important;
    max-width: 560px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-options {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-extra {
    margin-top: 12px !important;
    text-align: center !important;
}
/* Free-text labels (Interests / Anything else / DOB / Height / Weight) */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group {
    margin: 22px auto !important;
    max-width: 720px !important;
    text-align: center !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group > label {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #0F172A !important;
    margin: 0 0 12px 0 !important;
    position: relative !important;
    padding-top: 14px !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group > label::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #94A5A3, #7A8E8B);
    margin: 0 auto 12px auto;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group .grippy-form-optional {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #94A3B8 !important;
}

/* DIETITIAN — section h3 (Profile Photo / Basic Info / Specialties / etc.) */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    margin-top: 32px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section:first-of-type {
    margin-top: 14px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    display: block !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #0F172A !important;
    margin: 0 auto 18px auto !important;
    padding: 14px 0 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    position: relative !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #94A5A3, #7A8E8B);
    margin: 0 auto 12px auto;
}


/* ======================================================================
   v3.4.105 —
   • Revert v104's "fancy" section title styling (sage accent bar +
     uppercase). Section labels go back to a clean, simple form look.
   • Fix the missing row dividers in the Actions column. The td was
     turned into a flex container in v97/v99 which broke its native
     table-cell border behaviour — restore table-cell and center the
     buttons via text-align instead.
   ====================================================================== */

/* ---- 1. REVERT v104 fancy section titles ---- */

/* Client — chip groups */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group {
    margin: 0 0 18px 0 !important;
    text-align: left !important;
    max-width: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group-label {
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #0F172A !important;
    margin: 0 0 6px 0 !important;
    padding-top: 0 !important;
    position: static !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group-label::before {
    content: none !important;
    display: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-group .grippy-help {
    text-align: left !important;
    margin: -2px 0 8px 0 !important;
    max-width: none !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-options {
    justify-content: flex-start !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-chip-extra {
    margin-top: 8px !important;
    text-align: left !important;
}

/* Client — form-group labels */
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group {
    margin: 0 0 16px 0 !important;
    max-width: none !important;
    text-align: left !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group > label {
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #0F172A !important;
    margin: 0 0 6px 0 !important;
    padding-top: 0 !important;
    position: static !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-form-group > label::before {
    content: none !important;
    display: none !important;
}

/* Dietitian — section h3 */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    margin-top: 24px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section:first-of-type {
    margin-top: 8px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    display: block !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    color: #0F172A !important;
    margin: 0 0 14px 0 !important;
    padding: 0 0 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: transparent !important;
    position: static !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3::before {
    content: none !important;
    display: none !important;
}

/* ---- 2. FIX action column row dividers ---- */
/* Restore native table-cell behaviour so the bottom border draws across
   the whole row including the Actions column. Center the buttons via
   text-align (no flex on the td). */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions,
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    padding: 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions:not(:last-child),
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions:not(:last-child) {
    border-right: 1px solid #F1F5F9 !important;
}
/* Buttons inside the centred actions cell — inline with consistent gap. */
body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions .grippy-btn,
body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions .grippy-btn {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
@media (max-width: 640px) {
    /* On mobile the table collapses to cards; allow wrapping again. */
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions,
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions {
        white-space: normal !important;
        text-align: center !important;
    }
    body .grippy-client-dashboard#grippy-client-dashboard .grippy-dashboard-table tbody td.grippy-table-actions .grippy-btn,
    body .grippy-dietician-dashboard#grippy-dietician-dashboard .grippy-dashboard-table tbody td.grippy-table-actions .grippy-btn {
        margin: 4px !important;
    }
}


/* ======================================================================
   v3.4.106 — Tighten/loosen My Profile field spacing properly:
   • Small breath between the bold label ("Tagline") and its hint
     "(one-liner shown on your card)"
   • Clear gap between the input/textarea and the NEXT field's label
     ("About you", "Years of experience", …)
   ====================================================================== */

/* Field-to-field rhythm — was 0 (v101), now 18px so the next label
   doesn't sit glued to the previous input. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field {
    margin-bottom: 18px !important;
}

/* Label → hint: tiny gap so the parenthetical doesn't crash into the bold label.
   The hint is rendered INSIDE the label as a <span>, so we need block display
   plus a top margin. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field > label {
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field-hint {
    display: block !important;
    margin: 4px 0 0 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #94A3B8 !important;
    line-height: 1.3 !important;
}

/* Hint → input: 8px clearance so the input has breathing room under the hint. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field input,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field textarea,
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-field select {
    margin-top: 0 !important;
}


/* ======================================================================
   v3.4.107 — More breathing room between My Profile sections
   ("Profile Photo", "Basic Info", "Specialties", "Languages", "Education", …)
   ====================================================================== */

body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section {
    margin-top: 40px !important;
    padding-top: 8px !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section:first-of-type {
    margin-top: 18px !important;
    padding-top: 0 !important;
}
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-section h3 {
    margin: 0 0 18px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

/* The completion-bar / publish-toggle block at the very top should also
   have a clear gap before the first section starts. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-profile-top {
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

/* Give the pricing note a similar visual break above it. */
body .grippy-dietician-dashboard#grippy-dietician-dashboard #grippy-tab-profile .grippy-pricing-note {
    margin-top: 24px !important;
}


/* ======================================================================
   v3.4.108 — Divider line between the My Profile helper text and the
   first form section ("Goals — what are you hoping to achieve?").
   ====================================================================== */

body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head {
    padding-bottom: 22px !important;
    margin-bottom: 26px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
body .grippy-client-dashboard#grippy-client-dashboard #grippy-tab-profile .grippy-profile-editor-head .grippy-help {
    margin-bottom: 0 !important;
}


/* ======================================================================
   v3.4.109 — Login page polish
   • "Log in as a dietician" link gets a sage button-y look + spacing
     from the Continue button.
   • Back-arrow vertically aligned with the email pill on the password step.
   • Continue with Google / Outlook buttons enabled (no more disabled look),
     with a hover state and a loading spinner.
   • Inline OAuth-error pill for "not configured" / network issues.
   ====================================================================== */

/* 1. Role-switch link below Continue ("Log in as a dietician → ") */
.wxa .wxa-role-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 18px auto 6px auto !important;
    padding: 12px 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    background: rgba(148, 165, 163, .10) !important;
    color: #4F6361 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 1px solid rgba(148, 165, 163, .35) !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
}
.wxa .wxa-role-switch:hover {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.wxa .wxa-role-switch span {
    font-weight: 700 !important;
    transition: transform .15s ease !important;
}
.wxa .wxa-role-switch:hover span {
    transform: translateX(2px) !important;
}

/* 2. Back-arrow row: align arrow vertically with the email pill */
.wxa .wxa-head--with-email {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    row-gap: 14px !important;
}
.wxa .wxa-head--with-email .wxa-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    border: 0 !important;
    color: #0F172A !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .15s ease, transform .15s ease !important;
}
.wxa .wxa-head--with-email .wxa-back:hover {
    background: #E2E8F0 !important;
    transform: translateX(-2px) !important;
}
.wxa .wxa-head--with-email .wxa-back svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
.wxa .wxa-head--with-email .wxa-email-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    padding: 6px 6px 6px 14px !important;
    font-size: 14px !important;
    color: #0F172A !important;
    height: 36px !important;
    box-sizing: border-box !important;
}
.wxa .wxa-head--with-email .wxa-email-change {
    border: 0 !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #0F172A !important;
}
.wxa .wxa-head--with-email h1 {
    flex: 1 1 100% !important;
    margin: 6px 0 0 0 !important;
}

/* 3. OAuth buttons — enabled, hover state, loading spinner */
.wxa .wxa-oauth {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
    margin-bottom: 8px !important;
    opacity: 1 !important;
}
.wxa .wxa-oauth:hover {
    border-color: #94A5A3 !important;
    box-shadow: 0 4px 14px rgba(148,165,163,.2) !important;
    transform: translateY(-1px) !important;
}
.wxa .wxa-oauth[disabled],
.wxa .wxa-oauth.is-loading {
    cursor: wait !important;
    opacity: .65 !important;
    pointer-events: none !important;
}
.wxa .wxa-oauth.is-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #94A5A3;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wxa-spin .8s linear infinite;
    margin-left: auto;
}
@keyframes wxa-spin { to { transform: rotate(360deg); } }
.wxa .wxa-oauth-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.wxa .wxa-oauth-icon svg,
.wxa .wxa-oauth-icon img {
    width: 22px !important;
    height: 22px !important;
}
/* Hide any leftover "Soon" pill if rendered from cached PHP. */
.wxa .wxa-soon { display: none !important; }

/* 4. OAuth inline error message */
.wxa .wxa-oauth-error {
    margin: 8px 0 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: #FEF3F2 !important;
    border: 1px solid #FECACA !important;
    color: #B91C1C !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}


/* ======================================================================
   v3.4.110 —
   • Stop the stray empty "← Change" pills from showing when their
     parent step is hidden (v109's `display: flex !important` was
     beating the [hidden] attribute).
   • Center the OAuth button label ("Continue with Google" /
     "Continue with Outlook") regardless of icon width.
   ====================================================================== */

/* 1. [hidden] must trump our flex/inline-flex rules. */
.wxa .wxa-head[hidden],
.wxa .wxa-head--with-email[hidden],
.wxa .wxa-panel[hidden],
.wxa .wxa-form[hidden] {
    display: none !important;
}

/* 2. OAuth buttons — center the label.
      Trick: pin the icon absolutely on the left so the centered span
      stays mathematically centered in the button's full width. */
.wxa .wxa-oauth {
    position: relative !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 16px !important;
}
.wxa .wxa-oauth .wxa-oauth-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.wxa .wxa-oauth > span:not(.wxa-oauth-icon):not(.wxa-soon) {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
}
/* Loading spinner stays pinned right so it doesn't push the centered text. */
.wxa .wxa-oauth.is-loading::after {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}


/* ======================================================================
   v3.4.111 — OAuth buttons: pull the Google/Outlook icon next to the
   centered text so the icon + label travel together as a unit.
   ====================================================================== */

.wxa .wxa-oauth {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.wxa .wxa-oauth .wxa-oauth-icon {
    position: static !important;
    transform: none !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.wxa .wxa-oauth > span:not(.wxa-oauth-icon):not(.wxa-soon) {
    display: inline-block !important;
    margin: 0 !important;
}
.wxa .wxa-oauth.is-loading::after {
    position: static !important;
    transform: none !important;
    margin-left: 8px !important;
}


/* ======================================================================
   v3.4.112 — Back-arrow row vertical alignment fix.
   Force both pills (back button + email pill) to identical heights with
   border-box sizing so they share the same flex baseline.
   ====================================================================== */

.wxa .wxa-head--with-email {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    row-gap: 14px !important;
}
.wxa .wxa-head--with-email .wxa-back,
.wxa .wxa-head--with-email .wxa-email-pill {
    box-sizing: border-box !important;
    height: 40px !important;
    line-height: 1 !important;
    align-self: center !important;
}
.wxa .wxa-head--with-email .wxa-back {
    width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    border: 0 !important;
    cursor: pointer !important;
}
.wxa .wxa-head--with-email .wxa-back svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
.wxa .wxa-head--with-email .wxa-email-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 6px 0 16px !important;
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    color: #0F172A !important;
}
.wxa .wxa-head--with-email .wxa-email-change {
    box-sizing: border-box !important;
    height: 28px !important;
    padding: 0 14px !important;
    border: 0 !important;
    background: #fff !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #0F172A !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}


/* ======================================================================
   v3.4.113 — Force the OAuth label to sit RIGHT NEXT to the icon
   (centered as a pair). The base CSS at line 9693 of this file gave
   span:nth-child(2) `flex: 1; text-align: left` which pushed the icon
   far-left and stretched the text across the rest of the button.
   Override with higher specificity.
   ====================================================================== */

.wxa .wxa-oauth,
.wxa form .wxa-oauth,
form .wxa-oauth,
button.wxa-oauth {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
}
.wxa .wxa-oauth > span,
form .wxa-oauth > span,
button.wxa-oauth > span {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0 !important;
    width: auto !important;
}
.wxa .wxa-oauth > span:nth-child(2),
form .wxa-oauth > span:nth-child(2),
button.wxa-oauth > span:nth-child(2) {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0 !important;
}
.wxa .wxa-oauth .wxa-oauth-icon,
form .wxa-oauth .wxa-oauth-icon,
button.wxa-oauth .wxa-oauth-icon {
    position: static !important;
    transform: none !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}





/* ======================================================================
   v3.4.129 — Dietitian My Schedule: List ↔ Calendar view toggle + month grid
   ====================================================================== */

/* Toolbar with view toggle */
body .grippy-dietician-dashboard .grippy-sched-toolbar {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 16px 0 !important;
}
body .grippy-dietician-dashboard .grippy-sched-view-toggle {
    display: inline-flex !important;
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 2px !important;
    border: 1px solid #E5E7EB !important;
}
body .grippy-dietician-dashboard .grippy-sched-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
}
body .grippy-dietician-dashboard .grippy-sched-view-btn:hover {
    color: #0F172A !important;
}
body .grippy-dietician-dashboard .grippy-sched-view-btn.is-active {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(148,165,163,.3) !important;
}
body .grippy-dietician-dashboard .grippy-sched-view-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Calendar shell */
body .grippy-dietician-dashboard .grippy-sched-cal {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FAFBFC !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-head h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    flex: 1 !important;
    text-align: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-nav,
body .grippy-dietician-dashboard .grippy-sched-cal-today {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    transition: background .15s ease, border-color .15s ease !important;
    line-height: 1 !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-nav {
    width: 32px !important;
    padding: 0 !important;
    font-size: 18px !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-nav:hover,
body .grippy-dietician-dashboard .grippy-sched-cal-today:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

/* Grid */
body .grippy-dietician-dashboard .grippy-sched-cal-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    background: #F1F5F9 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-dow {
    background: #F8FAFC !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 10px 8px !important;
    text-align: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day {
    background: #fff !important;
    min-height: 110px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: background .12s ease !important;
    position: relative !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day:hover {
    background: #FAFBFC !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day--blank {
    background: #FAFBFC !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day.is-today {
    background: #ECFDF5 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day.is-today .grippy-sched-cal-daynum {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-daynum {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    align-self: flex-start !important;
}

/* Event pills inside day cell */
body .grippy-dietician-dashboard .grippy-sched-cal-events {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transition: filter .12s ease !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill:hover {
    filter: brightness(.95) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--confirmed {
    background: rgba(16,185,129,.12) !important;
    color: #065F46 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--completed {
    background: rgba(99,102,241,.12) !important;
    color: #3730A3 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--cancelled {
    background: rgba(239,68,68,.10) !important;
    color: #991B1B !important;
    text-decoration: line-through !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill-time {
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill-name {
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-more {
    font-size: 10px !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    padding: 2px 4px !important;
}

/* Mobile */
@media (max-width: 700px) {
    body .grippy-dietician-dashboard .grippy-sched-cal-day {
        min-height: 80px !important;
        padding: 4px !important;
    }
    body .grippy-dietician-dashboard .grippy-sched-cal-pill-name {
        display: none !important;
    }
}


/* ======================================================================
   v3.4.130 — Fancier dietitian calendar view
   • Two-row header: nav + title + legend
   • Per-day count badge (sage gradient)
   • Subtle colored top-border on event pills
   • Smoother day-cell transitions
   ====================================================================== */

/* Header layout: 3 zones (nav left | title center | legend right) */
body .grippy-dietician-dashboard .grippy-sched-cal-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: linear-gradient(135deg, #FAFBFC, #F8FAFC) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-head-left {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-title-wrap {
    text-align: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-title-wrap h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-subtitle {
    margin: 2px 0 0 0 !important;
    font-size: 12px !important;
    color: #64748B !important;
    font-weight: 500 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-legend {
    display: inline-flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-dot--confirmed { background: #10B981 !important; }
body .grippy-dietician-dashboard .grippy-sched-cal-dot--completed { background: #6366F1 !important; }
body .grippy-dietician-dashboard .grippy-sched-cal-dot--cancelled { background: #EF4444 !important; }

/* Day header: number + count pill */
body .grippy-dietician-dashboard .grippy-sched-cal-day-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-count {
    background: linear-gradient(135deg, #94A5A3, #7A8E8B) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(148,165,163,.35) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day.is-today .grippy-sched-cal-count {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    box-shadow: 0 1px 3px rgba(16,185,129,.4) !important;
}

/* Smoother day cells with more polish */
body .grippy-dietician-dashboard .grippy-sched-cal-day {
    background: #fff !important;
    min-height: 120px !important;
    padding: 10px !important;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease !important;
    cursor: default !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day.has-events:hover {
    background: #FAFBFC !important;
    z-index: 2 !important;
    box-shadow: inset 0 0 0 1px rgba(148,165,163,.3) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-day.is-today {
    background: linear-gradient(135deg, #ECFDF5, #FAFFFD) !important;
}

/* Event pills get a thin colored left bar instead of just background tint */
body .grippy-dietician-dashboard .grippy-sched-cal-pill {
    border-left: 3px solid transparent !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    transition: filter .12s ease, transform .12s ease !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill:hover {
    filter: brightness(.96) !important;
    transform: translateX(1px) !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--confirmed {
    background: rgba(16,185,129,.10) !important;
    color: #047857 !important;
    border-left-color: #10B981 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--completed {
    background: rgba(99,102,241,.10) !important;
    color: #4338CA !important;
    border-left-color: #6366F1 !important;
}
body .grippy-dietician-dashboard .grippy-sched-cal-pill--cancelled {
    background: rgba(239,68,68,.08) !important;
    color: #B91C1C !important;
    border-left-color: #EF4444 !important;
}

/* DOW header: subtler */
body .grippy-dietician-dashboard .grippy-sched-cal-dow {
    background: #fff !important;
    color: #94A3B8 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 12px 8px !important;
}

/* Mobile: collapse legend, keep single-line cells */
@media (max-width: 800px) {
    body .grippy-dietician-dashboard .grippy-sched-cal-head {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body .grippy-dietician-dashboard .grippy-sched-cal-head-left {
        justify-content: center !important;
    }
    body .grippy-dietician-dashboard .grippy-sched-cal-legend {
        justify-content: center !important;
    }
}
@media (max-width: 600px) {
    body .grippy-dietician-dashboard .grippy-sched-cal-day {
        min-height: 70px !important;
        padding: 6px !important;
    }
}


/* ======================================================================
   v3.4.131 — Merge schedule view toggle + body into one card
   ====================================================================== */

/* Single flat card — toolbar + body share one border so there's no
   "card inside a card" effect. The toolbar gets a subtle bottom rule
   instead of its own elevated background. */
body .grippy-dietician-dashboard .grippy-sched-shell {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-sched-toolbar {
    margin: 0 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #fff !important;
    display: flex !important;
    justify-content: center !important;
}
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-sched-body {
    padding: 0 !important;
    background: #fff !important;
}
/* Calendar inside shell — drop its own border/radius/shadow so it merges. */
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-sched-cal {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 16px !important;
}
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-sched-cal-head {
    border-radius: 0 !important;
    background: transparent !important;
}
/* List/table inside the shell — flatten ALL wrapping containers so the
   table sits directly inside the shell with no nested borders. */
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-table-wrap,
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-dashboard-table-wrap {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-tz-note {
    margin: 14px 0 6px 0 !important;
}
/* Header row sits flush against the toolbar — no second elevated bar */
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-dashboard-table thead th {
    background: #fff !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-top: 0 !important;
}
/* Hover row — use a tinted background that contrasts with the row border
   so the column dividers stay visible (was making borders disappear). */
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-dashboard-table tbody tr:hover td {
    background: rgba(148, 165, 163, 0.06) !important;
}
body .grippy-dietician-dashboard .grippy-sched-shell .grippy-dashboard-table tbody td {
    border-bottom: 1px solid #E5E7EB !important;
}


/* ======================================================================
   v3.4.134 — Dietitian Availability tab: monthly overrides editor
   ====================================================================== */

/* Outer shell mirrors the schedule view */
body .grippy-dietician-dashboard .grippy-avail-shell {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
}
body .grippy-dietician-dashboard .grippy-avail-toolbar {
    padding: 14px 18px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: linear-gradient(135deg, #FAFBFC, #F8FAFC) !important;
    display: flex !important;
    justify-content: center !important;
}
body .grippy-dietician-dashboard .grippy-avail-body {
    padding: 0 !important;
}
/* The legacy weekly-schedule wrap loses its own border/radius inside the shell */
body .grippy-dietician-dashboard .grippy-avail-body .grippy-availability-wrap {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 22px !important;
}

/* Monthly month grid */
body .grippy-dietician-dashboard .grippy-avail-month {
    padding: 0 !important;
}
body .grippy-dietician-dashboard .grippy-avail-month-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
body .grippy-dietician-dashboard .grippy-avail-month-nav {
    display: inline-flex !important;
    gap: 6px !important;
}
body .grippy-dietician-dashboard .grippy-avail-month-title {
    text-align: center !important;
}
body .grippy-dietician-dashboard .grippy-avail-month-title h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
}
body .grippy-dietician-dashboard .grippy-avail-month-title p {
    margin: 2px 0 0 0 !important;
    font-size: 12px !important;
    color: #64748B !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulk {
    display: inline-flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

/* Month grid */
body .grippy-dietician-dashboard .grippy-avail-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    background: #F1F5F9 !important;
}
body .grippy-dietician-dashboard .grippy-avail-dow {
    background: #fff !important;
    color: #94A3B8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 12px 8px !important;
    text-align: center !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

body .grippy-dietician-dashboard .grippy-avail-day {
    background: #fff !important;
    min-height: 100px !important;
    padding: 10px !important;
    cursor: pointer !important;
    transition: background .12s ease, transform .12s ease, box-shadow .15s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
body .grippy-dietician-dashboard .grippy-avail-day:hover:not(.grippy-avail-day--blank):not(.grippy-avail-day--past) {
    box-shadow: inset 0 0 0 2px rgba(148,165,163,.45) !important;
    z-index: 2 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--blank {
    background: #FAFBFC !important;
    cursor: default !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--past {
    background: #FAFBFC !important;
    cursor: default !important;
    opacity: .55 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day-num {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}
body .grippy-dietician-dashboard .grippy-avail-day-status {
    font-size: 11px !important;
    color: #64748B !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-top: auto !important;
}

/* Status colors */
body .grippy-dietician-dashboard .grippy-avail-day--available {
    background: rgba(16,185,129,.06) !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--available .grippy-avail-day-status {
    color: #047857 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--off {
    background: #F8FAFC !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--off .grippy-avail-day-status {
    color: #94A3B8 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--blocked {
    background: rgba(239,68,68,.08) !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--blocked .grippy-avail-day-status {
    color: #B91C1C !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--blocked .grippy-avail-day-num {
    color: #991B1B !important;
    text-decoration: line-through !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--partial {
    background: rgba(245,158,11,.10) !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--partial .grippy-avail-day-status {
    color: #92400E !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--today {
    /* Inset ring matches the rounded corners of the cell itself —
       border-radius inherits from the cell so the highlight is a
       rounded pill, not a square outline. */
    box-shadow: inset 0 0 0 2px #94A5A3 !important;
    border-radius: 12px !important;
}

/* Per-week "Block week" mini button */
body .grippy-dietician-dashboard .grippy-avail-week-block {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: rgba(15,23,42,.85) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity .12s ease !important;
    line-height: 1 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day:hover .grippy-avail-week-block {
    opacity: 1 !important;
}
body .grippy-dietician-dashboard .grippy-avail-week-block:hover {
    background: #0F172A !important;
}

/* Legend */
body .grippy-dietician-dashboard .grippy-avail-legend {
    padding: 14px 22px !important;
    border-top: 1px solid #F1F5F9 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    font-size: 12px !important;
    color: #64748B !important;
    background: #FAFBFC !important;
}
body .grippy-dietician-dashboard .grippy-avail-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body .grippy-dietician-dashboard .grippy-avail-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
    display: inline-block !important;
}
body .grippy-dietician-dashboard .grippy-avail-dot--available { background: rgba(16,185,129,.5) !important; border: 1px solid #10B981 !important; }
body .grippy-dietician-dashboard .grippy-avail-dot--off       { background: #E5E7EB !important; }
body .grippy-dietician-dashboard .grippy-avail-dot--blocked   { background: rgba(239,68,68,.45) !important; border: 1px solid #EF4444 !important; }
body .grippy-dietician-dashboard .grippy-avail-dot--partial   { background: rgba(245,158,11,.45) !important; border: 1px solid #F59E0B !important; }

/* Mobile */
@media (max-width: 800px) {
    body .grippy-dietician-dashboard .grippy-avail-month-head {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-month-nav,
    body .grippy-dietician-dashboard .grippy-avail-bulk {
        justify-content: center !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-day {
        min-height: 70px !important;
        padding: 6px !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-day-status {
        font-size: 9px !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-week-block {
        opacity: 1 !important;
        font-size: 8px !important;
        padding: 2px 6px !important;
    }
}


/* ======================================================================
   v3.4.135 — Per-date availability editor modal
   ====================================================================== */

.grippy-avail-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .55) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    animation: grippy-fade-in .15s ease both;
}
@keyframes grippy-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.grippy-avail-modal {
    background: #fff !important;
    border-radius: 16px !important;
    max-width: 540px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .25) !important;
    animation: grippy-pop .18s cubic-bezier(.16,1,.3,1) both;
}
@keyframes grippy-pop {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.grippy-avail-modal-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 22px 24px 16px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
}
.grippy-avail-modal-head h3 {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -.01em !important;
}
.grippy-avail-modal-head p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}
.grippy-avail-modal-close {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #F1F5F9 !important;
    border: 0 !important;
    color: #64748B !important;
    cursor: pointer !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    transition: background .12s ease, color .12s ease !important;
}
.grippy-avail-modal-close:hover { background: #E2E8F0 !important; color: #0F172A !important; }

.grippy-avail-modal-body {
    padding: 18px 24px !important;
    overflow-y: auto !important;
}

.grippy-avail-modes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.grippy-avail-mode {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: border-color .12s ease, background .12s ease !important;
}
.grippy-avail-mode:hover {
    border-color: #94A3B8 !important;
    background: #F8FAFC !important;
}
.grippy-avail-mode.is-active {
    border-color: #94A5A3 !important;
    background: rgba(148, 165, 163, .08) !important;
    box-shadow: 0 0 0 3px rgba(148, 165, 163, .15) !important;
}
.grippy-avail-mode input[type="radio"] {
    margin-top: 2px !important;
    accent-color: #94A5A3 !important;
}
.grippy-avail-mode > div { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.grippy-avail-mode strong {
    font-size: 14px !important;
    color: #0F172A !important;
    font-weight: 700 !important;
}
.grippy-avail-mode span {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
}
.grippy-avail-mode--danger.is-active  { border-color: #EF4444 !important; background: rgba(239,68,68,.06) !important; box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important; }
.grippy-avail-mode--warning.is-active { border-color: #F59E0B !important; background: rgba(245,158,11,.06) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important; }
.grippy-avail-mode--success.is-active { border-color: #10B981 !important; background: rgba(16,185,129,.06) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important; }

.grippy-avail-times {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
}
.grippy-avail-times-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.grippy-avail-times label {
    flex: 1 !important;
    min-width: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.grippy-avail-times input[type="time"] {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: #0F172A !important;
    background: #fff !important;
    width: 100% !important;
}
.grippy-avail-times input[type="time"]:focus {
    outline: none !important;
    border-color: #94A5A3 !important;
    box-shadow: 0 0 0 3px rgba(148,165,163,.15) !important;
}
.grippy-avail-times-hint {
    margin: 8px 0 0 0 !important;
    font-size: 12px !important;
    color: #64748B !important;
    font-style: italic !important;
}

.grippy-avail-modal-foot {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 24px 20px 24px !important;
    border-top: 1px solid #F1F5F9 !important;
}
.grippy-avail-modal-foot .grippy-btn {
    min-width: 100px !important;
}

@media (max-width: 600px) {
    .grippy-avail-modal { border-radius: 12px !important; }
    .grippy-avail-modal-head { padding: 18px 18px 14px 18px !important; }
    .grippy-avail-modal-body { padding: 14px 18px !important; }
    .grippy-avail-modal-foot { padding: 14px 18px 18px 18px !important; }
}


/* ======================================================================
   v3.4.136 — Monthly availability bulk-edit mode
   ====================================================================== */

/* Selected day cell — sage outline + light bg */
body .grippy-dietician-dashboard .grippy-avail-day--selected {
    box-shadow: inset 0 0 0 3px #94A5A3 !important;
    background: rgba(148, 165, 163, .14) !important;
    z-index: 3 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected .grippy-avail-day-num {
    color: #4F6361 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #94A5A3, #7A8E8B);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(148,165,163,.4);
}
/* When in bulk mode, hide the per-week "Block week" pill so the selection feels clean. */
body .grippy-dietician-dashboard .grippy-avail-month .grippy-avail-bulkbar ~ .grippy-avail-week-block,
body .grippy-dietician-dashboard .grippy-avail-month-grid:has(.grippy-avail-day--selected) .grippy-avail-week-block {
    display: none !important;
}

/* Floating bulk action bar pinned to the bottom of the calendar shell */
body .grippy-dietician-dashboard .grippy-avail-bulkbar {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    border-top: 1px solid #E5E7EB !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    z-index: 10 !important;
    animation: grippy-bulkbar-in .2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes grippy-bulkbar-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar.is-empty {
    opacity: .65 !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar-info {
    font-size: 13px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar-info strong {
    font-size: 16px !important;
    color: #0F172A !important;
    font-weight: 800 !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar-actions {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar-divider {
    width: 1px !important;
    height: 20px !important;
    background: #E5E7EB !important;
    margin: 0 4px !important;
}
body .grippy-dietician-dashboard .grippy-avail-bulkbar.is-empty .grippy-avail-bulkbar-actions [data-bulk-act="apply"] {
    pointer-events: none !important;
    opacity: .45 !important;
}

/* Mobile: stack the bar */
@media (max-width: 700px) {
    body .grippy-dietician-dashboard .grippy-avail-bulkbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-bulkbar-actions {
        margin-left: 0 !important;
        justify-content: stretch !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-bulkbar-actions .grippy-btn {
        flex: 1 1 calc(50% - 4px) !important;
    }
    body .grippy-dietician-dashboard .grippy-avail-bulkbar-divider {
        display: none !important;
    }
}


/* ======================================================================
   v3.4.137 — Drag-to-select polish
   • 🚫 ban icon on selected days (replaces the ✓)
   • Crosshair cursor on the month grid (signals draggability)
   • Disable text selection while dragging
   ====================================================================== */

/* Cursor + select-none so the drag feels native. */
body .grippy-dietician-dashboard .grippy-avail-month-grid {
    cursor: crosshair !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;       /* prevent scroll while dragging on mobile */
}
body .grippy-dietician-dashboard .grippy-avail-day:not(.grippy-avail-day--blank):not(.grippy-avail-day--past) {
    cursor: cell !important;
}

/* Replace the previous ✓ checkmark with a no-entry / "blocked" icon. */
body .grippy-dietician-dashboard .grippy-avail-day--selected::after {
    content: "🚫" !important;
    background: rgba(15, 23, 42, .85) !important;
    color: #fff !important;
    font-size: 11px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35) !important;
    top: 6px !important;
    right: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    /* The emoji needs a slight tint to read on the dark bg */
    filter: grayscale(.2);
}

/* When in bulk mode, fade the per-week "Block week" pill so the new
   drag UX is the obvious primary interaction. */
body .grippy-dietician-dashboard .grippy-avail-month-grid:has(.grippy-avail-day--selected) .grippy-avail-week-block {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Helpful hint above the grid the first time the dietitian visits. */
body .grippy-dietician-dashboard .grippy-avail-month-title p::after {
    content: " · Tip: click + drag across days to select a range";
    color: #94A3B8;
    font-style: italic;
}
@media (max-width: 700px) {
    body .grippy-dietician-dashboard .grippy-avail-month-title p::after {
        content: " · Tap + drag to select multiple days";
    }
}


/* ======================================================================
   v3.4.138 — Post-session "needs notes & completion" flow
   ====================================================================== */

/* Sticky banner at the top of My Schedule */
body .grippy-dietician-dashboard .grippy-awaiting-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    margin: 0 0 16px 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
    border: 1px solid #F59E0B !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .15) !important;
    animation: grippy-pulse-amber 2.4s ease-in-out infinite;
}
@keyframes grippy-pulse-amber {
    0%, 100% { box-shadow: 0 4px 12px rgba(245,158,11,.15); }
    50%      { box-shadow: 0 4px 20px rgba(245,158,11,.32); }
}
body .grippy-dietician-dashboard .grippy-awaiting-icon {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #F59E0B, #D97706) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 2px 6px rgba(245,158,11,.4) !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-body {
    flex: 1 !important;
    min-width: 0 !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-body strong {
    font-size: 14px !important;
    color: #78350F !important;
    font-weight: 700 !important;
    display: block !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-sub {
    font-size: 12px !important;
    color: #92400E !important;
    margin-top: 2px !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-more {
    background: rgba(120, 53, 15, .15) !important;
    padding: 1px 8px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-act {
    flex: 0 0 auto !important;
    background: #fff !important;
    color: #78350F !important;
    border: 1px solid #F59E0B !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(120, 53, 15, .12) !important;
}
body .grippy-dietician-dashboard .grippy-awaiting-act:hover {
    background: #78350F !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* "This session has ended" callout inside the notes modal */
body .grippy-dietician-dashboard .grippy-notes-needs-complete,
.grippy-notes-modal .grippy-notes-needs-complete,
.grippy-review-modal-backdrop .grippy-notes-needs-complete {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
    border: 1px solid #F59E0B !important;
    color: #78350F !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.grippy-notes-needs-complete-icon {
    flex: 0 0 28px !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

/* Mobile */
@media (max-width: 640px) {
    body .grippy-dietician-dashboard .grippy-awaiting-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
    }
    body .grippy-dietician-dashboard .grippy-awaiting-act {
        width: 100% !important;
    }
}


/* ======================================================================
   v3.4.139 —
   • Replace the emoji selection badge with a crisp CSS-drawn ban icon
     (avoids inconsistent emoji rendering across browsers / fonts).
   • Make column day-of-week headers clickable to bulk-select that DOW.
   • Kill the v137 ::after tip with the Unicode middle-dot that was
     rendering as "·" on some systems.
   ====================================================================== */

/* 1. Ban icon — pure CSS, no emoji */
body .grippy-dietician-dashboard .grippy-avail-day--selected::after {
    content: "" !important;
    background: rgba(15, 23, 42, .92) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35) !important;
    top: 6px !important;
    right: 6px !important;
    /* Inline SVG ban / no-entry icon, white on dark dot */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='5.6' y1='5.6' x2='18.4' y2='18.4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    background-color: rgba(15, 23, 42, .92) !important;
    filter: none !important;
}

/* 2. Day-of-week column headers act as buttons */
body .grippy-dietician-dashboard .grippy-avail-dow {
    cursor: pointer !important;
    border: 0 !important;
    transition: background .12s ease, color .12s ease !important;
    user-select: none !important;
}
body .grippy-dietician-dashboard .grippy-avail-dow:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

/* 3. Wipe the v137 "::after Tip:" pseudo that was rendering · on some systems */
body .grippy-dietician-dashboard .grippy-avail-month-title p::after {
    content: none !important;
}


/* ======================================================================
   v3.4.140 — Selected-day badge: green tick instead of dark ban
   ====================================================================== */
body .grippy-dietician-dashboard .grippy-avail-day--selected::after {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    background-color: #16a34a !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, .35) !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
}
/* Match the ring on the cell itself to the new green so the whole thing
   reads as "yes, this is selected." */
body .grippy-dietician-dashboard .grippy-avail-day--selected {
    box-shadow: inset 0 0 0 3px #16a34a !important;
    background: rgba(22, 163, 74, .10) !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected .grippy-avail-day-num {
    color: #14532D !important;
}


/* ======================================================================
   v3.4.141 — Rounded green selection + prominent "Clear selection" CTA
   ====================================================================== */

/* The grid still has 1px gridlines; lay each selected cell on top with its
   own rounded green ring + soft glow + slight pop. */
body .grippy-dietician-dashboard .grippy-avail-day {
    position: relative !important;
    transition: box-shadow .15s ease, background .12s ease, transform .12s ease, border-radius .12s ease !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected {
    box-shadow:
        inset 0 0 0 2px #16a34a,
        0 4px 14px rgba(22, 163, 74, .25) !important;
    background: linear-gradient(135deg, rgba(22, 163, 74, .12), rgba(22, 163, 74, .06)) !important;
    border-radius: 12px !important;
    transform: scale(.98) !important;
    z-index: 4 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected .grippy-avail-day-num {
    color: #14532D !important;
    font-weight: 800 !important;
}
body .grippy-dietician-dashboard .grippy-avail-day--selected .grippy-avail-day-status {
    color: #14532D !important;
    opacity: .8 !important;
}

/* The green check badge on selected cells */
body .grippy-dietician-dashboard .grippy-avail-day--selected::after {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    background-color: #16a34a !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, .4) !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    border-radius: 999px !important;
}

/* Top-bar "Clear selection" pill — red so it's obvious it's destructive */
body .grippy-dietician-dashboard .grippy-avail-clear-sel-top {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .25) !important;
    transition: transform .12s ease, box-shadow .12s ease !important;
}
body .grippy-dietician-dashboard .grippy-avail-clear-sel-top:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .35) !important;
}


/* ======================================================================
   v3.4.142 — i18n: floating language picker + RTL layout flip
   ====================================================================== */

/* ---------- Floating language picker (bottom-right) ---------- */
.grippy-lang-picker {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 99000 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.grippy-lang-picker .grippy-lang-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    color: #0F172A !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12) !important;
    transition: transform .12s ease, box-shadow .12s ease !important;
}
.grippy-lang-picker .grippy-lang-trigger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
}
.grippy-lang-picker .grippy-lang-flag {
    font-size: 18px !important;
    line-height: 1 !important;
}
.grippy-lang-picker .grippy-lang-caret {
    color: #94A3B8 !important;
    font-size: 12px !important;
}
.grippy-lang-picker .grippy-lang-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 200px !important;
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .15) !important;
    overflow: hidden !important;
}
.grippy-lang-picker .grippy-lang-menu-head {
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 1px solid #F1F5F9 !important;
    margin-bottom: 4px !important;
}
.grippy-lang-picker .grippy-lang-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #0F172A !important;
    text-align: left !important;
    transition: background .1s ease !important;
}
.grippy-lang-picker .grippy-lang-item:hover {
    background: #F8FAFC !important;
}
.grippy-lang-picker .grippy-lang-item.is-active {
    background: rgba(148, 165, 163, .12) !important;
    font-weight: 700 !important;
}
.grippy-lang-picker .grippy-lang-check {
    margin-left: auto !important;
    color: #16a34a !important;
    font-weight: 800 !important;
}

/* ---------- RTL layout flip (Arabic + Persian) ---------- */
body.grippy-rtl .grippy-client-dashboard,
body.grippy-rtl .grippy-dietician-dashboard,
body.grippy-rtl #grippy-booking-flow,
body.grippy-rtl #grippy-auth,
body.grippy-rtl .grippy-directory,
body.grippy-rtl .grippy-pp {
    direction: rtl !important;
    text-align: right !important;
}
body.grippy-rtl .grippy-lang-picker {
    right: auto !important;
    left: 20px !important;
}
body.grippy-rtl .grippy-lang-picker .grippy-lang-menu {
    right: auto !important;
    left: 0 !important;
}
body.grippy-rtl .grippy-lang-picker .grippy-lang-item {
    text-align: right !important;
}
body.grippy-rtl .grippy-lang-picker .grippy-lang-check {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Common LTR-mirror tweaks for the dashboards. */
body.grippy-rtl .grippy-dash-body,
body.grippy-rtl .grippy-dash-body--saas {
    direction: rtl !important;
}
body.grippy-rtl .grippy-tab-btn,
body.grippy-rtl .grippy-cust-cell,
body.grippy-rtl .grippy-meeting-card,
body.grippy-rtl .grippy-msg-shell {
    direction: rtl !important;
    text-align: right !important;
}
body.grippy-rtl .grippy-msg-bubble.is-mine {
    align-self: flex-start !important;
    border-radius: 14px !important;
}
body.grippy-rtl .grippy-msg-bubble:not(.is-mine) {
    align-self: flex-end !important;
}

/* Calendar grid stays LTR-feeling so weekdays still read Sun→Sat naturally
   even in RTL pages — most users find that more intuitive than mirroring
   the entire week.  Numbers and event pills are still TZ-aware. */
body.grippy-rtl .grippy-sched-cal-grid,
body.grippy-rtl .grippy-avail-month-grid {
    direction: ltr !important;
}

/* Mobile: keep the picker visible above any sticky bottom bars. */
@media (max-width: 640px) {
    .grippy-lang-picker {
        bottom: 14px !important;
        right: 14px !important;
    }
    .grippy-lang-picker .grippy-lang-trigger-label {
        display: none !important;
    }
    body.grippy-rtl .grippy-lang-picker {
        left: 14px !important;
    }
}


/* ================================================================
 * v3.4.155 — Button width refinement
 * Default .grippy-btn forced 100% wide which made the booking step
 * nav (Back / Next), the My Files upload CTA, and several inline CTAs
 * look like full-width blocks even when they sit in roomy containers.
 * Below we restore intrinsic width in the common offending contexts
 * while keeping the full-width default everywhere it was actually
 * intended (narrow side panels, form submits stacked top-to-bottom).
 * Mobile media-query override at the bottom keeps stacked layout.
 * ============================================================== */
.grippy-step-nav .grippy-btn,
.grippy-step-nav button.grippy-btn {
    width: auto;
    flex: 0 0 auto;
    padding: 11px 22px;
    min-width: 120px;
    max-width: 220px;
}
.grippy-files-upload-cta .grippy-btn,
.grippy-files-upload-cta label.grippy-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 240px;
    margin: 0 auto;
}
/* Booking-flow paginator + sidebar action buttons — same pattern */
.grippy-booking-actions .grippy-btn,
.grippy-meeting-actions .grippy-btn,
.grippy-table-actions .grippy-btn,
.grippy-form-actions .grippy-btn,
.grippy-profile-form-actions .grippy-btn,
.grippy-review-modal-actions .grippy-btn,
.grippy-meeting-link .grippy-btn,
.grippy-meeting-card-cta .grippy-btn {
    width: auto;
    min-width: 110px;
    max-width: 260px;
    flex: 0 0 auto;
}
/* Explicit opt-in: when something really wants to span the column */
.grippy-btn--block,
.grippy-btn.grippy-btn--block {
    width: 100% !important;
    max-width: none !important;
}
@media (max-width: 640px) {
    .grippy-step-nav .grippy-btn,
    .grippy-files-upload-cta .grippy-btn,
    .grippy-booking-actions .grippy-btn { width: 100%; max-width: none; }
}

/* ================================================================
 * v3.4.156 — Front-end Cancel button + modal footer
 * Standardise the look of "Cancel" / "Never mind" / "Keep booking"
 * style buttons that appear in every modal so they're visually
 * distinct from primary CTAs but still recognisable as buttons.
 * ============================================================== */
.grippy-review-modal-actions,
.grippy-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.grippy-review-modal-actions .grippy-btn,
.grippy-modal-footer .grippy-btn {
    width: auto !important;
    min-width: 110px;
    max-width: none !important;
    padding: 10px 22px;
}
.grippy-btn--ghost,
.grippy-review-modal-close,
.grippy-cancel-modal-close,
.grippy-reschedule-cancel,
button.grippy-btn--cancel {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid var(--grippy-border) !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    min-width: 110px;
    transition: all .18s ease !important;
}
.grippy-btn--ghost:hover,
.grippy-cancel-modal-close:hover,
.grippy-reschedule-cancel:hover,
button.grippy-btn--cancel:hover {
    background: var(--grippy-bg-muted) !important;
    border-color: #CBD5E1 !important;
    color: var(--grippy-text) !important;
}

/* The big <X> close button on every modal: visible round bordered chip */
.grippy-review-modal-close,
.grippy-cancel-modal-close,
.grippy-files-upload-cta button[aria-label="Close"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ================================================================
 * v3.4.162 — Wider Dieticians Directory
 * Container widened from 1280px → 1680px so 3-4 cards fit per row
 * comfortably on standard desktops + 4-5 on ultra-wide screens.
 * Filter sidebar stays at 280px; main grid takes the remainder.
 * ============================================================== */
@media (min-width: 1280px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap: 20px !important;
    }
}
@media (min-width: 1500px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    }
}
@media (min-width: 1800px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    }
}

/* ================================================================
 * v3.4.163 — Directory density (tighter cards, fits more per row)
 * Default minmax dropped from 380px → 280px so a card no longer
 * monopolises an entire half-viewport. The auto-fill grid then
 * naturally fits 3 at ~1280px, 4 at ~1600px, 5 at 2000px.
 * Sidebar trimmed to 220px (also done above).
 * ============================================================== */
body #grippy-directory .grippy-dir-grid,
body .grippy-dir-grid,
body .grippy-dietician-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 18px !important;
}
@media (min-width: 1280px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    }
}
@media (min-width: 1800px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
    }
}

/* Compact card inner padding so tightened cards still breathe */
body .grippy-dir-card,
body .grippy-dietician-card {
    padding: 18px 18px 16px !important;
}
body .grippy-dir-card .grippy-dir-card-body,
body .grippy-dietician-card .grippy-dir-card-body {
    gap: 8px !important;
}

/* v3.4.163b — even tighter cards so 3+ fit at typical desktop widths */
body #grippy-directory .grippy-dir-grid,
body .grippy-dir-grid,
body .grippy-dietician-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 16px !important;
}
@media (min-width: 1600px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
    }
}
@media (min-width: 1900px) {
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    }
}
/* Filter sidebar typography — readable, not cramped */
.grippy-dir-filters { padding: 18px !important; }
.grippy-dir-filters h4 { font-size: 12px !important; letter-spacing: .05em; }
.grippy-dir-filters label { font-size: 13px !important; padding: 5px 0 !important; }

/* ================================================================
 * v3.4.164 — Directory responsive polish (tablet + phone)
 * - Below 1024px: filter sidebar collapses into a slide-in drawer
 *   triggered by the toolbar "Filters" button (hidden on desktop).
 * - Below 640px: toolbar wraps cleanly, hero text scales down,
 *   cards become 1-column for thumb-friendly scrolling.
 * ============================================================== */

/* Hide the mobile Filters button + drawer-close X on desktop.
 * Need !important here because base .grippy-btn rules set display
 * to inline-flex with higher specificity. */
.grippy-dir-filter-toggle,
button.grippy-dir-filter-toggle { display: none !important; }
.grippy-dir-filter-close,
button.grippy-dir-filter-close { display: none !important; }

/* Backdrop when drawer is open */
body.grippy-dir-drawer-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: 9998;
    backdrop-filter: blur(2px);
}

/* Drawer close X (only visible inside the drawer header on mobile) */
.grippy-dir-filter-close {
    background: #fff;
    border: 1px solid var(--grippy-border);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #64748B;
    align-items: center; justify-content: center;
    padding: 0;
    margin-left: auto;
}
.grippy-dir-filter-close:hover {
    color: var(--grippy-primary);
    border-color: var(--grippy-primary);
}
.grippy-dir-filter-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* TABLET — collapse sidebar to drawer below 1200px so iPad landscape
 * (1180px), iPad Air (1180), Surface Pro (1368... bigger, stays desktop),
 * iPad portrait (810), and everything narrower all get the drawer UX.
 * Desktop layout only kicks in at >= 1200px viewports. */
@media (max-width: 1199px) {
    /* Stack layout: grid becomes single column (drawer floats over) */
    .grippy-dir-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Hide sidebar in normal flow */
    .grippy-dir-filters {
        display: none;
        position: fixed !important;
        top: 0; left: 0;
        width: 86%;
        max-width: 360px;
        height: 100vh;
        max-height: 100vh;
        z-index: 9999;
        overflow-y: auto;
        border-radius: 0 16px 16px 0 !important;
        box-shadow: 0 20px 50px rgba(15,23,42,.25);
        padding: 20px !important;
        animation: grippy-drawer-slide .25s cubic-bezier(.4,0,.2,1);
    }
    .grippy-dir-filters--open { display: block !important; }
    .grippy-dir-filter-close,
    button.grippy-dir-filter-close { display: inline-flex !important; }
    /* Show the Filters button in the toolbar — extra specificity so
     * theme buttons or wp-admin reset CSS can never beat us. */
    .grippy-dir-toolbar .grippy-dir-filter-toggle,
    .grippy-dir-toolbar button.grippy-dir-filter-toggle,
    body .grippy-dir-filter-toggle,
    body button.grippy-dir-filter-toggle {
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap;
        flex: 0 0 auto;
        padding: 8px 14px !important;
        background: #fff !important;
        color: var(--grippy-text) !important;
        border: 1px solid var(--grippy-border) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    }
    .grippy-dir-toolbar .grippy-dir-filter-toggle:hover,
    body .grippy-dir-filter-toggle:hover {
        border-color: var(--grippy-primary) !important;
        color: var(--grippy-primary) !important;
    }
    /* Density: 2-3 cards depending on viewport */
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
    /* Toolbar wraps to two rows so search input doesn't squeeze */
    .grippy-dir-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .grippy-dir-search { flex: 1 1 100%; min-width: 0; }
}
@keyframes grippy-drawer-slide {
    from { transform: translateX(-12px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* PHONE — single column grid, tighter spacing, scale hero */
@media (max-width: 640px) {
    .grippy-dir-toolbar,
    .grippy-dir-layout {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    body #grippy-directory .grippy-dir-grid,
    body .grippy-dir-grid,
    body .grippy-dietician-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .grippy-dir-card,
    .grippy-dietician-card {
        padding: 16px !important;
    }
    .grippy-dir-hero h1 { font-size: 28px !important; }
    .grippy-dir-hero p,
    .grippy-dir-subtitle { font-size: 14px !important; }
    /* Filters button takes its own row above search on tiny screens */
    .grippy-dir-filter-toggle {
        flex: 1 1 100%;
        justify-content: center;
        padding: 10px 16px !important;
    }
    /* Drawer takes nearly full width */
    .grippy-dir-filters {
        width: 92% !important;
        max-width: 320px !important;
        padding: 16px !important;
    }
    .grippy-dir-filters h4 { font-size: 11px !important; }
    .grippy-dir-filters label { font-size: 13px !important; }
}