/**
 * RFM Session Booking — v1.3.0 Dark-Purple Design System
 *
 * Matches the Tutor LMS rebuild design language: Space Grotesk display,
 * Inter body, JetBrains Mono labels/numbers, dark purple surfaces,
 * glow accents, pill chips.
 *
 * Loaded AFTER public.css so it overrides the legacy light styling on
 * the booking-related templates only. Existing class names are kept;
 * only the visual rules are replaced.
 *
 * @package RFM_Session_Booking
 */

/* ───────────── Design tokens ───────────── */
:root {
    --rfm-bg: #0B0612;
    --rfm-bg-1: #110820;
    --rfm-bg-2: #180C2C;
    --rfm-bg-3: #221038;
    --rfm-surface: #150A24;
    --rfm-surface-2: #1E0F32;
    --rfm-line: #2A1745;
    --rfm-line-2: #3A1F5E;
    --rfm-line-3: #4D2A78;

    --rfm-text: #FFFFFF;
    --rfm-text-2: #C9BEDB;
    --rfm-text-3: #8A7BA3;

    --rfm-accent: #7B3FE4;
    --rfm-accent-2: #9D6BFF;
    --rfm-accent-3: #C9A8FF;
    --rfm-accent-glow: rgba(123, 63, 228, 0.45);
    --rfm-accent-soft: rgba(123, 63, 228, 0.18);

    --rfm-danger: #F43F5E;
    --rfm-warn: #FFB347;
    --rfm-success: #34D399;

    --rfm-radius-sm: 4px;
    --rfm-radius-md: 8px;
    --rfm-radius-lg: 14px;
    --rfm-radius-pill: 100px;

    --rfm-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --rfm-shadow-glow: 0 0 0 1px rgba(157, 107, 255, 0.4), 0 0 40px rgba(123, 63, 228, 0.25);

    --rfm-font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --rfm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rfm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Re-map legacy public.css tokens INSIDE our dark wrappers so any rules that
   still use --rfm-primary etc. inherit the new dark-purple palette. */
.rfm-booking-shell,
.rfm-instructor-listing,
.rfm-booking-calendar-wrap,
.rfm-dashboard {
    --rfm-primary: #7B3FE4;
    --rfm-primary-hover: #9D6BFF;
    --rfm-primary-light: rgba(123, 63, 228, 0.18);
    --rfm-gray-50: #150A24;
    --rfm-gray-100: #1E0F32;
    --rfm-gray-200: #2A1745;
    --rfm-gray-300: #3A1F5E;
    --rfm-gray-400: #8A7BA3;
    --rfm-gray-500: #C9BEDB;
    --rfm-gray-600: #FFFFFF;
    --rfm-gray-700: #FFFFFF;
    --rfm-gray-800: #FFFFFF;
    --rfm-gray-900: #FFFFFF;
    --rfm-bg-light: #150A24;
    --rfm-border: #2A1745;
    --rfm-text-primary: #FFFFFF;
    --rfm-text-secondary: #C9BEDB;
    --rfm-text-muted: #8A7BA3;
    --rfm-success: #34D399;
    --rfm-danger: #F43F5E;
    --rfm-warning: #FFB347;
}

/* ───────────── Google fonts ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ───────────── Booking page wrapper ───────────── */
/* Use very high specificity (body + selector + !important) to defeat theme
   styling that wraps shortcodes in heavy CSS chains. */
body .rfm-booking-shell,
body .rfm-instructor-listing,
body .rfm-booking-calendar-wrap,
body .rfm-dashboard,
.entry-content .rfm-instructor-listing,
.entry-content .rfm-booking-calendar-wrap,
.entry-content .rfm-dashboard {
    background:
        radial-gradient(ellipse 1200px 700px at 80% -10%, rgba(123, 63, 228, 0.22), transparent 60%),
        radial-gradient(ellipse 1000px 600px at 10% 20%, rgba(157, 107, 255, 0.12), transparent 60%),
        radial-gradient(ellipse 900px 500px at 50% 80%, rgba(123, 63, 228, 0.10), transparent 60%),
        var(--rfm-bg) !important;
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 60vh;
    position: relative;
    isolation: isolate;
    /* Full-bleed: extend to viewport edges even when parent is constrained */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 64px max(24px, calc((100vw - 1200px) / 2)) 96px !important;
    box-sizing: border-box;
}

/* Subtle grid overlay for hero-style visual texture */
.rfm-booking-shell::before,
.rfm-instructor-listing::before,
.rfm-booking-calendar-wrap::before,
.rfm-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Inner content max-width */
.rfm-booking-shell > *,
.rfm-instructor-listing > *,
.rfm-booking-calendar-wrap > *,
.rfm-dashboard > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ───────────── Typography ───────────── */
.rfm-booking-shell h1,
.rfm-booking-shell h2,
.rfm-booking-shell h3,
.rfm-instructor-listing h1,
.rfm-instructor-listing h2,
.rfm-instructor-listing h3,
.rfm-booking-calendar-wrap h1,
.rfm-booking-calendar-wrap h2,
.rfm-booking-calendar-wrap h3,
.rfm-dashboard h1,
.rfm-dashboard h2,
.rfm-dashboard h3 {
    font-family: var(--rfm-font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--rfm-text);
    margin: 0 0 16px;
    line-height: 1.15;
}

.rfm-booking-shell h2,
.rfm-instructor-listing h2,
.rfm-booking-calendar-wrap h2,
.rfm-dashboard h2 {
    font-size: clamp(28px, 4vw, 42px);
}

.rfm-booking-shell h3,
.rfm-instructor-listing h3,
.rfm-booking-calendar-wrap h3,
.rfm-dashboard h3 {
    font-size: 22px;
    margin-top: 32px;
}

.rfm-booking-shell p,
.rfm-instructor-listing p,
.rfm-booking-calendar-wrap p,
.rfm-dashboard p {
    color: var(--rfm-text-2);
    font-size: 15px;
    line-height: 1.55;
}

/* Mono label utility (used for "STEP", section labels, dates) */
.rfm-mono-label {
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rfm-text-3);
    font-weight: 500;
}

/* ───────────── Buttons ───────────── */
.rfm-btn,
.rfm-booking-shell .button,
.rfm-instructor-listing .button,
.rfm-booking-calendar-wrap .button,
.rfm-dashboard .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--rfm-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: var(--rfm-radius-pill);
    border: 1px solid var(--rfm-line-2);
    background: var(--rfm-surface);
    color: var(--rfm-text);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s, color .15s;
}

.rfm-btn:hover,
.rfm-booking-shell .button:hover,
.rfm-instructor-listing .button:hover,
.rfm-booking-calendar-wrap .button:hover,
.rfm-dashboard .button:hover {
    border-color: var(--rfm-accent-2);
    color: var(--rfm-accent-3);
    transform: translateY(-1px);
}

.rfm-btn-primary,
.rfm-btn.rfm-btn-primary,
.rfm-booking-shell .button-primary {
    background: var(--rfm-accent);
    border-color: var(--rfm-accent);
    color: #fff;
    box-shadow: 0 8px 24px var(--rfm-accent-glow);
}

.rfm-btn-primary:hover,
.rfm-btn.rfm-btn-primary:hover,
.rfm-booking-shell .button-primary:hover {
    background: var(--rfm-accent-2);
    border-color: var(--rfm-accent-2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(157, 107, 255, 0.5);
}

.rfm-btn-danger {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.4);
    color: #FCA5A5;
}

.rfm-btn-danger:hover {
    background: rgba(244, 63, 94, 0.24);
    border-color: var(--rfm-danger);
    color: #fff;
    transform: translateY(-1px);
}

.rfm-btn-sm {
    padding: 8px 14px;
    font-size: 12px;
}

/* ───────────── Pills / chips / status badges ───────────── */
.rfm-pill,
.rfm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(7, 7, 10, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rfm-radius-pill);
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rfm-text);
    backdrop-filter: blur(8px);
}

.rfm-pill-accent {
    background: var(--rfm-accent-soft);
    border-color: rgba(157, 107, 255, 0.4);
    color: var(--rfm-accent-3);
}

.rfm-status-confirmed { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.4); color: var(--rfm-success); }
.rfm-status-completed { background: rgba(157, 107, 255, 0.16); border-color: rgba(157, 107, 255, 0.4); color: var(--rfm-accent-3); }
.rfm-status-cancelled { background: rgba(244, 63, 94, 0.16); border-color: rgba(244, 63, 94, 0.4); color: #FCA5A5; }
.rfm-status-no-show { background: rgba(255, 179, 71, 0.16); border-color: rgba(255, 179, 71, 0.4); color: var(--rfm-warn); }

/* ───────────── Cards (instructor listing, booking summary, etc.) ───────────── */
.rfm-card,
.rfm-instructor-card,
.rfm-booking-card,
.rfm-session-type-card {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2, .7, .3, 1), border-color .2s, box-shadow .2s;
    position: relative;
    color: var(--rfm-text);
}

.rfm-card:hover,
.rfm-instructor-card:hover,
.rfm-session-type-card:hover {
    transform: translateY(-3px);
    border-color: var(--rfm-accent);
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 16px 48px -16px rgba(157, 107, 255, 0.25);
}

/* ───────────── Instructor listing grid ───────────── */
.rfm-instructor-listing {
    /* shell handled above */
}

.rfm-instructor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.rfm-instructor-card {
    cursor: pointer;
}

.rfm-instructor-photo,
.rfm-instructor-card .rfm-instructor-photo {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--rfm-bg-2), var(--rfm-bg-3));
    overflow: hidden;
    position: relative;
}

.rfm-instructor-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(7, 7, 10, 0.7) 100%);
    pointer-events: none;
}

.rfm-instructor-photo img,
.rfm-instructor-card .rfm-instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.rfm-instructor-card:hover .rfm-instructor-photo img {
    transform: scale(1.05);
}

.rfm-instructor-photo-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--rfm-accent), var(--rfm-accent-2));
    color: #fff;
    font-family: var(--rfm-font-display);
    font-weight: 600;
    font-size: 36px;
    letter-spacing: -0.02em;
}

.rfm-instructor-info,
.rfm-instructor-card .rfm-instructor-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.rfm-instructor-name,
.rfm-instructor-card h3 {
    font-family: var(--rfm-font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--rfm-text);
    margin: 0;
}

.rfm-instructor-bio,
.rfm-instructor-card .rfm-instructor-bio {
    font-size: 13px;
    color: var(--rfm-text-3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rfm-instructor-card .rfm-session-types,
.rfm-instructor-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rfm-session-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--rfm-accent-soft);
    border: 1px solid rgba(157, 107, 255, 0.4);
    border-radius: var(--rfm-radius-pill);
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--rfm-accent-3);
}

.rfm-instructor-card .rfm-instructor-foot,
.rfm-instructor-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--rfm-line-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rfm-instructor-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rfm-instructor-price .rfm-price-from {
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    color: var(--rfm-text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rfm-instructor-price .rfm-price-amount {
    font-family: var(--rfm-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--rfm-text);
}

/* ───────────── Booking wizard — step indicator ───────────── */
.rfm-step-indicator,
.rfm-wizard-steps,
.rfm-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 32px;
    padding: 6px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-pill);
}

.rfm-step,
.rfm-wizard-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    font-family: var(--rfm-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--rfm-text-3);
    border-radius: var(--rfm-radius-pill);
    transition: all .2s;
}

.rfm-step .rfm-step-num,
.rfm-wizard-step .rfm-step-num,
.rfm-wizard-step::before {
    content: attr(data-step);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rfm-bg-2);
    border: 1px solid var(--rfm-line-2);
    color: var(--rfm-text-3);
    display: grid;
    place-items: center;
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.rfm-step.active,
.rfm-step.rfm-step-active,
.rfm-wizard-step.active,
.rfm-booking-widget .rfm-step.rfm-step-active,
.rfm-booking-widget .rfm-step-active {
    background: var(--rfm-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--rfm-accent-glow) !important;
}

.rfm-step.active .rfm-step-num,
.rfm-step.rfm-step-active .rfm-step-num,
.rfm-wizard-step.active::before {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.rfm-step.complete,
.rfm-wizard-step.complete {
    color: var(--rfm-text-2);
}

.rfm-step.complete .rfm-step-num,
.rfm-wizard-step.complete::before {
    background: var(--rfm-accent-soft);
    border-color: rgba(157, 107, 255, 0.5);
    color: var(--rfm-accent-3);
}

/* ───────────── Booking wizard — instructor profile bar ───────────── */
.rfm-wizard-instructor {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    margin-bottom: 24px;
}

.rfm-wizard-instructor .rfm-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rfm-accent), var(--rfm-accent-2));
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--rfm-font-display);
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}

.rfm-wizard-instructor h3,
.rfm-wizard-instructor .rfm-wizard-title {
    margin: 0 !important;
    font-size: 20px !important;
    font-family: var(--rfm-font-display);
}

.rfm-wizard-instructor p {
    margin: 0;
    color: var(--rfm-text-3);
    font-size: 13px;
}

/* ───────────── Booking wizard — step 1 (session type) ───────────── */
.rfm-session-types-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
}

.rfm-session-type-card {
    padding: 22px 24px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    cursor: pointer;
    text-align: left;
    transition: all .2s;
    color: var(--rfm-text);
}

.rfm-session-type-card:hover {
    border-color: var(--rfm-accent-2);
    background: var(--rfm-surface-2);
}

.rfm-session-type-card.selected {
    border-color: var(--rfm-accent);
    background: var(--rfm-accent-soft);
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 8px 32px var(--rfm-accent-glow);
}

.rfm-session-type-card h3,
.rfm-session-type-card .rfm-session-type-title {
    font-family: var(--rfm-font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--rfm-text);
    margin: 0 0 6px;
}

.rfm-session-type-card .rfm-session-type-duration {
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    color: var(--rfm-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rfm-session-type-card .rfm-session-type-price {
    font-family: var(--rfm-font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--rfm-text);
    margin-top: 14px;
}

/* ───────────── Booking wizard — step 2 (calendar) ───────────── */
.rfm-calendar-wrap {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    padding: 22px 24px;
}

.rfm-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.rfm-calendar-header h4,
.rfm-calendar-month {
    font-family: var(--rfm-font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--rfm-text);
    letter-spacing: -0.01em;
    margin: 0;
}

.rfm-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rfm-calendar-nav button,
.rfm-calendar-prev,
.rfm-calendar-next {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--rfm-line-2);
    border-radius: var(--rfm-radius-pill);
    color: var(--rfm-text-2);
    font-family: var(--rfm-font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
}

.rfm-calendar-nav button:hover,
.rfm-calendar-prev:hover,
.rfm-calendar-next:hover {
    border-color: var(--rfm-accent-2);
    color: var(--rfm-accent-3);
}

.rfm-calendar table,
.rfm-calendar-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

.rfm-calendar th {
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rfm-text-3);
    text-align: center;
    font-weight: 500;
    padding: 10px 0;
}

.rfm-calendar td {
    text-align: center;
    height: 48px;
    border-radius: var(--rfm-radius-sm);
    color: var(--rfm-text-3);
    font-family: var(--rfm-font-mono);
    font-size: 14px;
    background: transparent;
    transition: all .15s;
    cursor: default;
}

.rfm-calendar td.rfm-day-available,
.rfm-calendar td.available {
    background: rgba(157, 107, 255, 0.18);
    border: 1px solid rgba(157, 107, 255, 0.4);
    color: var(--rfm-accent-3);
    cursor: pointer;
    font-weight: 600;
}

.rfm-calendar td.rfm-day-available:hover,
.rfm-calendar td.available:hover {
    background: var(--rfm-accent);
    color: #fff;
    border-color: var(--rfm-accent);
    box-shadow: 0 4px 16px var(--rfm-accent-glow);
    transform: translateY(-1px);
}

.rfm-calendar td.rfm-day-selected,
.rfm-calendar td.selected {
    background: var(--rfm-accent);
    color: #fff;
    border-color: var(--rfm-accent);
    box-shadow: 0 4px 16px var(--rfm-accent-glow);
}

/* Grid calendar (div-based, used by JS) */
#rfm-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    padding: 18px;
    margin-bottom: 16px;
}

.rfm-cal-header {
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rfm-text-3);
    text-align: center;
    font-weight: 500;
    padding: 8px 0;
}

.rfm-cal-day {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rfm-radius-sm);
    font-family: var(--rfm-font-mono);
    font-size: 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--rfm-text-3);
    cursor: default;
    transition: all .15s;
    padding: 0;
}

.rfm-cal-day.rfm-cal-empty {
    visibility: hidden;
}

.rfm-cal-day.disabled {
    color: rgba(160, 145, 192, 0.35);
    cursor: not-allowed;
}

.rfm-cal-day.available {
    background: rgba(157, 107, 255, 0.12);
    border-color: rgba(157, 107, 255, 0.32);
    color: var(--rfm-accent-3);
    cursor: pointer;
    font-weight: 600;
}

.rfm-cal-day.available:hover {
    background: var(--rfm-accent);
    color: #fff;
    border-color: var(--rfm-accent);
    box-shadow: 0 4px 16px var(--rfm-accent-glow);
    transform: translateY(-1px);
}

.rfm-cal-day.today {
    box-shadow: inset 0 0 0 1px var(--rfm-accent-2);
}

.rfm-cal-day.selected {
    background: var(--rfm-accent) !important;
    color: #fff !important;
    border-color: var(--rfm-accent) !important;
    box-shadow: 0 4px 16px var(--rfm-accent-glow) !important;
}

/* Time slots container (JS-rendered direct grid) */
#rfm-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

/* ───────────── Booking wizard — step 3 (time picker) ───────────── */
.rfm-time-slots-grid,
.rfm-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.rfm-time-slot {
    padding: 16px 18px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line-2);
    border-radius: var(--rfm-radius-md);
    color: var(--rfm-text);
    font-family: var(--rfm-font-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.rfm-time-slot:hover {
    border-color: var(--rfm-accent);
    background: var(--rfm-surface-2);
    transform: translateY(-1px);
}

.rfm-time-slot.selected {
    border-color: var(--rfm-accent);
    background: var(--rfm-accent-soft);
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 8px 32px var(--rfm-accent-glow);
    color: var(--rfm-accent-3);
}

.rfm-time-slot .rfm-slot-time {
    font-size: 16px;
    font-weight: 600;
    color: var(--rfm-text);
}

.rfm-time-slot.selected .rfm-slot-time {
    color: var(--rfm-accent-3);
}

.rfm-time-slot .rfm-slot-utc {
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    color: var(--rfm-text-3);
    letter-spacing: 0.04em;
}

.rfm-time-slot.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--rfm-bg-2);
}

/* ───────────── Booking wizard — step 4 (confirm) ───────────── */
.rfm-confirm-card {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
}

.rfm-confirm-table {
    width: 100%;
    border-collapse: collapse;
}

.rfm-confirm-table tr td {
    padding: 14px 0;
    border-bottom: 1px dashed var(--rfm-line-2);
    color: var(--rfm-text);
    font-size: 14px;
    vertical-align: top;
}

.rfm-confirm-table tr:last-child td {
    border-bottom: none;
}

.rfm-confirm-table td:first-child {
    width: 140px;
    color: var(--rfm-text-3);
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.rfm-confirm-table td strong {
    color: var(--rfm-text);
    font-weight: 500;
    font-family: var(--rfm-font-body);
}

.rfm-tz-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--rfm-accent-soft);
    border: 1px solid rgba(157, 107, 255, 0.4);
    border-radius: var(--rfm-radius-pill);
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    color: var(--rfm-accent-3);
    letter-spacing: 0.04em;
    margin-left: 8px;
}

/* Dual-TZ display inside the confirm/booking cards */
.rfm-tz-display {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.rfm-tz-display__local {
    font-weight: 500;
    color: var(--rfm-text);
    font-size: 15px;
}

.rfm-tz-display__server {
    font-size: 13px;
    color: var(--rfm-text-3);
}

.rfm-tz-time {
    font-weight: 600;
    color: var(--rfm-text);
    font-family: var(--rfm-font-display);
}

.rfm-tz-time-secondary {
    font-weight: 500;
    color: var(--rfm-text-2);
}

.rfm-tz-meta {
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    color: var(--rfm-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 6px;
}

.rfm-tz-date {
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    color: var(--rfm-text-3);
    letter-spacing: 0.04em;
}

/* ───────────── Add-to-Calendar buttons (dark theme) ───────────── */
.rfm-calendar-buttons {
    margin: 18px 0;
    padding: 18px 20px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
}

.rfm-calendar-buttons__label {
    display: block;
    font-family: var(--rfm-font-mono);
    font-size: 10px;
    color: var(--rfm-text-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    font-weight: 500;
}

.rfm-calendar-buttons__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rfm-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--rfm-bg-1);
    border: 1px solid var(--rfm-line-2);
    border-radius: var(--rfm-radius-pill);
    font-family: var(--rfm-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--rfm-text-2);
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
}

.rfm-cal-btn:hover {
    border-color: var(--rfm-accent-2);
    color: var(--rfm-accent-3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(123, 63, 228, 0.2);
}

.rfm-cal-btn svg {
    flex-shrink: 0;
    color: var(--rfm-accent-2);
}

.rfm-cal-btn--google:hover { border-color: #4285F4; color: #BBD3FF; }
.rfm-cal-btn--google:hover svg { color: #4285F4; }
.rfm-cal-btn--apple:hover { border-color: var(--rfm-text-2); color: #fff; }
.rfm-cal-btn--apple:hover svg { color: #fff; }
.rfm-cal-btn--outlook:hover { border-color: #0078D4; color: #B6E0FF; }
.rfm-cal-btn--outlook:hover svg { color: #0078D4; }

/* ───────────── My Bookings list ───────────── */
.rfm-dashboard {
    /* shell handled above */
}

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

.rfm-bookings-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 32px;
}

.rfm-booking-card {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}

.rfm-booking-card:hover {
    border-color: var(--rfm-line-3);
    transform: translateY(-1px);
}

.rfm-booking-card.rfm-booking-past {
    opacity: 0.7;
}

.rfm-booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--rfm-bg-2);
    border-bottom: 1px solid var(--rfm-line);
}

.rfm-booking-date {
    font-family: var(--rfm-font-mono);
    font-size: 12px;
    color: var(--rfm-text-2);
    letter-spacing: 0.04em;
}

.rfm-booking-card-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfm-booking-card-body p {
    margin: 0;
    color: var(--rfm-text-2);
    font-size: 14px;
}

.rfm-booking-card-body p strong {
    color: var(--rfm-text-3);
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    display: inline-block;
    min-width: 100px;
}

.rfm-booking-card-body a {
    color: var(--rfm-accent-3);
    text-decoration: none;
    font-weight: 500;
}

.rfm-booking-card-body a:hover {
    color: var(--rfm-accent-2);
}

.rfm-booking-card-footer {
    padding: 14px 20px;
    background: var(--rfm-bg-1);
    border-top: 1px solid var(--rfm-line);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.rfm-booking-card-footer .rfm-muted {
    font-family: var(--rfm-font-mono);
    font-size: 11px;
    color: var(--rfm-text-3);
    letter-spacing: 0.04em;
}

/* ───────────── Empty / muted states ───────────── */
.rfm-empty-state,
.rfm-muted {
    color: var(--rfm-text-3);
}

/* ───────────── Booking widget — page-level containers ───────────── */
.rfm-booking-header {
    margin-bottom: 28px;
}

.rfm-booking-instructor {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-md);
}

.rfm-booking-instructor .rfm-booking-avatar,
.rfm-booking-instructor img.avatar,
.rfm-booking-instructor .avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 1px solid rgba(157, 107, 255, 0.3);
    flex-shrink: 0;
}

.rfm-booking-instructor h2 {
    font-size: 22px !important;
    margin: 0 0 4px !important;
}

.rfm-booking-instructor p {
    margin: 0;
    color: var(--rfm-text-3);
    font-size: 13px;
    font-family: var(--rfm-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rfm-booking-step {
    margin-top: 8px;
}

.rfm-booking-step h3 {
    font-family: var(--rfm-font-display);
    font-size: 22px;
    margin: 0 0 18px;
    color: var(--rfm-text);
    letter-spacing: -0.01em;
}

/* Session types list (JS adds the buttons directly into #rfm-session-types) */
#rfm-session-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.rfm-session-type-card .rfm-session-meta {
    margin: 4px 0 0;
    color: var(--rfm-text-3);
    font-size: 13px;
}

.rfm-session-type-card .rfm-session-price {
    margin: 12px 0 0;
    font-family: var(--rfm-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--rfm-accent-3);
}

.rfm-session-type-card.selected,
.rfm-session-type-card[aria-pressed="true"] {
    border-color: var(--rfm-accent);
    background: var(--rfm-accent-soft);
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 12px 40px var(--rfm-accent-glow);
}

/* Confirm card (uses .rfm-confirm-box from template) */
.rfm-confirm-box {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
}

.rfm-confirm-box h3 {
    margin-top: 0 !important;
    font-family: var(--rfm-font-display);
    font-size: 24px;
}

.rfm-confirm-box .rfm-btn-lg {
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
    margin-top: 18px;
}

.rfm-booking-status {
    margin-top: 12px;
}

/* Back-to-step link buttons */
.rfm-btn-link,
.rfm-btn.rfm-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--rfm-text-3) !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    margin-top: 14px;
}

.rfm-btn-link:hover,
.rfm-btn.rfm-btn-link:hover {
    color: var(--rfm-accent-3) !important;
    transform: none !important;
}

/* Notices */
.rfm-notice {
    padding: 14px 18px;
    border-radius: var(--rfm-radius-md);
    border: 1px solid var(--rfm-line);
    background: var(--rfm-surface);
    color: var(--rfm-text);
    margin-bottom: 16px;
    font-size: 14px;
}

.rfm-notice-warning {
    border-color: rgba(255, 200, 100, 0.3);
    background: rgba(255, 200, 100, 0.08);
    color: #ffd28a;
}

.rfm-notice-success {
    border-color: rgba(120, 255, 175, 0.3);
    background: rgba(120, 255, 175, 0.08);
    color: #9ff5c4;
}

.rfm-notice-error {
    border-color: rgba(255, 120, 120, 0.3);
    background: rgba(255, 120, 120, 0.1);
    color: #ff9b9b;
}

.rfm-notice a {
    color: var(--rfm-accent-3);
}

/* Loading placeholder */
.rfm-loading-placeholder,
.rfm-loading {
    padding: 24px;
    text-align: center;
    color: var(--rfm-text-3);
    font-family: var(--rfm-font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Calendar nav (Prev/Next month buttons in template) */
.rfm-booking-calendar-wrap .rfm-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-pill);
    padding: 6px 8px;
}

.rfm-booking-calendar-wrap #rfm-cal-month-label {
    font-family: var(--rfm-font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--rfm-text);
}

/* Timezone notice in step 3 */
#rfm-timezone-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--rfm-accent-soft);
    border: 1px solid rgba(157, 107, 255, 0.3);
    border-radius: var(--rfm-radius-sm);
    color: var(--rfm-accent-3);
    font-family: var(--rfm-font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}

#rfm-timezone-notice:empty {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY OVERRIDES — match the .rfm-booking-widget specificity used
   by public.css and undo the hardcoded #fff / light-gray colors so
   the dark-purple tokens win.
   ═══════════════════════════════════════════════════════════════ */
.rfm-booking-widget .rfm-session-type-card {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: var(--rfm-text) !important;
    box-shadow: none !important;
    border-radius: var(--rfm-radius-md) !important;
    transition: all .2s ease !important;
}

.rfm-booking-widget .rfm-session-type-card:hover {
    border-color: var(--rfm-accent) !important;
    background: var(--rfm-surface-2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.rfm-booking-widget .rfm-session-type-card.selected {
    border-color: var(--rfm-accent) !important;
    background: var(--rfm-accent-soft) !important;
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 12px 40px var(--rfm-accent-glow) !important;
}

.rfm-booking-widget .rfm-session-type-card h4 {
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
}

.rfm-booking-widget .rfm-session-type-card .rfm-session-meta {
    color: var(--rfm-text-3) !important;
}

.rfm-booking-widget .rfm-session-type-card .rfm-session-price {
    color: var(--rfm-accent-3) !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
}

.rfm-booking-widget .rfm-booking-instructor h2 {
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
}

.rfm-booking-widget .rfm-booking-instructor p,
.rfm-booking-widget .rfm-booking-instructor .rfm-muted {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
}

.rfm-booking-widget .rfm-booking-instructor img,
.rfm-booking-widget .rfm-booking-instructor .avatar {
    width: 64px !important;
    height: 64px !important;
    border: 1px solid rgba(157, 107, 255, 0.3) !important;
}

/* Calendar nav within widget */
.rfm-booking-widget .rfm-calendar-nav {
    color: var(--rfm-text) !important;
}

.rfm-booking-widget #rfm-cal-month-label {
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Confirm box overrides */
.rfm-booking-widget .rfm-confirm-box {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: var(--rfm-text) !important;
    border-radius: var(--rfm-radius-lg) !important;
}

.rfm-booking-widget .rfm-confirm-box h3 {
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-display) !important;
}

.rfm-booking-widget .rfm-confirm-table {
    background: transparent !important;
    box-shadow: none !important;
}

.rfm-booking-widget .rfm-confirm-table td {
    background: transparent !important;
    color: var(--rfm-text) !important;
    border-bottom: 1px dashed var(--rfm-line-2) !important;
    padding: 14px 0 !important;
}

.rfm-booking-widget .rfm-confirm-table td:first-child {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: transparent !important;
}

.rfm-booking-widget #rfm-confirm-details {
    max-width: 100% !important;
}

.rfm-booking-widget .rfm-booking-step h3 {
    color: var(--rfm-text) !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* Step indicator inactive — match public.css specificity */
.rfm-booking-widget .rfm-step {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: var(--rfm-text-3) !important;
    border-radius: var(--rfm-radius-pill) !important;
}

.rfm-booking-widget .rfm-steps {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    border-radius: var(--rfm-radius-pill) !important;
    padding: 6px !important;
    gap: 4px !important;
}

.rfm-booking-widget .rfm-step .rfm-step-num {
    background: var(--rfm-bg-2) !important;
    color: var(--rfm-text-3) !important;
}

.rfm-booking-widget .rfm-step-active .rfm-step-num {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* Buttons inside the widget */
.rfm-booking-widget .rfm-btn-primary,
.rfm-booking-widget button.rfm-btn-primary {
    background: var(--rfm-accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px var(--rfm-accent-glow) !important;
    border-radius: var(--rfm-radius-pill) !important;
    font-family: var(--rfm-font-body) !important;
    font-weight: 500 !important;
    transition: all .2s !important;
}

.rfm-booking-widget .rfm-btn-primary:hover {
    background: var(--rfm-accent-2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px var(--rfm-accent-glow) !important;
}

.rfm-booking-widget .rfm-btn,
.rfm-booking-widget button.rfm-btn {
    font-family: var(--rfm-font-body) !important;
    border-radius: var(--rfm-radius-pill) !important;
}

.rfm-booking-widget .rfm-btn-link,
.rfm-booking-widget button.rfm-btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--rfm-text-3) !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.rfm-booking-widget .rfm-btn-link:hover {
    color: var(--rfm-accent-3) !important;
}

/* Notices inside widget */
.rfm-booking-widget .rfm-notice-warning {
    background: rgba(255, 200, 100, 0.08) !important;
    border-color: rgba(255, 200, 100, 0.3) !important;
    color: #ffd28a !important;
}

.rfm-booking-widget .rfm-notice-success {
    background: rgba(120, 255, 175, 0.08) !important;
    border-color: rgba(120, 255, 175, 0.3) !important;
    color: #9ff5c4 !important;
}

.rfm-booking-widget .rfm-notice-error {
    background: rgba(255, 120, 120, 0.1) !important;
    border-color: rgba(255, 120, 120, 0.3) !important;
    color: #ff9b9b !important;
}

/* Time slot specificity */
.rfm-booking-widget .rfm-time-slot {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line-2) !important;
    color: var(--rfm-text) !important;
    border-radius: var(--rfm-radius-md) !important;
}

.rfm-booking-widget .rfm-time-slot:hover:not(.unavailable) {
    border-color: var(--rfm-accent) !important;
    background: var(--rfm-surface-2) !important;
    transform: translateY(-1px) !important;
}

.rfm-booking-widget .rfm-time-slot.selected {
    border-color: var(--rfm-accent) !important;
    background: var(--rfm-accent-soft) !important;
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 8px 32px var(--rfm-accent-glow) !important;
}

.rfm-booking-widget .rfm-slot-time {
    color: var(--rfm-text) !important;
    font-weight: 600 !important;
}

.rfm-booking-widget .rfm-slot-utc {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
}

/* Calendar grid inside widget */
.rfm-booking-widget #rfm-calendar {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
}

.rfm-booking-widget .rfm-cal-day.available {
    background: rgba(157, 107, 255, 0.12) !important;
    border-color: rgba(157, 107, 255, 0.32) !important;
    color: var(--rfm-accent-3) !important;
}

.rfm-booking-widget .rfm-cal-day.available:hover {
    background: var(--rfm-accent) !important;
    color: #fff !important;
    border-color: var(--rfm-accent) !important;
}

.rfm-booking-widget .rfm-cal-day.selected {
    background: var(--rfm-accent) !important;
    color: #fff !important;
}

/* ───────────── Dashboard — booking cards ───────────── */
.rfm-dashboard .rfm-bookings-list,
.rfm-booking-widget .rfm-bookings-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
    gap: 16px !important;
}

.rfm-dashboard .rfm-booking-card,
.rfm-booking-widget .rfm-booking-card {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    border-radius: var(--rfm-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden;
    transition: all .2s ease !important;
}

.rfm-dashboard .rfm-booking-card:hover {
    border-color: rgba(157, 107, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.rfm-dashboard .rfm-booking-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: var(--rfm-bg-1) !important;
    border-bottom: 1px solid var(--rfm-line) !important;
}

.rfm-dashboard .rfm-booking-card-body {
    padding: 18px 20px !important;
    background: var(--rfm-surface) !important;
}

.rfm-dashboard .rfm-booking-card-body p,
.rfm-dashboard .rfm-booking-card-body p strong,
.rfm-dashboard .rfm-booking-card-body p span {
    color: var(--rfm-text-2) !important;
    font-size: 14px !important;
}

.rfm-dashboard .rfm-booking-card-body p strong {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    display: inline-block;
    min-width: 90px;
}

.rfm-dashboard .rfm-booking-card-body p a {
    color: var(--rfm-accent-3) !important;
    text-decoration: none !important;
}

.rfm-dashboard .rfm-booking-card-body p a:hover {
    color: var(--rfm-accent-2) !important;
    text-decoration: underline !important;
}

.rfm-dashboard .rfm-booking-card-footer {
    padding: 12px 20px !important;
    background: var(--rfm-bg-1) !important;
    border-top: 1px solid var(--rfm-line) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.rfm-dashboard .rfm-booking-card-footer .rfm-muted {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
}

.rfm-dashboard .rfm-booking-past {
    opacity: 0.6 !important;
}

/* Status pills (dark theme) */
.rfm-dashboard .rfm-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: var(--rfm-radius-pill) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.rfm-dashboard .rfm-status-confirmed {
    background: rgba(52, 211, 153, 0.15) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.rfm-dashboard .rfm-status-completed {
    background: rgba(157, 107, 255, 0.15) !important;
    color: var(--rfm-accent-3) !important;
    border: 1px solid rgba(157, 107, 255, 0.3) !important;
}

.rfm-dashboard .rfm-status-cancelled {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fda4af !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

.rfm-dashboard .rfm-status-no-show,
.rfm-dashboard .rfm-status-pending {
    background: rgba(255, 179, 71, 0.15) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(255, 179, 71, 0.3) !important;
}

.rfm-dashboard .rfm-booking-date {
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    color: var(--rfm-text-3) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Dashboard header with title + Book CTA */
.rfm-dashboard .rfm-dashboard-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--rfm-line) !important;
}

.rfm-dashboard .rfm-dashboard-header h2 {
    margin: 0 !important;
    font-family: var(--rfm-font-display) !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: var(--rfm-text) !important;
}

.rfm-dashboard h2,
.rfm-dashboard h3,
.rfm-dashboard h4 {
    color: var(--rfm-text) !important;
}

.rfm-dashboard h3 {
    font-family: var(--rfm-font-display) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 32px 0 16px !important;
    letter-spacing: -0.01em !important;
}

.rfm-dashboard .rfm-empty-state,
.rfm-dashboard .rfm-muted {
    color: var(--rfm-text-3) !important;
    font-style: normal !important;
}

/* Star inside dashboard buttons */
.rfm-dashboard .rfm-btn-primary {
    background: var(--rfm-accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: var(--rfm-radius-pill) !important;
    font-family: var(--rfm-font-body) !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 16px var(--rfm-accent-glow) !important;
    text-decoration: none !important;
}

.rfm-dashboard .rfm-btn-primary:hover {
    background: var(--rfm-accent-2) !important;
    transform: translateY(-1px) !important;
}

.rfm-dashboard .rfm-btn-danger {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fda4af !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    padding: 8px 16px !important;
    border-radius: var(--rfm-radius-pill) !important;
    font-family: var(--rfm-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.rfm-dashboard .rfm-btn-danger:hover {
    background: rgba(244, 63, 94, 0.25) !important;
    color: #fff !important;
    border-color: var(--rfm-danger) !important;
}

/* ───────────── Thank-you page (post-purchase) ───────────── */
.rfm-thankyou-calendar .rfm-page-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}

.rfm-thankyou-calendar .rfm-page-header .rfm-mono-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line-2);
    border-radius: var(--rfm-radius-pill);
    margin-bottom: 16px;
}

.rfm-thankyou-calendar .rfm-page-header .rfm-mono-label::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--rfm-success);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--rfm-success);
}

.rfm-thankyou-calendar .rfm-page-header h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    margin-bottom: 12px;
}

.rfm-thankyou-card {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-line);
    border-radius: var(--rfm-radius-lg);
    padding: 24px 28px;
    margin: 0 auto 16px;
    max-width: 720px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.rfm-thankyou-title {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--rfm-line-2);
}

.rfm-thankyou-title h3 {
    margin: 8px 0 0 !important;
    font-family: var(--rfm-font-display);
    font-size: 20px;
    color: var(--rfm-text);
    letter-spacing: -0.01em;
}

.rfm-thankyou-time {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfm-thankyou-when {
    color: var(--rfm-text);
    font-size: 16px;
    font-family: var(--rfm-font-body);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   READABILITY FIXES (audit-driven, WCAG-AA compliant)
   These overrides defeat the legacy public.css and theme styles
   that hardcode white backgrounds or dark text on the wrappers.
   ═══════════════════════════════════════════════════════════════ */

/* Force ALL headings inside our dark wrappers to white — beats themes
   that set dark heading colors. */
body .rfm-booking-shell h1, body .rfm-booking-shell h2, body .rfm-booking-shell h3,
body .rfm-booking-shell h4, body .rfm-booking-shell h5, body .rfm-booking-shell h6,
body .rfm-instructor-listing h1, body .rfm-instructor-listing h2, body .rfm-instructor-listing h3,
body .rfm-instructor-listing h4, body .rfm-instructor-listing h5, body .rfm-instructor-listing h6,
body .rfm-booking-calendar-wrap h1, body .rfm-booking-calendar-wrap h2, body .rfm-booking-calendar-wrap h3,
body .rfm-booking-calendar-wrap h4, body .rfm-booking-calendar-wrap h5, body .rfm-booking-calendar-wrap h6,
body .rfm-dashboard h1, body .rfm-dashboard h2, body .rfm-dashboard h3,
body .rfm-dashboard h4, body .rfm-dashboard h5, body .rfm-dashboard h6,
.entry-content .rfm-booking-shell h2,
.entry-content .rfm-instructor-listing h2,
.entry-content .rfm-booking-calendar-wrap h2,
.entry-content .rfm-dashboard h2 {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
}

/* Instructor listing page-header heading — full white */
.rfm-instructor-listing .rfm-page-header h2,
body .rfm-instructor-listing .rfm-page-header h2,
.entry-content .rfm-instructor-listing .rfm-page-header h2 {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

.rfm-instructor-listing .rfm-page-header p,
body .rfm-instructor-listing .rfm-page-header p {
    color: var(--rfm-text-2) !important;
}

/* INSTRUCTOR CARD — beat public.css's `background: #fff !important` */
.rfm-instructor-listing .rfm-instructor-card,
body .rfm-instructor-listing .rfm-instructor-card,
.entry-content .rfm-instructor-listing .rfm-instructor-card {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: var(--rfm-text) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
    border-radius: var(--rfm-radius-lg) !important;
}

.rfm-instructor-listing .rfm-instructor-card:hover,
body .rfm-instructor-listing .rfm-instructor-card:hover {
    border-color: var(--rfm-accent) !important;
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 16px 48px -12px var(--rfm-accent-glow) !important;
    transform: translateY(-3px) !important;
}

.rfm-instructor-listing .rfm-instructor-card h3,
body .rfm-instructor-listing .rfm-instructor-card h3 {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
}

.rfm-instructor-listing .rfm-instructor-card .rfm-instructor-bio,
body .rfm-instructor-listing .rfm-instructor-card .rfm-instructor-bio {
    color: var(--rfm-text-2) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.rfm-instructor-listing .rfm-instructor-card .rfm-instructor-body,
body .rfm-instructor-listing .rfm-instructor-card .rfm-instructor-body {
    background: transparent !important;
    color: var(--rfm-text) !important;
}

.rfm-instructor-listing .rfm-instructor-card .rfm-instructor-foot,
body .rfm-instructor-listing .rfm-instructor-foot {
    border-top: 1px dashed var(--rfm-line-2) !important;
}

.rfm-instructor-listing .rfm-price-from,
body .rfm-instructor-listing .rfm-price-from {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: block;
    margin-bottom: 2px;
}

.rfm-instructor-listing .rfm-price-amount,
body .rfm-instructor-listing .rfm-price-amount {
    color: var(--rfm-accent-3) !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.rfm-instructor-listing .rfm-instructor-card .rfm-session-type-pill,
body .rfm-instructor-listing .rfm-session-type-pill {
    background: var(--rfm-accent-soft) !important;
    border: 1px solid rgba(157, 107, 255, 0.4) !important;
    color: var(--rfm-accent-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
}

/* Status pill — brighter green for AA contrast */
.rfm-dashboard .rfm-status-confirmed,
body .rfm-dashboard .rfm-status-confirmed {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #b6f5d8 !important;          /* brighter mint, 9:1 on dark */
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
}

.rfm-dashboard .rfm-status-completed,
body .rfm-dashboard .rfm-status-completed {
    background: rgba(157, 107, 255, 0.15) !important;
    color: #DCC4FF !important;
    border: 1px solid rgba(157, 107, 255, 0.4) !important;
}

.rfm-dashboard .rfm-status-cancelled,
body .rfm-dashboard .rfm-status-cancelled {
    background: rgba(244, 63, 94, 0.12) !important;
    color: #ffc1c8 !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

.rfm-dashboard .rfm-status-no-show,
.rfm-dashboard .rfm-status-pending,
body .rfm-dashboard .rfm-status-no-show,
body .rfm-dashboard .rfm-status-pending {
    background: rgba(255, 179, 71, 0.12) !important;
    color: #FFE3A8 !important;
    border: 1px solid rgba(255, 179, 71, 0.4) !important;
}

/* Calendar buttons — brighter purple text for AA */
.rfm-cal-btn,
body .rfm-cal-btn,
.rfm-dashboard .rfm-cal-btn,
.rfm-thankyou-card .rfm-cal-btn {
    color: var(--rfm-accent-3) !important;     /* #C9A8FF — 9.8:1 */
    background: var(--rfm-bg-1) !important;
    border: 1px solid var(--rfm-line-2) !important;
}

.rfm-cal-btn:hover,
body .rfm-cal-btn:hover {
    color: #fff !important;
    background: var(--rfm-accent) !important;
    border-color: var(--rfm-accent) !important;
}

/* Step indicator inactive labels — bump to text-2 */
.rfm-booking-widget .rfm-step:not(.rfm-step-active):not(.active) {
    color: var(--rfm-text-2) !important;
}

/* Time-slot UTC line was at text-3 — bump for second-line readability */
.rfm-booking-widget .rfm-slot-utc {
    color: var(--rfm-text-2) !important;
}

/* Disabled calendar dates — keep visually distinct but readable */
.rfm-booking-widget .rfm-cal-day.disabled,
body .rfm-cal-day.disabled {
    color: rgba(201, 190, 219, 0.35) !important;  /* text-2 at 35% */
}

/* Generic body p inside dashboards — make sure they're text-2 not text-3 */
body .rfm-dashboard p:not(.rfm-muted):not(.rfm-empty-state),
body .rfm-instructor-listing p:not(.rfm-muted):not(.rfm-empty-state),
body .rfm-booking-shell p:not(.rfm-muted):not(.rfm-empty-state) {
    color: var(--rfm-text-2) !important;
}

/* Mono labels global readability */
body .rfm-mono-label {
    color: var(--rfm-text-2) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.rfm-empty-state {
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--rfm-line-2);
    border-radius: var(--rfm-radius-md);
    color: var(--rfm-text-3);
    font-family: var(--rfm-font-mono);
    font-size: 12px;
}

/* ───────────── Form inputs ───────────── */
.rfm-booking-shell input[type="text"],
.rfm-booking-shell input[type="email"],
.rfm-booking-shell input[type="number"],
.rfm-booking-shell select,
.rfm-booking-shell textarea,
.rfm-booking-calendar-wrap input,
.rfm-booking-calendar-wrap select,
.rfm-booking-calendar-wrap textarea {
    background: var(--rfm-bg-1);
    border: 1px solid var(--rfm-line-2);
    border-radius: var(--rfm-radius-sm);
    color: var(--rfm-text);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

.rfm-booking-shell input:focus,
.rfm-booking-shell select:focus,
.rfm-booking-shell textarea:focus,
.rfm-booking-calendar-wrap input:focus,
.rfm-booking-calendar-wrap select:focus,
.rfm-booking-calendar-wrap textarea:focus {
    border-color: var(--rfm-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.18);
}

/* ───────────── Mobile ───────────── */
@media (max-width: 720px) {
    .rfm-booking-shell,
    .rfm-instructor-listing,
    .rfm-booking-calendar-wrap,
    .rfm-dashboard {
        padding: 32px 16px;
    }

    .rfm-step-indicator,
    .rfm-wizard-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 4px;
    }

    .rfm-step,
    .rfm-wizard-step {
        padding: 10px 6px;
        font-size: 11px;
    }

    .rfm-step-num,
    .rfm-wizard-step::before {
        display: none;
    }

    .rfm-time-slots-grid,
    .rfm-time-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rfm-confirm-table td:first-child {
        width: 100px;
    }

    .rfm-instructor-grid {
        grid-template-columns: 1fr;
    }

    .rfm-booking-card-body p strong {
        display: block;
        min-width: 0;
        margin-bottom: 2px;
    }
}

/* ============================================================
   FINAL READABILITY FIXES — beat public.css specificity
   ============================================================ */

/* --- Calendar day cells: public.css uses `button.rfm-cal-day.available`
   which beats `.rfm-cal-day.available`. Match with body + button. --- */
body .rfm-booking-widget button.rfm-cal-day,
body .rfm-booking-calendar-wrap button.rfm-cal-day {
    background: transparent !important;
    color: var(--rfm-text-3) !important;
    border: 1px solid transparent !important;
}

body .rfm-booking-widget button.rfm-cal-day.available,
body .rfm-booking-calendar-wrap button.rfm-cal-day.available {
    background: rgba(157, 107, 255, 0.14) !important;
    color: var(--rfm-accent-3) !important;        /* #C9A8FF — 9.75:1 on dark surface */
    border-color: rgba(157, 107, 255, 0.36) !important;
    font-weight: 600 !important;
}

body .rfm-booking-widget button.rfm-cal-day.available:hover,
body .rfm-booking-calendar-wrap button.rfm-cal-day.available:hover {
    background: var(--rfm-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--rfm-accent) !important;
}

body .rfm-booking-widget button.rfm-cal-day.selected,
body .rfm-booking-calendar-wrap button.rfm-cal-day.selected {
    background: var(--rfm-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--rfm-accent) !important;
}

body .rfm-booking-widget .rfm-cal-day.today,
body .rfm-booking-calendar-wrap .rfm-cal-day.today {
    box-shadow: inset 0 0 0 1px var(--rfm-accent-2) !important;
}

body .rfm-booking-widget .rfm-cal-header,
body .rfm-booking-calendar-wrap .rfm-cal-header {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    letter-spacing: 0.08em !important;
}

/* --- Calendar Prev/Next buttons: they are .rfm-btn .rfm-btn-sm,
   public.css forces background:#fff + color:var(--rfm-gray-700)
   (which we remapped to white). Override hard. --- */
body .rfm-booking-widget .rfm-calendar-nav button.rfm-btn,
body .rfm-booking-calendar-wrap .rfm-calendar-nav button.rfm-btn,
body .rfm-booking-widget button#rfm-cal-prev,
body .rfm-booking-widget button#rfm-cal-next,
body .rfm-booking-calendar-wrap button#rfm-cal-prev,
body .rfm-booking-calendar-wrap button#rfm-cal-next {
    background: var(--rfm-surface) !important;
    color: var(--rfm-accent-3) !important;       /* #C9A8FF on #150A24 = 9.75:1 */
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-pill) !important;
    padding: 8px 16px !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

body .rfm-booking-widget .rfm-calendar-nav button.rfm-btn:hover,
body .rfm-booking-calendar-wrap .rfm-calendar-nav button.rfm-btn:hover,
body .rfm-booking-widget button#rfm-cal-prev:hover,
body .rfm-booking-widget button#rfm-cal-next:hover {
    background: rgba(157, 107, 255, 0.18) !important;
    border-color: var(--rfm-accent) !important;
    color: #FFFFFF !important;
}

body .rfm-booking-widget #rfm-cal-month-label,
body .rfm-booking-calendar-wrap #rfm-cal-month-label {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* --- Time slot buttons: public.css uses `button.rfm-time-slot`
   forcing `background:#fff; color:var(--rfm-gray-800)`. Beat it. --- */
body .rfm-booking-widget button.rfm-time-slot,
body .rfm-booking-calendar-wrap button.rfm-time-slot {
    background: var(--rfm-surface) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-md) !important;
    box-shadow: none !important;
    font-family: var(--rfm-font-body) !important;
    font-weight: 600 !important;
}

body .rfm-booking-widget button.rfm-time-slot:hover:not(.unavailable),
body .rfm-booking-calendar-wrap button.rfm-time-slot:hover:not(.unavailable) {
    background: var(--rfm-surface-2) !important;
    border-color: var(--rfm-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px var(--rfm-accent-glow) !important;
    transform: translateY(-1px) !important;
}

body .rfm-booking-widget button.rfm-time-slot.selected,
body .rfm-booking-calendar-wrap button.rfm-time-slot.selected {
    background: var(--rfm-accent-soft) !important;
    color: #FFFFFF !important;
    border-color: var(--rfm-accent) !important;
    box-shadow: 0 0 0 1px var(--rfm-accent), 0 8px 32px var(--rfm-accent-glow) !important;
}

body .rfm-booking-widget button.rfm-time-slot.selected .rfm-slot-time,
body .rfm-booking-widget button.rfm-time-slot.selected .rfm-slot-utc {
    color: #FFFFFF !important;
}

body .rfm-booking-widget button.rfm-time-slot .rfm-slot-time {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

body .rfm-booking-widget button.rfm-time-slot .rfm-slot-utc {
    color: var(--rfm-text-2) !important;
    font-family: var(--rfm-font-mono) !important;
}

body .rfm-booking-widget .rfm-time-slot.unavailable,
body .rfm-booking-calendar-wrap .rfm-time-slot.unavailable {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(201, 190, 219, 0.35) !important;
    border-color: var(--rfm-line) !important;
    cursor: not-allowed !important;
}

/* --- Confirm box (Step 4): tighten borders, fix corner cut,
   improve table alignment. --- */
body .rfm-booking-widget .rfm-confirm-box {
    background: linear-gradient(180deg, var(--rfm-surface) 0%, var(--rfm-bg-2) 100%) !important;
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-lg) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
    padding: 32px 28px !important;
    text-align: left !important;
    overflow: visible !important;
}

body .rfm-booking-widget .rfm-confirm-box h3 {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    text-align: left !important;
}

body .rfm-booking-widget #rfm-confirm-details {
    margin: 0 0 24px !important;
    padding: 16px 20px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid var(--rfm-line) !important;
    border-radius: var(--rfm-radius-md) !important;
    max-width: 100% !important;
    text-align: left !important;
    overflow: hidden !important;
}

body .rfm-booking-widget .rfm-confirm-table,
body .rfm-booking-widget table.rfm-confirm-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    table-layout: fixed !important;
    margin: 0 !important;
}

/* Strip ALL cell borders the theme might inject, then add ONLY bottom dashed */
body .rfm-booking-widget .rfm-confirm-table tr,
body .rfm-booking-widget .rfm-confirm-table tbody,
body .rfm-booking-widget .rfm-confirm-table thead {
    background: transparent !important;
    border: 0 !important;
}

body .rfm-booking-widget .rfm-confirm-table tr td,
body .rfm-booking-widget table.rfm-confirm-table tr td {
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px dashed var(--rfm-line-2) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-family: var(--rfm-font-body) !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

body .rfm-booking-widget .rfm-confirm-table tr:last-child td {
    border-bottom: 0 !important;
    padding-bottom: 4px !important;
}

body .rfm-booking-widget .rfm-confirm-table tr:first-child td {
    padding-top: 4px !important;
}

/* Left column = mono uppercase label. Strong is what carries the label
   text in the JS-built markup, so target both td:first-child AND its strong. */
body .rfm-booking-widget .rfm-confirm-table tr td:first-child,
body .rfm-booking-widget .rfm-confirm-table tr td:first-child strong,
body .rfm-booking-widget table.rfm-confirm-table tr td:first-child strong {
    width: 110px !important;
    min-width: 110px !important;
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    vertical-align: middle !important;
    background: transparent !important;
}

body .rfm-booking-widget .rfm-confirm-table tr td:last-child {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    word-break: break-word !important;
    width: auto !important;
}

body .rfm-booking-widget .rfm-confirm-table .rfm-utc-row td {
    color: var(--rfm-text-3) !important;
    font-size: 12px !important;
    padding-top: 0 !important;
    border-bottom: 1px dashed var(--rfm-line-2) !important;
}

body .rfm-booking-widget .rfm-confirm-box .rfm-btn-primary,
body .rfm-booking-widget .rfm-confirm-box button.rfm-btn-primary {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
}

body .rfm-booking-widget .rfm-confirm-box .rfm-btn-link {
    display: inline-block !important;
    margin-top: 12px !important;
    text-align: left !important;
}

/* --- Generic .rfm-btn fallback inside the widget — make sure no
   stray button anywhere ends up white-on-white. --- */
body .rfm-booking-widget button.rfm-btn:not(.rfm-btn-primary):not(.rfm-btn-link):not(.rfm-btn-danger),
body .rfm-booking-calendar-wrap button.rfm-btn:not(.rfm-btn-primary):not(.rfm-btn-link):not(.rfm-btn-danger) {
    background: var(--rfm-surface) !important;
    color: var(--rfm-accent-3) !important;
    border: 1px solid var(--rfm-line-2) !important;
}

/* ============================================================
   INSTRUCTOR / STUDENT DASHBOARD OVERRIDES
   public.css forces white surfaces & gray-800 text inside the
   `.rfm-dashboard` wrapper. Inside the dark scope the gray-700/800
   tokens are remapped to white, producing white-on-white inputs
   and rows. Beat those with body-prefixed overrides.
   ============================================================ */

/* --- Page header / title --- */
body .rfm-instructor-dashboard,
body .rfm-student-dashboard {
    padding-top: 56px !important;
    padding-bottom: 80px !important;
}

body .rfm-instructor-dashboard > h2,
body .rfm-student-dashboard > h2 {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    font-size: 36px !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 28px !important;
}

/* --- Tabs row --- */
body .rfm-dashboard .rfm-tabs {
    border-bottom: 1px solid var(--rfm-line) !important;
    margin-bottom: 32px !important;
    padding: 0 !important;
    gap: 4px !important;
}

body .rfm-dashboard .rfm-tabs button.rfm-tab {
    color: var(--rfm-text-3) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 14px 18px !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: color .15s, border-color .15s, background .15s !important;
}

body .rfm-dashboard .rfm-tabs button.rfm-tab:hover {
    color: var(--rfm-accent-3) !important;
    background: rgba(157, 107, 255, 0.06) !important;
    border-bottom-color: var(--rfm-line-2) !important;
}

body .rfm-dashboard .rfm-tabs button.rfm-tab.rfm-tab-active,
body .rfm-dashboard .rfm-tabs button.rfm-tab.rfm-tab-active:hover {
    color: #FFFFFF !important;
    background: transparent !important;
    border-bottom-color: var(--rfm-accent) !important;
    font-weight: 600 !important;
}

/* --- Form inputs (the white-on-white killer) --- */
body .rfm-dashboard input[type="text"],
body .rfm-dashboard input[type="url"],
body .rfm-dashboard input[type="email"],
body .rfm-dashboard input[type="number"],
body .rfm-dashboard input[type="date"],
body .rfm-dashboard input[type="time"],
body .rfm-dashboard textarea,
body .rfm-dashboard select {
    background: var(--rfm-bg-2) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-sm) !important;
    padding: 10px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body .rfm-dashboard input:focus,
body .rfm-dashboard textarea:focus,
body .rfm-dashboard select:focus {
    border-color: var(--rfm-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.18) !important;
}

body .rfm-dashboard input::placeholder,
body .rfm-dashboard textarea::placeholder {
    color: var(--rfm-text-3) !important;
    opacity: 1 !important;
}

/* native date/time picker indicator — invert so it's visible on dark */
body .rfm-dashboard input[type="date"]::-webkit-calendar-picker-indicator,
body .rfm-dashboard input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) !important;
    opacity: 0.8 !important;
    cursor: pointer !important;
}

/* --- Form labels --- */
body .rfm-dashboard .rfm-form-row label {
    color: var(--rfm-text-2) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 8px !important;
}

/* --- Inline form layout polish --- */
body .rfm-dashboard .rfm-form-inline {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    border-radius: var(--rfm-radius-md) !important;
    padding: 24px !important;
    margin-top: 20px !important;
    max-width: 720px !important;
}

body .rfm-dashboard .rfm-form-row input,
body .rfm-dashboard .rfm-form-row textarea,
body .rfm-dashboard .rfm-form-row select {
    max-width: 100% !important;
}

body .rfm-dashboard .rfm-form-actions {
    margin-top: 20px !important;
}

/* --- Availability tab: per-day cards --- */
body .rfm-dashboard .rfm-avail-day {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    border-radius: var(--rfm-radius-md) !important;
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
}

body .rfm-dashboard .rfm-avail-day strong {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 12px !important;
    display: block !important;
}

body .rfm-dashboard .rfm-avail-window {
    margin-bottom: 8px !important;
    align-items: center !important;
}

body .rfm-dashboard .rfm-avail-window input[type="time"] {
    max-width: 130px !important;
}

body .rfm-dashboard .rfm-avail-dash {
    color: var(--rfm-text-3) !important;
}

body .rfm-dashboard .rfm-add-window {
    margin-top: 4px !important;
}

/* --- Session-type list rows --- */
body .rfm-dashboard .rfm-session-type-item {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    padding: 16px 20px !important;
}

body .rfm-dashboard .rfm-session-type-item:hover {
    border-color: rgba(157, 107, 255, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body .rfm-dashboard .rfm-st-label {
    color: var(--rfm-text-2) !important;
    font-size: 14px !important;
}

body .rfm-dashboard .rfm-st-label strong {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    margin-right: 6px !important;
}

/* --- Blocked-date list rows --- */
body .rfm-dashboard .rfm-blocked-item {
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    color: #FFFFFF !important;
    padding: 12px 18px !important;
}

body .rfm-dashboard .rfm-blocked-item:hover {
    border-color: rgba(157, 107, 255, 0.35) !important;
}

body .rfm-dashboard .rfm-blocked-item em {
    color: var(--rfm-text-3) !important;
    font-style: normal !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
}

/* --- Zoom-edit row inside an upcoming booking card --- */
body .rfm-dashboard .rfm-zoom-edit {
    align-items: center !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px dashed var(--rfm-line) !important;
}

body .rfm-dashboard .rfm-zoom-edit > strong {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
}

body .rfm-dashboard .rfm-zoom-input {
    background: var(--rfm-bg-2) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: var(--rfm-font-mono) !important;
}

body .rfm-dashboard .rfm-zoom-input:focus {
    border-color: var(--rfm-accent) !important;
    box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.18) !important;
    outline: none !important;
}

/* --- "Add window" / small ghost buttons --- */
body .rfm-dashboard button.rfm-btn:not(.rfm-btn-primary):not(.rfm-btn-link):not(.rfm-btn-danger):not(.rfm-btn-success) {
    background: var(--rfm-surface) !important;
    color: var(--rfm-accent-3) !important;
    border: 1px solid var(--rfm-line-2) !important;
    border-radius: var(--rfm-radius-pill) !important;
    box-shadow: none !important;
}

body .rfm-dashboard button.rfm-btn:not(.rfm-btn-primary):not(.rfm-btn-link):not(.rfm-btn-danger):not(.rfm-btn-success):hover {
    border-color: var(--rfm-accent) !important;
    background: rgba(157, 107, 255, 0.10) !important;
    color: #FFFFFF !important;
}

body .rfm-dashboard button.rfm-remove-window {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* --- Status pill brightening (from earlier fix, scoped to dashboard) --- */
body .rfm-dashboard .rfm-status {
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: var(--rfm-radius-pill) !important;
    border: 1px solid !important;
}
body .rfm-dashboard .rfm-status-confirmed {
    color: #b6f5d8 !important;
    background: rgba(120, 255, 175, 0.10) !important;
    border-color: rgba(120, 255, 175, 0.32) !important;
}
body .rfm-dashboard .rfm-status-pending {
    color: #FFE3A8 !important;
    background: rgba(255, 200, 100, 0.10) !important;
    border-color: rgba(255, 200, 100, 0.32) !important;
}
body .rfm-dashboard .rfm-status-completed {
    color: #DCC4FF !important;
    background: rgba(157, 107, 255, 0.12) !important;
    border-color: rgba(157, 107, 255, 0.36) !important;
}
body .rfm-dashboard .rfm-status-cancelled {
    color: #ffc1c8 !important;
    background: rgba(255, 120, 120, 0.10) !important;
    border-color: rgba(255, 120, 120, 0.32) !important;
}
body .rfm-dashboard .rfm-status-no-show {
    color: #ffc1c8 !important;
    background: rgba(180, 130, 130, 0.10) !important;
    border-color: rgba(180, 130, 130, 0.32) !important;
}

/* --- Section subheads inside tabs --- */
body .rfm-dashboard h3,
body .rfm-dashboard h4 {
    color: #FFFFFF !important;
    font-family: var(--rfm-font-display) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

body .rfm-dashboard h3 {
    font-size: 20px !important;
    margin: 24px 0 14px !important;
}

body .rfm-dashboard h4 {
    font-size: 16px !important;
    margin: 20px 0 12px !important;
}

body .rfm-dashboard p.rfm-muted {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 16px !important;
}

/* --- Booking card header within dashboard (override public.css gray-50 strip) --- */
body .rfm-dashboard .rfm-booking-card-header {
    background: rgba(0, 0, 0, 0.18) !important;
    border-bottom: 1px solid var(--rfm-line) !important;
    padding: 14px 18px !important;
}

body .rfm-dashboard .rfm-booking-date {
    color: var(--rfm-text-2) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
}

/* --- Form inline status text --- */
body .rfm-dashboard .rfm-form-actions span[role="status"],
body .rfm-dashboard .rfm-form-actions #rfm-avail-status,
body .rfm-dashboard .rfm-form-actions #rfm-st-status,
body .rfm-dashboard .rfm-form-actions #rfm-default-zoom-status {
    color: var(--rfm-text-3) !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
}

/* ============================================================================
   v1.4 — Per-offering image: thumbnail on list rows + custom upload widget
   ========================================================================= */

/* Thumbnail badge on each session-type row */
body .rfm-dashboard .rfm-session-type-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
body .rfm-dashboard .rfm-st-thumb {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--rfm-bg-2) !important;
    border: 1px solid var(--rfm-line) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--rfm-text-3) !important;
}
body .rfm-dashboard .rfm-st-thumb-empty svg {
    opacity: 0.5;
}
body .rfm-dashboard .rfm-st-label {
    flex: 1 1 auto !important;
}
body .rfm-dashboard .rfm-st-actions {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    gap: 8px !important;
}

/* Custom upload widget — preview tile + controls side-by-side */
body .rfm-dashboard .rfm-st-image-uploader {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 16px !important;
    background: var(--rfm-bg-2) !important;
    border: 1px dashed var(--rfm-line) !important;
    border-radius: 12px !important;
}
body .rfm-dashboard .rfm-st-image-preview {
    flex: 0 0 auto !important;
    width: 160px !important;
    height: 120px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--rfm-surface) !important;
    border: 1px solid var(--rfm-line) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--rfm-text-3) !important;
}
body .rfm-dashboard .rfm-st-image-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
body .rfm-dashboard .rfm-st-image-preview .rfm-st-image-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--rfm-font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.7;
}
body .rfm-dashboard .rfm-st-image-preview.has-image {
    border-color: rgba(157, 107, 255, 0.35) !important;
}
body .rfm-dashboard .rfm-st-image-controls {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
}
body .rfm-dashboard .rfm-st-image-hint {
    flex: 1 1 100% !important;
    color: var(--rfm-text-3) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}
body .rfm-dashboard .rfm-st-image-status {
    font-family: var(--rfm-font-mono) !important;
    font-size: 12px !important;
    color: var(--rfm-text-3) !important;
}
body .rfm-dashboard .rfm-st-image-status.rfm-status-error {
    color: #FF6B7A !important;
}
body .rfm-dashboard .rfm-st-image-status.rfm-status-success {
    color: #6BD49A !important;
}

/* ============================================================================
   v1.4 — Customer Coaching Bookings page: Level 1 (instructor cards) +
   Level 2 (offering cards), rendered inside Tutor LMS dashboard frame
   ========================================================================= */
body .tutor-dashboard .rfm-coaching-bookings {
    color: var(--rfm-text-1, #1f1233) !important;
}
body .tutor-dashboard .rfm-coaching-section {
    margin-bottom: 40px !important;
}
body .tutor-dashboard .rfm-coaching-section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 18px !important;
}
body .tutor-dashboard .rfm-coaching-section-head h2 {
    font-family: var(--rfm-font-display, "Playfair Display", serif) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
body .tutor-dashboard .rfm-coaching-section-head .rfm-mono-label {
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Instructor / offering grid */
body .tutor-dashboard .rfm-coaching-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

/* Card surface — works for both instructor cards and offering cards. The dark
   purple panel sits inside Tutor LMS's white content column as a contained
   card, not a full-bleed breakout. */
body .tutor-dashboard .rfm-coaching-card {
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #1a1029 0%, #0f0820 100%) !important;
    border: 1px solid rgba(157, 107, 255, 0.18) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
    box-shadow: 0 6px 20px rgba(11, 6, 18, 0.18) !important;
}
body .tutor-dashboard .rfm-coaching-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(157, 107, 255, 0.5) !important;
    box-shadow: 0 12px 28px rgba(11, 6, 18, 0.32) !important;
}

body .tutor-dashboard .rfm-coaching-card-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #15092a !important;
    border-bottom: 1px solid rgba(157, 107, 255, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.3) !important;
}
body .tutor-dashboard .rfm-coaching-card-image-empty svg {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}
body .tutor-dashboard .rfm-coaching-card-body {
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
}
body .tutor-dashboard .rfm-coaching-card-title {
    font-family: var(--rfm-font-display, "Playfair Display", serif) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #FFFFFF !important;
}
body .tutor-dashboard .rfm-coaching-card-meta {
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.6) !important;
}
body .tutor-dashboard .rfm-coaching-card-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 !important;
    /* clamp to 3 lines to keep card heights tidy */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
body .tutor-dashboard .rfm-coaching-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(157, 107, 255, 0.2) !important;
}
body .tutor-dashboard .rfm-coaching-card-price {
    font-family: var(--rfm-font-display, "Playfair Display", serif) !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    color: #C9A8FF !important;
}
body .tutor-dashboard .rfm-coaching-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: #9D6BFF !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}
body .tutor-dashboard .rfm-coaching-card:hover .rfm-coaching-card-cta {
    background: #B98AFF !important;
}

/* Existing-bookings list (above the discovery grid). Each row is a
   <details> element so users can click to unfold the meeting link,
   countdown, instructor notes, etc. */
body .tutor-dashboard .rfm-bookings-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
body .tutor-dashboard .rfm-booking-row,
body .tutor-dashboard details.rfm-booking-row {
    background: #fafafd !important;
    border: 1px solid #e6e3ee !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: block !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body .tutor-dashboard details.rfm-booking-row[open] {
    border-color: rgba(157, 107, 255, 0.35) !important;
    box-shadow: 0 6px 18px rgba(31, 18, 51, 0.06) !important;
}
body .tutor-dashboard .rfm-booking-summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 18px !important;
}
/* Hide native disclosure marker on Webkit/Blink */
body .tutor-dashboard .rfm-booking-summary::-webkit-details-marker {
    display: none !important;
}
body .tutor-dashboard .rfm-booking-summary::marker {
    content: '' !important;
}
body .tutor-dashboard .rfm-booking-summary-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body .tutor-dashboard .rfm-booking-summary-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}
body .tutor-dashboard .rfm-booking-row .rfm-booking-when {
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: rgba(31, 18, 51, 0.65) !important;
}
body .tutor-dashboard .rfm-booking-row .rfm-booking-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1f1233 !important;
}
body .tutor-dashboard .rfm-booking-row .rfm-booking-status {
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(157, 107, 255, 0.12) !important;
    color: #6B3FE0 !important;
}
/* Smart session-state widget — lives in the row's main content area
   (under the title), shows prominently the time-to-start as a sentence
   ("Your session starts in 14d 3h"), or a Join button when session is live.
   Replaces the old tiny countdown pill. */
body .tutor-dashboard .rfm-session-state {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
body .tutor-dashboard .rfm-state-label {
    color: rgba(31, 18, 51, 0.6) !important;
    font-weight: 400 !important;
}
body .tutor-dashboard .rfm-state-value {
    color: #1f1233 !important;
    font-weight: 600 !important;
}

/* Imminent (within 15min): purple highlight on the time value */
body .tutor-dashboard .rfm-session-state.rfm-state-imminent .rfm-state-value {
    color: #6B3FE0 !important;
}
body .tutor-dashboard .rfm-session-state.rfm-state-imminent .rfm-state-label {
    color: rgba(107, 63, 224, 0.75) !important;
}

/* Past — fade out */
body .tutor-dashboard .rfm-session-state.rfm-state-past {
    opacity: 0.55;
}

/* Live state: the widget becomes a Join button itself, replacing the text */
body .tutor-dashboard .rfm-state-join-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #9D6BFF 0%, #B98AFF 100%) !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(157, 107, 255, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    /* gentle pulse when live so it draws the eye */
    animation: rfm-pulse 2.4s ease-in-out infinite;
}
body .tutor-dashboard .rfm-state-join-btn:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(157, 107, 255, 0.5) !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}
@keyframes rfm-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(157, 107, 255, 0.35); }
    50%      { box-shadow: 0 4px 20px rgba(157, 107, 255, 0.6); }
}
body .tutor-dashboard .rfm-state-live-no-link {
    color: #6B3FE0 !important;
    font-weight: 600 !important;
}
body .tutor-dashboard .rfm-booking-chevron {
    color: rgba(31, 18, 51, 0.4) !important;
    transition: transform 0.2s ease !important;
    display: inline-flex !important;
}
body .tutor-dashboard details.rfm-booking-row[open] .rfm-booking-chevron {
    transform: rotate(180deg) !important;
}

/* Expanded detail panel */
body .tutor-dashboard .rfm-booking-detail {
    padding: 4px 18px 18px !important;
    border-top: 1px dashed rgba(31, 18, 51, 0.08) !important;
    margin-top: 4px !important;
}
body .tutor-dashboard .rfm-booking-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px 24px !important;
    padding: 16px 0 !important;
}
body .tutor-dashboard .rfm-detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
body .tutor-dashboard .rfm-detail-label {
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(31, 18, 51, 0.5) !important;
}
body .tutor-dashboard .rfm-detail-value {
    font-size: 14px !important;
    color: #1f1233 !important;
    font-weight: 500 !important;
}

/* Join button — primary CTA inside the expanded panel */
body .tutor-dashboard .rfm-booking-join-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 22px !important;
    background: #9D6BFF !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    margin-top: 8px !important;
}
body .tutor-dashboard .rfm-booking-join-btn:hover {
    background: #B98AFF !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}
body .tutor-dashboard .rfm-booking-no-link {
    display: inline-block !important;
    padding: 12px 18px !important;
    background: rgba(31, 18, 51, 0.04) !important;
    border: 1px dashed rgba(31, 18, 51, 0.15) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: rgba(31, 18, 51, 0.65) !important;
    margin-top: 8px !important;
}

body .tutor-dashboard .rfm-booking-notes {
    margin-top: 16px !important;
    padding: 14px 16px !important;
    background: rgba(157, 107, 255, 0.05) !important;
    border-left: 3px solid rgba(157, 107, 255, 0.4) !important;
    border-radius: 6px !important;
}
body .tutor-dashboard .rfm-booking-notes p {
    margin: 4px 0 0 !important;
    font-size: 14px !important;
    color: #1f1233 !important;
    line-height: 1.5 !important;
}

/* Level 2 instructor header */
body .tutor-dashboard .rfm-instructor-head {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 24px !important;
    background: linear-gradient(180deg, #1a1029 0%, #0f0820 100%) !important;
    border-radius: 14px !important;
    color: #FFFFFF !important;
    margin-bottom: 24px !important;
}
body .tutor-dashboard .rfm-instructor-head img {
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(157, 107, 255, 0.35) !important;
}
body .tutor-dashboard .rfm-instructor-head h2 {
    margin: 0 0 6px !important;
    color: #FFFFFF !important;
}
body .tutor-dashboard .rfm-instructor-head p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.5 !important;
}
body .tutor-dashboard .rfm-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--rfm-font-mono, ui-monospace, monospace) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #6B3FE0 !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
}
body .tutor-dashboard .rfm-back-link:hover {
    color: #4A1FB8 !important;
}

/* Empty state — when no bookings AND no instructors yet (rare) */
body .tutor-dashboard .rfm-coaching-empty {
    text-align: center !important;
    padding: 48px 20px !important;
    color: rgba(31, 18, 51, 0.55) !important;
    background: #fafafd !important;
    border: 1px dashed #d8d2e6 !important;
    border-radius: 14px !important;
}

/* ============================================================================
   v1.4 — Standalone /instructor-dashboard/ page
   Make the page feel purpose-built for the dark-purple Instructor Dashboard:
   neutralize theme container chrome, paint the body in the dashboard's base
   color so there are no white edges or awkward gaps, and ensure clean
   transitions from header → dashboard → footer.
   ============================================================================ */

/* Body becomes the dashboard's base color. Any "leftover" space anywhere on
   the page now reads as intentional surface, not as a missing chunk. */
body.rfm-instructor-dashboard-page {
    background: #0B0612 !important;
}

/* Remove the negative-margin breakout and rely on the natural full-width
   container we'll set on the parent chain below. Cleaner edges, no leftover
   "shadow" of the original 1120px content column. */
body.rfm-instructor-dashboard-page .rfm-dashboard.rfm-instructor-dashboard {
    margin: 0 !important;
    border-radius: 0 !important;
    /* Internal padding stays generous — keep the existing breathing room */
    padding: 56px 80px 96px !important;
    background:
        linear-gradient(180deg, #0F0820 0%, #0B0612 100%) !important;
}

/* Strip the theme's content container chrome so the dashboard fills the
   whole viewport width without needing to break out via negative margins.
   We target the Tutorstarter chain we observed in the audit. */
body.rfm-instructor-dashboard-page .site-content,
body.rfm-instructor-dashboard-page .container,
body.rfm-instructor-dashboard-page .row,
body.rfm-instructor-dashboard-page .col-xl-12,
body.rfm-instructor-dashboard-page .col-lg-12,
body.rfm-instructor-dashboard-page .col-sm-12,
body.rfm-instructor-dashboard-page .content-area,
body.rfm-instructor-dashboard-page .site-main,
body.rfm-instructor-dashboard-page article.page,
body.rfm-instructor-dashboard-page .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide the page title if the theme renders one on .entry-header. The
   dashboard already has its own "Instructor Dashboard" heading. */
body.rfm-instructor-dashboard-page .entry-header,
body.rfm-instructor-dashboard-page .page-title,
body.rfm-instructor-dashboard-page .entry-title,
body.rfm-instructor-dashboard-page .post-title-wrapper {
    display: none !important;
}

/* Wider section, give the heading proper breathing room from the header */
body.rfm-instructor-dashboard-page .rfm-dashboard.rfm-instructor-dashboard > h2:first-child {
    margin-top: 0 !important;
}

/* Responsive padding so the dashboard doesn't feel cramped on smaller
   screens once the inner padding scales down. */
@media (max-width: 1024px) {
    body.rfm-instructor-dashboard-page .rfm-dashboard.rfm-instructor-dashboard {
        padding: 40px 24px 64px !important;
    }
}
@media (max-width: 640px) {
    body.rfm-instructor-dashboard-page .rfm-dashboard.rfm-instructor-dashboard {
        padding: 32px 16px 48px !important;
    }
}

/* ============================================================================
   Public /book-session/ page — full-bleed
   ----------------------------------------------------------------------------
   Mirrors the standalone instructor dashboard treatment: neutralize the
   theme's container chrome (Tutorstarter .site-content / .container / .row /
   .col-* / .entry-content / article.page) so the booking widget renders edge
   to edge against the dark-purple body bg. Hide theme-rendered page title.
   v1.5.1 — fixes white-stripes regression on /book-session/.
   ============================================================================ */

body.rfm-book-session-page {
    background: #0B0612 !important;
}

body.rfm-book-session-page .site-content,
body.rfm-book-session-page .container,
body.rfm-book-session-page .row,
body.rfm-book-session-page .col-xl-12,
body.rfm-book-session-page .col-lg-12,
body.rfm-book-session-page .col-sm-12,
body.rfm-book-session-page .content-area,
body.rfm-book-session-page .site-main,
body.rfm-book-session-page article.page,
body.rfm-book-session-page .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide the page title — the booking widget has its own heading/stepper. */
body.rfm-book-session-page .entry-header,
body.rfm-book-session-page .page-title,
body.rfm-book-session-page .entry-title,
body.rfm-book-session-page .post-title-wrapper {
    display: none !important;
}

/* Inner padding for the booking widget so it doesn't kiss the viewport edge.
   The widget itself (.rfm-booking-calendar-wrap.rfm-booking-widget) handles
   its own internal layout — we only set the outer breathing room here. */
body.rfm-book-session-page .rfm-booking-calendar-wrap.rfm-booking-widget {
    margin: 0 !important;
    padding: 56px 80px 96px !important;
    background:
        linear-gradient(180deg, #0F0820 0%, #0B0612 100%) !important;
}

@media (max-width: 1024px) {
    body.rfm-book-session-page .rfm-booking-calendar-wrap.rfm-booking-widget {
        padding: 40px 24px 64px !important;
    }
}
@media (max-width: 640px) {
    body.rfm-book-session-page .rfm-booking-calendar-wrap.rfm-booking-widget {
        padding: 32px 16px 48px !important;
    }
}

/* ============================================================================
   Instructor Profile tab — photo uploader + form fields.
   v1.5.7 — instructor self-service edit of display name / bio / photo.
   ============================================================================ */
.rfm-profile-photo-uploader {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 6px;
}
.rfm-profile-photo-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a0d2e;
    border: 1px solid rgba(157, 107, 255, 0.25);
    flex-shrink: 0;
}
.rfm-profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rfm-profile-photo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding-top: 6px;
}
.rfm-profile-photo-actions .rfm-form-help {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.4;
}
#rfm-profile-form .rfm-form-row {
    margin-bottom: 18px;
}
#rfm-profile-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
#rfm-profile-form input[type="text"],
#rfm-profile-form textarea {
    width: 100%;
    max-width: 540px;
}
#rfm-profile-form .rfm-form-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.rfm-btn-text {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: underline;
    padding: 4px 8px !important;
    font-size: 13px !important;
    cursor: pointer;
}
.rfm-btn-text:hover {
    color: #fff !important;
}

/* ============================================================================
   In-product help tooltips (1.6.4) — replace static PDF tutorials for the
   customer + instructor dashboards. Pure-CSS hover popup with arrow, keyboard-
   accessible via tabindex="0", mobile-friendly via :focus-visible (tap once
   to show, tap elsewhere to hide).
   ============================================================================ */
.rfm-help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(157, 107, 255, 0.20);
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
    line-height: 1;
}
.rfm-help-tip:hover,
.rfm-help-tip:focus-visible {
    background: rgba(157, 107, 255, 0.45);
    color: #fff;
    outline: none;
}
.rfm-help-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a0d2e;
    color: rgba(255, 255, 255, 0.94);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    min-width: 180px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(157, 107, 255, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.rfm-help-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a0d2e;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.rfm-help-tip:hover::after,
.rfm-help-tip:focus-visible::after,
.rfm-help-tip:hover::before,
.rfm-help-tip:focus-visible::before {
    opacity: 1;
}
/* User toggled help tips off — hide every tip globally on the page. */
body.rfm-tooltips-off .rfm-help-tip {
    display: none !important;
}

/* Tooltip on/off toggle — sits next to the timezone banner. */
.rfm-tooltips-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 6px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(157, 107, 255, 0.06);
    border: 1px solid rgba(157, 107, 255, 0.18);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rfm-tooltips-toggle:hover {
    background: rgba(157, 107, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
}
.rfm-tooltips-toggle-state {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.rfm-tooltips-off .rfm-tooltips-toggle {
    color: rgba(255, 255, 255, 0.5);
}
body.rfm-tooltips-off .rfm-tooltips-toggle .rfm-tooltips-toggle-state::after {
    content: 'off';
}
body:not(.rfm-tooltips-off) .rfm-tooltips-toggle .rfm-tooltips-toggle-state::after {
    content: 'on';
}

/* ============================================================================
   Timezone hint banner — shown at the top of customer + instructor dashboards.
   v1.6.0 — clarifies that all times are converted to viewer's local timezone.
   ============================================================================ */
.rfm-tz-banner {
    margin: 0 0 16px;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(157, 107, 255, 0.06);
    border: 1px solid rgba(157, 107, 255, 0.18);
    border-radius: 6px;
    display: inline-block;
}
body .tutor-dashboard .rfm-tz-banner {
    color: rgba(255, 255, 255, 0.55) !important;
}