/**
 * McCarthy Manifesting Dashboard — Main Stylesheet
 * Version: 1.0.0
 */

/* ==========================================================================
   Design Tokens — McCarthy Brand Color System v3.6
   Primary: #1762A3 (McCarthy Manifesting logo blue)
   ========================================================================== */
:root {
    /* ── Primary Brand Colors (Logo Blue) ────────────────────── */
    --mcd-color-primary: #1563a3;
    --mcd-color-primary-dark: #0F4A7A;
    --mcd-color-primary-hover: #124e82;
    --mcd-color-primary-light: #E8F1F8;
    --mcd-color-primary-lighter: #F0F6FC;
    --mcd-color-primary-subtle: #D4E4F2;

    /* ── Brand Gold (Logo Gold) — NEW ────────────────────────── */
    --mcd-color-gold: #cf9a0e;
    --mcd-color-gold-dark: #a87c08;
    --mcd-color-gold-light: #f3d574;
    --mcd-color-gold-soft: rgba(207, 154, 14, 0.12);

    /* ── Brand Gradients — Flat color (no gradient) ──────────── */
    --mcd-gradient-primary: #1563a3;
    --mcd-gradient-primary-hover: #124e82;

    /* ── Deep brand navy (matches old site header) ───────────── */
    --mcd-color-dark-blue: #142a52;
    --mcd-color-dark-blue-2: #1e3a72;

    /* ── Neutral Text & UI ───────────────────────────────────── */
    --mcd-color-text: #1f2937;
    --mcd-color-text-light: #6b7280;
    --mcd-color-text-muted: #9ca3af;
    --mcd-color-border: #e5e7eb;
    --mcd-color-border-light: #f3f4f6;
    --mcd-color-bg: #f9fafb;
    --mcd-color-white: #ffffff;

    /* ── Semantic Status Colors (unchanged) ──────────────────── */
    --mcd-color-success: #10b981;
    --mcd-color-success-bg: #d1fae5;
    --mcd-color-warning: #f59e0b;
    --mcd-color-danger: #ef4444;

    /* ── Radius ──────────────────────────────────────────────── */
    --mcd-radius-sm: 8px;
    --mcd-radius-md: 12px;
    --mcd-radius-lg: 12px;
    --mcd-radius-xl: 20px;

    /* ── Shadows (brand-tinted) ──────────────────────────────── */
    --mcd-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --mcd-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --mcd-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --mcd-shadow-hover: 0 12px 32px rgba(23, 98, 163, 0.15);
    --mcd-shadow-primary: 0 4px 12px rgba(23, 98, 163, 0.25);

    /* ── Sidebar ─────────────────────────────────────────────── */
    --mcd-sidebar-width: 240px;
    --mcd-transition: all 0.25s ease;

    /* ── Font ────────────────────────────────────────────────── */
    --mcd-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Base Layout
   ========================================================================== */
body.mccarthy-dashboard-active {
    background: var(--mcd-color-bg);
    font-family: var(--mcd-font);
    color: var(--mcd-color-text);
}

.mccarthy-dashboard-active .woocommerce-account .woocommerce {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Hide default WooCommerce navigation if present */
.mccarthy-dashboard-active .woocommerce-MyAccount-navigation {
    display: none !important;
}
.mccarthy-dashboard-active .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mcd-app {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    gap: 0;
    background: var(--mcd-color-bg);
    font-family: var(--mcd-font);
    color: var(--mcd-color-text);
    line-height: 1.5;
}

.mcd-app *,
.mcd-app *::before,
.mcd-app *::after {
    box-sizing: border-box;
}

.mcd-main {
    flex: 1;
    min-width: 0;
    padding: 24px;
    padding-top: 0;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.mcd-sidebar {
    width: var(--mcd-sidebar-width);
    flex-shrink: 0;
    background: var(--mcd-color-white);
    min-height: 100vh;
    padding: 24px 16px;
    /*border-right: 1px solid var(--mcd-color-border);*/
     border-right: 1px solid var(--mcd-color-primary-subtle);
    position: sticky;
    top: 0;
}

.mcd-sidebar-logo {
    padding: 0 8px 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--mcd-color-border-light);
}
.mcd-sidebar-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.mcd-sidebar-logo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    outline: none;
}
.mcd-logo-text strong {
    display: block;
    font-size: 18px;
    color: var(--mcd-color-dark-blue);
    font-weight: 800;
    letter-spacing: 0.5px;
}
.mcd-logo-text span {
    font-size: 11px;
    color: var(--mcd-color-text-light);
    letter-spacing: 2px;
    font-weight: 500;
}

.mcd-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 4px;
}
.mcd-sidebar-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mcd-color-dark-blue);
    border-radius: 2px;
}

.mcd-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mcd-nav-item {
    margin-bottom: 4px;
}

.mcd-sidebar-nav .mcd-nav-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--mcd-radius-sm);
    color: var(--mcd-color-text-light);
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: var(--mcd-transition);
    outline: none !important;
}
.mcd-nav-item a:hover {
    background: rgba(23, 98, 163, 0.06);
    color: var(--mcd-color-primary);
}
.mcd-nav-item.is-active a {
    background: var(--mcd-color-primary);
    color: var(--mcd-color-white);
    box-shadow: 0 4px 12px rgba(23, 98, 163, 0.25);
}
.mcd-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mcd-nav-icon svg {
    width: 18px;
    height: 18px;
}

/* Sidebar help card */
.mcd-sidebar-help {
    margin-top: 32px;
    padding: 16px;
    border: 1px solid var(--mcd-color-border);
    background: var(--mcd-color-primary-lighter);
    border-color: var(--mcd-color-primary-subtle);
    border-radius: var(--mcd-radius-md);
}
.mcd-sidebar-help h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mcd-color-primary-dark);
}
.mcd-sidebar-help p {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--mcd-color-text-light);
}
.mcd-help-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mcd-color-primary);
    text-decoration: none;
    padding: 6px 0;
    word-break: break-all;
}
.mcd-help-link:hover { text-decoration: underline; }
.mcd-help-icon svg { width: 14px; height: 14px; }

/* ==========================================================================
   Dashboard Layout & Rows
   ========================================================================== */
.mcd-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mcd-row {
    display: grid;
    gap: 20px;
}
.mcd-row-2col {
    grid-template-columns: 1fr 1fr;
}

.woocommerce section.mcd-section, .woocommerce section.mcd-widget {
    background: var(--mcd-color-white);
    border-radius: var(--mcd-radius-lg);
    padding: 24px;
    box-shadow: var(--mcd-shadow-md);
}

.mcd-section-header h2,
.mcd-widget-header h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mcd-color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mcd-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mcd-widget-header h3 { margin: 0; font-size: 16px; }
.mcd-widget-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(23, 98, 163, 0.1);
    color: var(--mcd-color-primary);
}
.mcd-widget-icon svg { width: 18px; height: 18px; }
.mcd-widget-action {
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */
.mcd-banner {
    background-size: cover;
    background-position: center;
    border-radius: var(--mcd-radius-lg);
    padding: 32px;
    color: var(--mcd-color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 180px;
    padding-top: 0 !important;
}
.mcd-banner-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}
.mcd-profile-photo-wrap {
    position: relative;
    flex-shrink: 0;
}
.mcd-profile-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.95);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    display: block;
}
.mcd-photo-upload-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    background: var(--mcd-color-primary);
    color: var(--mcd-color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--mcd-color-white);
    transition: var(--mcd-transition);
}
.mcd-photo-upload-btn:hover {
    background: var(--mcd-color-primary-dark);
    transform: scale(1.05);
}
.mcd-photo-upload-btn svg { width: 14px; height: 14px; }
.mcd-photo-upload-status {
    position: absolute;
    bottom: -28px;
    left: 0;
    right: 0;
    font-size: 11px;
    color: var(--mcd-color-white);
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 4px 8px;
    border-radius: 4px;
}
.el-overlay.am-dialog-popup.amelia-v2-booking.am-forms-dialog.am-sbsNew button.el-dialog__headerbtn {
    background-color: transparent;
}
.mcd-banner-greeting h1 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    color: var(--mcd-color-white);
    line-height: 1.2;
}
.mcd-wave {
    display: inline-block;
    animation: mcd-wave 2.5s ease infinite;
    transform-origin: 70% 70%;
}
@keyframes mcd-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
}
.mcd-banner-greeting p {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    max-width: 480px;
    line-height: 1.55;
}

.mcd-banner-right {
    flex-shrink: 0;
}
.mcd-coach-card-mini {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--mcd-radius-md);
    padding: 16px 20px;
    min-width: 200px;
}
.mcd-coach-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.mcd-coach-card-mini .mcd-coach-name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mcd-color-white);
}
.mcd-coach-card-mini .mcd-coach-signature {
    font-size: 26px;
    line-height: 1.3;
    display: block;
    margin-top: 6px;
}
.mcd-coach-signature {
    font-family: 'Dancing Script', cursive;
    font-size: 22px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

/* ==========================================================================
   Quick Actions Cards Grid
   ========================================================================== */
.mcd-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.mcd-card {
    position: relative;
    background: var(--mcd-color-white);
    border: 1px solid var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
    padding: 20px;
    text-decoration: none;
    color: var(--mcd-color-text);
    transition: var(--mcd-transition);
    display: flex;
    flex-direction: column;
    min-height: 170px;
}
.mcd-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mcd-shadow-hover);
    border-color: var(--mcd-color-primary);
}
.mcd-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.mcd-card-icon svg { width: 22px; height: 22px; }

.mcd-card-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcd-color-text);
}
.mcd-card-desc {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--mcd-color-text-light);
    line-height: 1.5;
    flex: 1;
}
.mcd-card-arrow {
    color: var(--mcd-color-text-muted);
    font-size: 18px;
    margin-top: auto;
    transition: var(--mcd-transition);
}
.mcd-card:hover .mcd-card-arrow {
    color: var(--mcd-color-primary);
    transform: translateX(4px);
}

/* Card color variants */
.mcd-icon-blue   { background: #D4E4F2; color: #1762A3; }
.mcd-icon-purple { background: #ede9fe; color: #7c3aed; }
.mcd-icon-green  { background: #d1fae5; color: #059669; }
.mcd-icon-orange { background: #fed7aa; color: #ea580c; }
.mcd-icon-red    { background: #fee2e2; color: #dc2626; }
.mcd-icon-teal   { background: #ccfbf1; color: #0d9488; }

/* ==========================================================================
   Subscription Overview
   ========================================================================== */
.mcd-subscription-plan-banner {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: var(--mcd-radius-md);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.mcd-plan-label {
    display: block;
    font-size: 11px;
    color: #047857;
    margin-bottom: 2px;
    font-weight: 500;
}
.mcd-plan-name {
    display: block;
    font-size: 15px;
    color: var(--mcd-color-text);
    font-weight: 700;
}
.mcd-plan-status,
.mcd-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.mcd-status-active   { background: #d1fae5; color: #047857; }
.mcd-status-on-hold  { background: #fef3c7; color: #92400e; }
.mcd-status-pending-cancel { background: #fed7aa; color: #c2410c; }
.mcd-status-cancelled,
.mcd-status-canceled,
.mcd-status-expired  { background: #fee2e2; color: #991b1b; }

.mcd-subscription-rows {
    margin-bottom: 16px;
}
.mcd-sub-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mcd-color-border-light);
    font-size: 13px;
}
.mcd-sub-row:last-child { border-bottom: none; }
.mcd-sub-label { color: var(--mcd-color-text-light); }
.mcd-sub-value { color: var(--mcd-color-text); font-weight: 500; }
.mcd-sub-status { color: var(--mcd-color-success); font-weight: 600; }

.mcd-widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--mcd-color-text-light);
}

/* ==========================================================================
   Upcoming Appointments
   ========================================================================== */
.mcd-appointment-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
    text-decoration: none;
    color: inherit;
    transition: var(--mcd-transition);
    margin-bottom: 10px;
    background: var(--mcd-color-white);
}
.mcd-appointment-card:hover {
    border-color: var(--mcd-color-primary);
    box-shadow: var(--mcd-shadow-md);
}
.mcd-appt-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcd-appt-icon svg { width: 18px; height: 18px; }
.mcd-appt-info { flex: 1; min-width: 0; }
.mcd-appt-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mcd-color-text);
}
.mcd-appt-coach {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--mcd-color-text-light);
}
.mcd-appt-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--mcd-color-text-light);
    margin-bottom: 8px;
}
.mcd-appt-date,
.mcd-appt-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mcd-appt-date svg,
.mcd-appt-time svg { width: 12px; height: 12px; }
.mcd-appt-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.mcd-appt-status-approved { background: #d1fae5; color: #047857; }
.mcd-appt-status-pending  { background: #fef3c7; color: #92400e; }
.mcd-appt-arrow {
    color: var(--mcd-color-text-muted);
    font-size: 20px;
    align-self: center;
}

.mcd-empty-appointments,
.mcd-empty-state {
    text-align: center;
    padding: 24px 16px;
    border: 1px dashed var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
    background: var(--mcd-color-bg);
}
.mcd-empty-appointments h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mcd-color-text);
}
.mcd-empty-appointments p,
.mcd-empty-state p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--mcd-color-text-light);
}

/* ==========================================================================
   Coaching Video
   ========================================================================== */
.mcd-video-player {
    margin-bottom: 14px;
    border-radius: var(--mcd-radius-md);
    overflow: hidden;
    background: #000;
}
.mcd-video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.mcd-video-embed iframe,
.mcd-video-embed object,
.mcd-video-embed embed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}
.mcd-video-native {
    width: 100%;
    height: auto;
    display: block;
}
.mcd-video-placeholder {
    width: 100%;
    padding: 60px 20px;
    background: var(--mcd-color-bg);
    text-align: center;
    color: var(--mcd-color-text-light);
}
.mcd-play-icon svg {
    width: 48px;
    height: 48px;
    color: var(--mcd-color-primary);
    margin-bottom: 8px;
}
.mcd-video-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcd-color-text);
}
.mcd-video-desc {
    margin: 0;
    font-size: 13px;
    color: var(--mcd-color-text-light);
    line-height: 1.5;
}

/* ==========================================================================
   Your Coach
   ========================================================================== */
.mcd-coach-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.mcd-coach-photo-wrap {
    flex-shrink: 0;
}
/* ── Coach Photo (Premium Circle) ────── */
.mcd-coach-photo-wrap {
    flex-shrink: 0;
    position: relative;
    width: 80px;
    height: 80px;
}

.woocommerce .mcd-coach-photo-wrap img.mcd-coach-photo,
.woocommerce-page .mcd-coach-photo-wrap img.mcd-coach-photo,
.mcd-coach-photo {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border: 3px solid #ffffff !important;
    box-shadow:
        0 0 0 2px var(--mcd-color-primary),
        0 4px 12px rgba(23, 98, 163, 0.20) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: var(--mcd-color-primary-lighter);
}

/* Hover effect — subtle lift */
.mcd-coach-photo-wrap:hover .mcd-coach-photo,
.mcd-coach-photo:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 0 2px var(--mcd-color-primary),
        0 8px 20px rgba(23, 98, 163, 0.35) !important;
}
.mcd-coach-details {
    flex: 1;
}
.mcd-coach-details .mcd-coach-name {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--mcd-color-text);
}
.mcd-coach-details .mcd-coach-title {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--mcd-color-text-light);
}
.mcd-coach-bio {
    margin: 0;
    font-size: 13px;
    color: var(--mcd-color-text);
    line-height: 1.55;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.mcd-newsletter-section {
    background: var(--mcd-color-white);
}
.mcd-newsletter-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: center;
}
.mcd-newsletter-content h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mcd-color-text);
}
.mcd-newsletter-tagline {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--mcd-color-text-light);
}
.mcd-newsletter-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mcd-newsletter-fields input[type="text"],
.mcd-newsletter-fields input[type="email"] {
    flex: 1 1 180px;
    padding: 10px 14px;
    border: 1px solid var(--mcd-color-border);
    border-radius: var(--mcd-radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--mcd-color-white);
    transition: var(--mcd-transition);
}
.mcd-newsletter-fields input:focus {
    outline: none;
    border-color: var(--mcd-color-primary);
    box-shadow: 0 0 0 3px rgba(23,98,163,0.15);
}
.mcd-newsletter-status {
    margin-top: 10px;
    font-size: 13px;
    min-height: 18px;
}
.mcd-newsletter-status.is-success { color: var(--mcd-color-success); }
.mcd-newsletter-status.is-error   { color: var(--mcd-color-danger); }
.mcd-newsletter-disclaimer {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--mcd-color-text-muted);
}
.mcd-newsletter-illustration {
    text-align: center;
}
.mcd-newsletter-illustration img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
}

/* ==========================================================================
   Footer Bar
   ========================================================================== */
.woocommerce section.mcd-footer-bar {
    background: #D4E4F2;
    border-radius: var(--mcd-radius-md);
    padding: 16px 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: center;
    justify-content: center;
}
.mcd-footer-icon {
    width: 36px;
    height: 36px;
    background: var(--mcd-color-primary);
    color: var(--mcd-color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcd-footer-icon svg { width: 18px; height: 18px; }
.mcd-footer-content {
    font-size: 13px;
    color: var(--mcd-color-text);
}
.mcd-footer-content strong {
    display: inline;
    font-weight: 600;
}
.mcd-footer-contact a {
    color: var(--mcd-color-primary);
    text-decoration: none;
    font-weight: 600;
}
.mcd-footer-contact a:hover { text-decoration: underline; }

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.mcd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--mcd-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--mcd-transition);
    line-height: 1.2;
}
.mcd-btn-primary {
    background: var(--mcd-color-primary);
    color: var(--mcd-color-white);
}
.mcd-btn-primary:hover {
    background: var(--mcd-color-primary-dark);
    color: var(--mcd-color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23,98,163,0.3);
}
.mcd-btn-outline {
    background: transparent;
    color: var(--mcd-color-primary);
    border: 1px solid var(--mcd-color-primary);
}
.mcd-btn-outline:hover {
    background: var(--mcd-color-primary);
    color: var(--mcd-color-white);
}
.mcd-btn-block {
    width: 100%;
}
.mcd-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}
.mcd-link-blue {
    color: var(--mcd-color-primary);
    text-decoration: none;
    font-weight: 500;
}
.mcd-link-blue:hover { text-decoration: underline; }

/* ==========================================================================
   Inner pages (orders, subscriptions, etc.)
   ========================================================================== */
.mcd-inner-page-wrapper,
.mcd-inner-page {
    background: var(--mcd-color-white);
    border-radius: var(--mcd-radius-lg);
    padding: 28px;
}
.mcd-inner-page-wrapper h2,
.mcd-inner-page h2 {
    margin: 0 0 16px;
    font-size: 20px;
    color: var(--mcd-color-text);
}
.mcd-inner-page-wrapper table.shop_table {
    border-radius: var(--mcd-radius-sm);
    overflow: hidden;
}

/* Hide WC default greeting/intro */
.mcd-inner-page-wrapper .woocommerce-MyAccount-content > p:first-of-type {
    display: block;
}

/* ==========================================================================
   Coaching Videos Page
   ========================================================================== */
.mcd-videos-page {
    background: var(--mcd-color-white);
    border-radius: var(--mcd-radius-lg);
    padding: 28px;
    box-shadow: var(--mcd-shadow-md);
}
.mcd-videos-page-header { margin-bottom: 24px; }
.mcd-videos-page-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--mcd-color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mcd-videos-page-subtitle {
    margin: 0;
    color: var(--mcd-color-text-light);
    font-size: 14px;
}

.mcd-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.mcd-video-card {
    background: var(--mcd-color-white);
    border: 1px solid var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
    overflow: hidden;
    transition: var(--mcd-transition);
}
.mcd-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mcd-shadow-hover);
    border-color: var(--mcd-color-primary);
}
.mcd-video-card-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.mcd-video-card-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.mcd-video-card:hover .mcd-video-card-thumb img {
    transform: scale(1.05);
}
.mcd-video-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    background: linear-gradient(135deg, #142a52, #1762A3);
}
.mcd-video-card-placeholder svg { width: 48px; height: 48px; }

/* ── Dark Gradient Overlay (for play button visibility) ─────────── */
.mcd-video-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.45) 100%
    );
    z-index: 2;
    transition: background 0.3s ease;
    pointer-events: none;
}
.mcd-video-card:hover .mcd-video-card-overlay {
    background: linear-gradient(
        to bottom,
        rgba(23, 98, 163, 0.2) 0%,
        rgba(23, 98, 163, 0.35) 50%,
        rgba(23, 98, 163, 0.55) 100%
    );
}

/* ── Premium Play Button (bulletproof against theme overrides) ──── */
.mcd-video-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%) !important;
    border: 3px solid rgba(255, 255, 255, 0.95) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1 !important;
    outline: none !important;
}

/* Subtle pulse animation to draw attention */
.mcd-video-play-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: mcdPulse 2.5s ease-out infinite;
    pointer-events: none;
}
@keyframes mcdPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Inner icon wrapper for clean isolation from theme styles */
.mcd-play-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin-left: 4px !important; /* Optical centering for triangle */
}

/* Play icon SVG - explicit styling, immune to theme overrides */
.mcd-play-icon,
.mcd-play-icon-wrap svg {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    fill: #1762A3 !important;
    color: #1762A3 !important;
    pointer-events: none !important;
    transition: fill 0.3s ease, transform 0.3s ease !important;
}
.mcd-play-icon path,
.mcd-play-icon polygon,
.mcd-play-icon-wrap svg path,
.mcd-play-icon-wrap svg polygon {
    fill: #1762A3 !important;
    stroke: none !important;
}

/* ── Hover state ─────────────────────────────────────────────── */
.mcd-video-card:hover .mcd-video-play-btn {
    background: linear-gradient(135deg, #1762A3 0%, #0F4A7A 100%) !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
    box-shadow:
        0 0 0 8px rgba(23, 98, 163, 0.25),
        0 12px 32px rgba(23, 98, 163, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 1) !important;
}
.mcd-video-card:hover .mcd-play-icon,
.mcd-video-card:hover .mcd-play-icon-wrap svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    transform: scale(1.1);
}
.mcd-video-card:hover .mcd-play-icon path,
.mcd-video-card:hover .mcd-play-icon polygon,
.mcd-video-card:hover .mcd-play-icon-wrap svg path,
.mcd-video-card:hover .mcd-play-icon-wrap svg polygon {
    fill: #ffffff !important;
}

/* Stop pulse animation on hover */
.mcd-video-card:hover .mcd-video-play-btn::before {
    animation: none;
    opacity: 0;
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 600px) {
    .mcd-video-play-btn {
        width: 60px !important;
        height: 60px !important;
    }
    .mcd-play-icon,
    .mcd-play-icon-wrap svg {
        width: 22px !important;
        height: 22px !important;
    }
}

.mcd-video-card-body { padding: 16px; }
.mcd-video-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcd-color-text);
    line-height: 1.4;
}
.mcd-video-card-desc {
    margin: 0;
    font-size: 13px;
    color: var(--mcd-color-text-light);
    line-height: 1.55;
}

/* ── Pagination ────────────────────────────────────────────────── */
.mcd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.mcd-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--mcd-radius-sm);
    background: var(--mcd-color-white);
    border: 1px solid var(--mcd-color-border);
    color: var(--mcd-color-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: var(--mcd-transition);
}
.mcd-page-link:hover {
    background: var(--mcd-color-primary);
    color: #fff;
    border-color: var(--mcd-color-primary);
}
.mcd-page-link.is-current {
    background: var(--mcd-color-primary);
    color: #fff;
    border-color: var(--mcd-color-primary);
    cursor: default;
}

/* ── Video Modal ───────────────────────────────────────────────── */
.mcd-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcd-video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    cursor: pointer;
}
.mcd-video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    z-index: 1;
}
.mcd-video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0 8px;
}
.mcd-video-modal-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: var(--mcd-radius-md);
    overflow: hidden;
}
.mcd-video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .mcd-videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mcd-videos-grid { grid-template-columns: 1fr; }
    .mcd-videos-page { padding: 18px; }
}


/* ==========================================================================
   Coaching Videos Page — Unified Style (v4.0)
   Replaces all previous video page CSS
   ========================================================================== */

.mcd-videos-page {
    background: var(--mcd-color-white);
    border-radius: var(--mcd-radius-lg);
    padding: 28px;
    box-shadow: var(--mcd-shadow-md);
}

/* ── Page Header ────────────────────────────────────────────────── */
.mcd-videos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mcd-color-border-light);
}

.mcd-videos-summary {
    margin: 0;
    font-size: 14px;
    color: var(--mcd-color-text-light);
    font-weight: 500;
}

/* ── Filter Chips ──────────────────────────────────────────────── */
.mcd-video-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mcd-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--mcd-color-bg);
    border: 1px solid var(--mcd-color-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mcd-color-text-light);
    cursor: pointer;
    transition: var(--mcd-transition);
    font-family: inherit;
    line-height: 1.2;
}

.mcd-filter-chip:hover {
    border-color: var(--mcd-color-primary);
    color: var(--mcd-color-primary);
    background: var(--mcd-color-primary-lighter);
}

.mcd-filter-chip.is-active {
    background: var(--mcd-color-primary);
    border-color: var(--mcd-color-primary);
    color: var(--mcd-color-white);
    box-shadow: 0 2px 6px rgba(23, 98, 163, 0.25);
}

.mcd-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.mcd-filter-chip.is-active .mcd-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--mcd-color-white);
}

/* ── Videos Grid ───────────────────────────────────────────────── */
.mcd-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mcd-video-card {
    background: var(--mcd-color-white);
    border: 1px solid var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
    overflow: hidden;
    transition: var(--mcd-transition);
    display: flex;
    flex-direction: column;
}

.mcd-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mcd-shadow-hover);
    border-color: var(--mcd-color-primary);
}

/* ── Thumbnail ─────────────────────────────────────────────────── */
.mcd-video-card-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: linear-gradient(135deg, #142a52 0%, #1762A3 100%);
    overflow: hidden;
    cursor: pointer;
}

.mcd-video-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mcd-video-card:hover .mcd-video-card-thumb img {
    transform: scale(1.06);
}

.mcd-video-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
}

.mcd-video-thumb-fallback svg {
    width: 56px;
    height: 56px;
}

/* ── Type Badge (YouTube / Vimeo / Video) ──────────────────────── */
.mcd-video-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 3;
    line-height: 1.2;
}

.mcd-video-type-badge-youtube {
    background: rgba(255, 0, 0, 0.9);
}

.mcd-video-type-badge-vimeo {
    background: rgba(26, 183, 234, 0.9);
}

.mcd-video-type-badge-mp4 {
    background: rgba(0, 0, 0, 0.75);
}

/* ── Play Button on Thumbnail ──────────────────────────────────── */
.mcd-video-card .mcd-video-play-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 4 !important;
    cursor: pointer;
    border: none !important;
    padding: 0 !important;
}

.mcd-video-card .mcd-video-play-btn svg {
    width: 28px !important;
    height: 28px !important;
    color: var(--mcd-color-primary) !important;
    stroke: var(--mcd-color-primary) !important;
    fill: none !important;
    margin-left: 2px;
}

.mcd-video-card .mcd-video-play-btn svg polygon {
    fill: var(--mcd-color-primary) !important;
    stroke: var(--mcd-color-primary) !important;
}

.mcd-video-card:hover .mcd-video-play-btn {
    background: var(--mcd-color-primary) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

.mcd-video-card:hover .mcd-video-play-btn svg {
    color: #fff !important;
    stroke: #fff !important;
}

.mcd-video-card:hover .mcd-video-play-btn svg polygon {
    fill: #fff !important;
    stroke: #fff !important;
}

/* ── Card Body ─────────────────────────────────────────────────── */
.mcd-video-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mcd-video-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mcd-color-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcd-video-card-desc {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--mcd-color-text-light);
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Watch Now Button (Small Outlined) ─────────────────────────── */
.mcd-video-watch-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px !important;
    background: transparent;
    color: var(--mcd-color-primary);
    border: 1px solid var(--mcd-color-primary);
    border-radius: var(--mcd-radius-sm);
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mcd-transition);
    align-self: flex-start;
    font-family: inherit;
    line-height: 1.2;
}

/* Force the SVG inside Watch Now to be SMALL (override .mcd-play-icon !important rules) */
.mcd-video-watch-btn svg,
.mcd-video-watch-btn .mcd-play-icon {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
}

.mcd-video-watch-btn svg polygon,
.mcd-video-watch-btn .mcd-play-icon polygon {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.mcd-video-watch-btn:hover {
    background: var(--mcd-color-primary);
    color: #fff;
}

/* ── Empty State ───────────────────────────────────────────────── */
.mcd-videos-empty {
    text-align: center;
    padding: 50px 20px;
    background: var(--mcd-color-bg);
    border: 2px dashed var(--mcd-color-border);
    border-radius: var(--mcd-radius-md);
}

.mcd-videos-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mcd-color-primary-lighter);
    color: var(--mcd-color-primary);
    margin-bottom: 14px;
}

.mcd-videos-empty-icon svg {
    width: 28px;
    height: 28px;
}

.mcd-videos-empty h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mcd-color-text);
}

.mcd-videos-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--mcd-color-text-light);
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Video Lightbox Modal — Properly Centered
   ========================================================================== */

.mcd-video-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    animation: mcdModalFadeIn 0.25s ease;
}

.mcd-video-modal[hidden] {
    display: none !important;
}

@keyframes mcdModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mcd-video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.mcd-video-modal-content {
    position: relative;
    width: 100%;
    max-width: 960px;
    z-index: 2;
    animation: mcdModalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mcdModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mcd-video-modal-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
    line-height: 1.4;
}

.mcd-video-modal-title:empty {
    display: none;
}

.mcd-video-modal-close {
    position: absolute;
    top: -8px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 3;
}

.mcd-video-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.mcd-video-modal-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.mcd-video-modal-frame iframe,
.mcd-video-modal-frame video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Lock body scroll when modal is open */
body.mcd-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .mcd-videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mcd-videos-page {
        padding: 18px;
    }
    .mcd-videos-grid {
        grid-template-columns: 1fr;
    }
    .mcd-videos-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .mcd-video-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    .mcd-filter-chip {
        flex-shrink: 0;
    }
    .mcd-video-card .mcd-video-play-btn {
        width: 54px !important;
        height: 54px !important;
    }
    .mcd-video-card .mcd-video-play-btn svg {
        width: 22px !important;
        height: 22px !important;
    }
    .mcd-video-modal {
        padding: 16px !important;
    }
    .mcd-video-modal-close {
        top: -45px;
    }
}

/* ====================================================
   Get Free Report — Mailchimp Embedded Form
   Added in v3.2
   ==================================================== */
.mcd-free-report-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px;
}
.mcd-free-report-header {
    text-align: center;
    margin-bottom: 30px;
}
.mcd-free-report-header h2 {
    color: #1762A3;
    font-size: 28px;
    margin: 0 0 12px;
    font-weight: 700;
}
.mcd-free-report-subtitle {
    color: #555;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* ── Form Card ──────────────────────────── */
.mcd-free-report-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

/* ── Logo Block ─────────────────────────── */
.mcd-free-report-logo {
    background: #fff;
    padding: 28px 20px 0;
    text-align: center;
}
.mcd-free-report-logo img {
    display: inline-block;
    max-width: 260px;   /* smaller per your request */
    width: 50%;
    height: auto;
}

/* ── Top Branded Banner ─────────────────── */
.mcd-free-report-banner {
    text-align: center;
    padding: 10px 20px 28px;
    background: #fff;            /* clean white like the Mailchimp form */
    border-bottom: 1px solid #eef0f4;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-top: 30px;
}
.mcd-free-report-banner .mcd-banner-eyebrow {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px;
    line-height: 1.3;
}
.mcd-free-report-banner h3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.mcd-banner-ready {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 10px 0;
    line-height: 1.3;
}
.mcd-banner-cta {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 10px 0 0;
    line-height: 1.3;
}

/* ── Mailchimp Form Fields ──────────────── */
#mc_embed_signup.mcd-mc-form {
    padding: 30px;
    background: #fff;
    clear: left;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
#mc_embed_signup.mcd-mc-form .mc-field-group {
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
}
#mc_embed_signup.mcd-mc-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 14px;
}
#mc_embed_signup.mcd-mc-form input[type="email"],
#mc_embed_signup.mcd-mc-form input[type="text"],
#mc_embed_signup.mcd-mc-form input[type="tel"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    color: #333;
}
#mc_embed_signup.mcd-mc-form input[type="email"]:focus,
#mc_embed_signup.mcd-mc-form input[type="text"]:focus,
#mc_embed_signup.mcd-mc-form input[type="tel"]:focus {
    border-color: #1762A3;
    box-shadow: 0 0 0 3px rgba(23, 98, 163, 0.12);
    outline: none;
}
.mcd-asterisk {
    color: #e85c41;
    margin-left: 3px;
}

/* ── Submit Button ──────────────────────── */
.mcd-submit-wrap {
    margin-top: 24px;
    text-align: center;
}
.mcd-submit-btn {
    background: #1762A3 !important;
    color: #fff !important;
    padding: 13px 36px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100%;
    max-width: 320px;
    transition: background 0.2s, transform 0.1s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.mcd-submit-btn:hover {
    background: #0F4A7A !important;
    transform: translateY(-1px);
}
.mcd-submit-btn:active {
    transform: translateY(0);
}

/* ── Response Messages ──────────────────── */
#mc_embed_signup.mcd-mc-form #mce-responses {
    margin: 15px 0 0;
    padding: 0;
}
#mc_embed_signup.mcd-mc-form .response {
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    margin: 10px 0 0;
}
#mc_embed_signup.mcd-mc-form #mce-success-response {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
#mc_embed_signup.mcd-mc-form #mce-error-response {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 600px) {
    .mcd-free-report-page { padding: 20px 10px; }
    .mcd-free-report-header h2 { font-size: 22px; }

    .mcd-free-report-logo { padding: 22px 16px 0; }
    .mcd-free-report-logo img { max-width: 200px; width: 50%; }

    .mcd-free-report-banner { padding: 8px 16px 22px; margin-top: 15px; }
    .mcd-free-report-banner .mcd-banner-eyebrow { font-size: 17px; margin-bottom: 10px; }
    .mcd-free-report-banner h3 { font-size: 32px; margin-bottom: 12px; }
    .mcd-banner-ready,
    .mcd-banner-cta { font-size: 17px; }

    #mc_embed_signup.mcd-mc-form { padding: 20px; }
    .mcd-submit-btn { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   UPCOMING APPOINTMENTS — Book Now Button & Empty State
   ═══════════════════════════════════════════════════════════════════ */

/* ── Empty State Styles ─────────────────────────────────────────── */
.mcd-empty-appointments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    gap: 12px;
}

.mcd-empty-appointments-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(23, 98, 163, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    margin-bottom: 4px;
}

.mcd-empty-appointments-icon svg {
    width: 28px;
    height: 28px;
}

.mcd-empty-appointments h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.mcd-empty-appointments p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ── Book Now Button Wrapper (when appointments exist) ──────────── */
.mcd-book-another-wrap {
    padding: 16px 20px 4px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}

/* ── Primary Button Style ───────────────────────────────────────── */
.mcd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    line-height: 1.4;
}

.mcd-btn-primary {
    background: var(--mcd-gradient-primary);
    color: #ffffff !important;
    box-shadow: var(--mcd-shadow-primary);
}

.mcd-btn-primary:hover {
    background: var(--mcd-gradient-primary-hover);
    box-shadow: 0 4px 16px rgba(23, 98, 163, 0.45);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none;
}

.mcd-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--mcd-shadow-primary);
}

.mcd-btn-outline {
    background: transparent;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6;
}

.mcd-btn-outline:hover {
    background: #3b82f6;
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Appointment status badges ──────────────────────────────────── */
.mcd-appt-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 6px;
}

.mcd-appt-status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.mcd-appt-status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.mcd-appt-status-canceled,
.mcd-appt-status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* ── Amelia Popup Override Styles ───────────────────────────────── */
/* Ensure Amelia popup sits above dashboard elements */
.amelia-container .el-dialog__wrapper,
.amelia-v2-booking .el-dialog__wrapper {
    z-index: 999999 !important;
}

/* Fix Amelia popup inside WooCommerce my-account */
body.mccarthy-dashboard-active .amelia-container {
    position: relative;
    z-index: 1;
}

/* Ensure overlay covers full screen */
body.mccarthy-dashboard-active .el-overlay,
body.mccarthy-dashboard-active .v3-amelia-booking-modal-overlay {
    z-index: 999998 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── Hide the Amelia shortcode wrapper visually ─────────────────── */
.mcd-amelia-popup-trigger {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Keep Amelia modal accessible when it opens */
.mcd-amelia-popup-trigger .amelia-container,
.mcd-amelia-popup-trigger .amelia-v2-booking {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR & QUICK ACTION BOOKING TRIGGERS
   Make booking-trigger links look clickable & remove default link behavior
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar booking link — keep visual identity of normal nav item */
.mcd-sidebar-booking-link {
    cursor: pointer !important;
    position: relative;
}

/* Subtle hint on hover that it triggers a popup */
.mcd-sidebar-booking-link::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #3b82f6;
    border-top: 2px solid #3b82f6;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease, right 0.2s ease;
}

.mcd-sidebar-booking-link:hover::after {
    opacity: 0.6;
    right: 8px;
}

/* Quick Action booking card — keep card style intact, just add cursor */
.mcd-quick-action-booking {
    cursor: pointer !important;
}

/* Subtle "live" indicator on booking quick-action cards */
.mcd-quick-action-booking::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: mcd-pulse-dot 2s infinite;
    z-index: 2;
}

@keyframes mcd-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Loading state for any booking trigger */
.mcd-book-now-btn.mcd-btn-loading,
.mcd-sidebar-booking-link.mcd-btn-loading,
.mcd-quick-action-booking.mcd-btn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.mcd-book-now-btn.mcd-btn-loading::after,
.mcd-sidebar-booking-link.mcd-btn-loading::after,
.mcd-quick-action-booking.mcd-btn-loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(23, 98, 163, 0.3);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: mcd-spin 0.6s linear infinite;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

@keyframes mcd-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────
   Universal button focus/active override for theme conflicts
   ──────────────────────────────────────────────────────────── */
.site a.mcd-btn,
.site a.mcd-btn:link,
.site a.mcd-btn:visited,
.site a.mcd-btn:hover,
.site a.mcd-btn:focus,
.site a.mcd-btn:active,
.site a.mcd-btn:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    text-decoration: none !important;
    outline: none !important;
}

/* Primary button color preservation */
.site a.mcd-btn-primary,
.site a.mcd-btn-primary:link,
.site a.mcd-btn-primary:visited,
.site a.mcd-btn-primary:focus,
.site a.mcd-btn-primary:active,
.site a.mcd-btn-primary:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: var(--mcd-gradient-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.35) !important;
}

.site a.mcd-btn-primary:hover {
    background: var(--mcd-gradient-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(23, 98, 163, 0.5) !important;
}

/* Outline button variant */
.site a.mcd-btn-outline,
.site a.mcd-btn-outline:link,
.site a.mcd-btn-outline:visited,
.site a.mcd-btn-outline:focus,
.site a.mcd-btn-outline:active,
.site a.mcd-btn-outline:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: transparent !important;
    color: var(--mcd-color-primary) !important;
    border: 2px solid var(--mcd-color-primary) !important;
}

.site a.mcd-btn-outline:hover {
    background: var(--mcd-gradient-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Keyboard accessibility — visible focus ring */
.site a.mcd-btn:focus-visible {
    outline: 2px solid var(--mcd-color-primary-hover) !important;
    outline-offset: 2px !important;
}
/* ═══════════════════════════════════════════════════════════════════
   INLINE PAGE HEADER (Top of right content area)
   Shows on all pages except main dashboard
   ═══════════════════════════════════════════════════════════════════ */

.mcd-page-header-inline {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 28px;
    margin: 0 0 24px 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 4px 12px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
}

/* Decorative gradient accent on left side */
.mcd-page-header-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #1762A3 100%);
    border-radius: 5px 0 0 5px;
}

/* Inner flex container */
.mcd-page-header-inline-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Icon container */
.mcd-page-header-inline-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(23, 98, 163, 0.12) 0%, rgba(23, 98, 163, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1762A3;
    transition: transform 0.3s ease;
}

.mcd-page-header-inline:hover .mcd-page-header-inline-icon {
    transform: scale(1.05) rotate(-3deg);
}

.mcd-page-header-inline-icon svg {
    width: 28px;
    height: 28px;
}

/* Text wrapper */
.mcd-page-header-inline-text {
    flex: 1;
    min-width: 0;
}

/* Main title */
.mcd-page-header-inline-title {
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Subtitle */
.mcd-page-header-inline-subtitle {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

/* ── Responsive: Mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
    .mcd-page-header-inline {
        padding: 18px 20px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    .mcd-page-header-inline-content {
        gap: 14px;
    }

    .mcd-page-header-inline-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    .mcd-page-header-inline-icon svg {
        width: 22px;
        height: 22px;
    }

    .mcd-page-header-inline-title {
        font-size: 1.25rem;
    }

    .mcd-page-header-inline-subtitle {
        font-size: 0.8125rem;
    }
}

/* ── Hide redundant H1 inside WooCommerce inner pages ─────────── */
/* Sometimes WC outputs its own h2/h3 at the top — keep them
   but if they're redundant with our header, they look natural */
.mcd-inner-page-wrapper > h1:first-child,
.mcd-inner-page-wrapper > h2:first-child {
    margin-top: 0;
}

/* Spacing fix when inline header is followed by WC content */
.mcd-page-header-inline + .mcd-inner-page-wrapper {
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FULL WIDTH FIX — Override Theme Wrappers on My Account Page
   
   The theme wraps our dashboard inside .woocommerce, .entry-content,
   article, etc. with max-width/padding/margins. We force everything
   to full width FIRST, then apply a smart max-width on the dashboard
   itself so it stays centered & comfortable on ultra-wide screens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kill theme constraints on every wrapper ────────────────────── */
body.mccarthy-dashboard-active #page,
body.mccarthy-dashboard-active #content,
body.mccarthy-dashboard-active #primary,
body.mccarthy-dashboard-active #main,
body.mccarthy-dashboard-active .site-content,
body.mccarthy-dashboard-active .content-area,
body.mccarthy-dashboard-active .site-main,
body.mccarthy-dashboard-active article.page,
body.mccarthy-dashboard-active article.hentry,
body.mccarthy-dashboard-active .entry-content,
body.mccarthy-dashboard-active .post-8 .entry-content,
body.mccarthy-dashboard-active .woocommerce,
body.mccarthy-dashboard-active .woocommerce-account .woocommerce,
body.mccarthy-dashboard-active .wp-site-blocks,
body.mccarthy-dashboard-active .wp-block-group,
body.mccarthy-dashboard-active .is-layout-constrained,
body.mccarthy-dashboard-active .is-layout-flow {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Override default-max-width from block themes ───────────────── */
body.mccarthy-dashboard-active .default-max-width,
body.mccarthy-dashboard-active .wide-max-width,
body.mccarthy-dashboard-active .alignwide,
body.mccarthy-dashboard-active .alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Twenty Twenty-Two/Three/Four/Five specific overrides ───────── */
body.mccarthy-dashboard-active .wp-block-post-content,
body.mccarthy-dashboard-active .wp-block-post-content > *,
body.mccarthy-dashboard-active .entry-content > *:not(.alignwide):not(.alignfull) {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Reset CSS custom properties that theme uses ────────────────── */
body.mccarthy-dashboard-active {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
    --global--spacing-measure: 100%;
    --global--spacing-horizontal: 0;
    --content-size: 100%;
    --wide-size: 100%;
}

/* ── Hide article header on My Account (was already removed via H1
      hide, but kill the whole header for cleaner layout) ─────────── */
body.mccarthy-dashboard-active article > .entry-header,
body.mccarthy-dashboard-active article > header.entry-header,
body.mccarthy-dashboard-active .entry-header.alignwide {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SMART CONTAINER — Center dashboard with max-width on large screens
   This is what makes it look professional like Stripe/Shopify/Notion
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cap the dashboard width & center it on ultra-wide screens ──── */
body.mccarthy-dashboard-active .mcd-app,
body.mccarthy-dashboard-active #mcd-app {
    width: 100% !important;
    max-width: 1600px !important;   /* ← Cap on ultra-wide. Change to taste. */
    margin: 0 auto !important;       /* ← Center horizontally */
    padding: 0 !important;
}

/* ── Add comfortable side padding on the outer container ────────── */
body.mccarthy-dashboard-active #main,
body.mccarthy-dashboard-active .site-main {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* ── Inner padding on the main content area ─────────────────────── */
body.mccarthy-dashboard-active .mcd-main {
    padding: 0 24px 24px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE PADDING — Adjusts for different screen sizes
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet & smaller laptops ───────────────────────────────────── */
@media (max-width: 1200px) {
    body.mccarthy-dashboard-active #main,
    body.mccarthy-dashboard-active .site-main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    body.mccarthy-dashboard-active .mcd-main {
        padding: 20px !important;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.mccarthy-dashboard-active #main,
    body.mccarthy-dashboard-active .site-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    body.mccarthy-dashboard-active .mcd-main {
        padding: 10px !important;
        margin: 10px 0;
    }
    div#mcd-app aside.mcd-sidebar button#mcd-sidebar-toggle {
    background-color: transparent;
    outline: none;
    }
}

/* ── Small mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    body.mccarthy-dashboard-active #main,
    body.mccarthy-dashboard-active .site-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND & VISUAL POLISH
   ═══════════════════════════════════════════════════════════════════ */

/* ── Subtle background so dashboard content stands out ──────────── */
body.mccarthy-dashboard-active #page,
body.mccarthy-dashboard-active .site-content {
    background: #F7FAFC;
}

/* ── Remove any odd background colors from article/main ─────────── */
body.mccarthy-dashboard-active article,
body.mccarthy-dashboard-active .entry-content,
body.mccarthy-dashboard-active .woocommerce {
    background: transparent !important;
}

/* ── Kill default WP block layout gap ───────────────────────────── */
body.mccarthy-dashboard-active .wp-block-post-content > * + *,
body.mccarthy-dashboard-active .entry-content > * + * {
    margin-block-start: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MY BOOKINGS PAGE — Premium Booking Management
   ═══════════════════════════════════════════════════════════════════ */

.mcd-bookings-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Top Bar: Stats + Book New Button ───────────────────────────── */
.mcd-bookings-topbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.mcd-bookings-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.mcd-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.mcd-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.mcd-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mcd-stat-icon svg {
    width: 24px;
    height: 24px;
}

.mcd-stat-upcoming .mcd-stat-icon {
    background: linear-gradient(135deg, rgba(23, 98, 163, 0.15), rgba(23, 98, 163, 0.08));
    color: #1762A3;
}

.mcd-stat-completed .mcd-stat-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08));
    color: #059669;
}

.mcd-stat-hours .mcd-stat-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(124, 58, 237, 0.08));
    color: #7c3aed;
}

.mcd-stat-content {
    display: flex;
    flex-direction: column;
}

.mcd-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
}

.mcd-stat-label {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

/* ── Book New Button ────────────────────────────────────────────── */
.mcd-bookings-actions {
    display: flex;
    align-items: center;
}

.mcd-btn-book-new {
    padding: 14px 24px !important;
    font-size: 0.9375rem !important;
    border-radius: 12px !important;
    white-space: nowrap;
}

/* ── Tabs ───────────────────────────────────────────────────────── */
.mcd-bookings-tabs {
    display: flex;
    gap: 4px;
    background: #ffffff;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow-x: auto;
    scrollbar-width: none;
}

.mcd-bookings-tabs::-webkit-scrollbar {
    display: none;
}

.mcd-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mcd-tab-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.mcd-tab-btn.is-active {
    background: linear-gradient(135deg, #3b82f6 0%, #1762A3 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.3);
}

.mcd-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.15);
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
}

.mcd-tab-btn.is-active .mcd-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* ── Tab Content ────────────────────────────────────────────────── */
.mcd-tab-content {
    display: none;
    animation: mcd-fade-in 0.3s ease;
}

.mcd-tab-content.is-active {
    display: block;
}

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

/* ── Bookings List ──────────────────────────────────────────────── */
.mcd-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Single Booking Card ────────────────────────────────────────── */
.mcd-booking-card {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 20px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 24px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

.mcd-booking-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #cbd5e1;
    transition: background 0.2s ease;
}

.mcd-booking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.mcd-booking-status-approved::before { background: linear-gradient(180deg, #10b981, #059669); }
.mcd-booking-status-pending::before  { background: linear-gradient(180deg, #f59e0b, #d97706); }
.mcd-booking-status-canceled::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.mcd-booking-status-rejected::before { background: linear-gradient(180deg, #ef4444, #dc2626); }
.mcd-booking-card-past::before       { background: linear-gradient(180deg, #94a3b8, #64748b); }

/* ── Date Column Wrapper (date block + coach avatar) ────────────── */
.mcd-booking-date-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 90px;
    flex-shrink: 0;
}

/* ── Premium Date Block ─────────────────────────────────────────── */
.mcd-booking-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 8px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Top accent bar on date block */
.mcd-booking-date::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #1762A3 100%);
}

.mcd-booking-card:hover .mcd-booking-date {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.mcd-booking-month {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1762A3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.mcd-booking-day {
    font-size: 1.875rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 2px;
}

.mcd-booking-year {
    font-size: 0.6875rem;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: 0.02em;
}

/* ── Coach Mini Avatar (under date block) ───────────────────────── */
.mcd-booking-coach-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1762A3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.25);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mcd-booking-card:hover .mcd-booking-coach-avatar {
    transform: scale(1.08);
}

.mcd-booking-coach-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Show initial only if no image (fallback) */
.mcd-booking-coach-avatar .mcd-coach-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.mcd-booking-coach-avatar img + .mcd-coach-initial {
    display: none;
}

.mcd-booking-coach-avatar.is-fallback .mcd-coach-initial {
    display: block;
}

/* Status-based date block accent colors */
.mcd-booking-status-approved .mcd-booking-date::before {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.mcd-booking-status-pending .mcd-booking-date::before {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.mcd-booking-status-canceled .mcd-booking-date::before,
.mcd-booking-status-rejected .mcd-booking-date::before {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Past bookings get a grayer date */
.mcd-booking-card-past .mcd-booking-day {
    color: #475569;
}

.mcd-booking-card-past .mcd-booking-month {
    color: #64748b;
}

.mcd-booking-card-past .mcd-booking-date::before {
    background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}

/* ── Update grid template to fit new date wrapper width ─────────── */
.mcd-booking-card {
    grid-template-columns: 90px 1fr auto !important;
}

/* ── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .mcd-booking-card {
        grid-template-columns: 80px 1fr !important;
    }

    .mcd-booking-date-wrap {
        width: 80px;
    }

    .mcd-booking-day {
        font-size: 1.5rem;
    }

    .mcd-booking-coach-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.6875rem;
    }
}

/* ── Info Column ────────────────────────────────────────────────── */
.mcd-booking-info {
    min-width: 0;
}

.mcd-booking-service {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.mcd-booking-coach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 12px 0;
    font-weight: 500;
}

.mcd-booking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mcd-booking-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}

.mcd-booking-meta-item svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    flex-shrink: 0;
}

/* ── Side Column: Status + Actions ──────────────────────────────── */
.mcd-booking-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.mcd-booking-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mcd-booking-status.mcd-booking-status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.mcd-booking-status.mcd-booking-status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.mcd-booking-status.mcd-booking-status-canceled,
.mcd-booking-status.mcd-booking-status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.mcd-booking-actions {
    display: flex;
    gap: 6px;
}

.mcd-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.mcd-btn-outline-sm {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.mcd-btn-outline-sm:hover {
    background: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ── Empty State ────────────────────────────────────────────────── */
.mcd-bookings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    padding: 60px 24px;
    gap: 12px;
}

.mcd-bookings-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 8px;
}

.mcd-bookings-empty-icon svg {
    width: 36px;
    height: 36px;
}

.mcd-bookings-empty-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.mcd-bookings-empty-desc {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0 0 12px 0;
    max-width: 380px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .mcd-bookings-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .mcd-stat-card {
        padding: 14px 16px;
    }

    .mcd-stat-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .mcd-bookings-topbar {
        flex-direction: column;
    }

    .mcd-bookings-stats {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .mcd-bookings-actions {
        width: 100%;
    }

    .mcd-btn-book-new {
        width: 100%;
        justify-content: center;
    }

    .mcd-booking-card {
        grid-template-columns: 70px 1fr;
        gap: 16px;
        padding: 16px;
    }

    .mcd-booking-side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
    }
}

@media (max-width: 480px) {
    .mcd-bookings-stats {
        grid-template-columns: 1fr;
    }

    .mcd-stat-card {
        padding: 16px;
    }

    .mcd-booking-meta {
        gap: 10px;
    }

    .mcd-tab-btn {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND COLOR — Final Safety Net (v3.6)
   Catches any edge cases & ensures consistent brand application
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inline page header: ensure gradient uses brand ─────────────── */
.mcd-page-header-inline::before {
    background: var(--mcd-gradient-primary) !important;
}

.mcd-page-header-inline-icon {
    background: linear-gradient(135deg, rgba(23, 98, 163, 0.12) 0%, rgba(23, 98, 163, 0.08) 100%);
    color: var(--mcd-color-primary);
}

/* ── My Bookings: stat icon gradient (upcoming) ─────────────────── */
.mcd-stat-upcoming .mcd-stat-icon {
    background: linear-gradient(135deg, rgba(23, 98, 163, 0.15), rgba(15, 74, 122, 0.08));
    color: var(--mcd-color-primary);
}

/* ── My Bookings: active tab gradient ───────────────────────────── */
.mcd-tab-btn.is-active {
    background: var(--mcd-gradient-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.3) !important;
}

/* ── My Bookings: date block top accent ─────────────────────────── */
.mcd-booking-date::before {
    background: linear-gradient(90deg, var(--mcd-color-primary) 0%, var(--mcd-color-primary-dark) 100%);
}

/* ── My Bookings: month text on date block ──────────────────────── */
.mcd-booking-month {
    color: var(--mcd-color-primary);
}

/* ── My Bookings: coach avatar gradient ─────────────────────────── */
.mcd-booking-coach-avatar {
    background: var(--mcd-gradient-primary);
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.25);
}

/* ── My Bookings: outline button hover ──────────────────────────── */
.mcd-btn-outline-sm:hover {
    border-color: var(--mcd-color-primary);
    color: var(--mcd-color-primary);
}

/* ── Empty appointments icon (uses brand blue) ──────────────────── */
.mcd-empty-appointments-icon {
    background: rgba(23, 98, 163, 0.1);
    color: var(--mcd-color-primary);
}

/* ── Sidebar booking link arrow indicator ───────────────────────── */
.mcd-sidebar-booking-link::after {
    border-right-color: var(--mcd-color-primary);
    border-top-color: var(--mcd-color-primary);
}

/* ── Loading spinner color ──────────────────────────────────────── */
.mcd-book-now-btn.mcd-btn-loading::after,
.mcd-sidebar-booking-link.mcd-btn-loading::after,
.mcd-quick-action-booking.mcd-btn-loading::after {
    border-color: rgba(23, 98, 163, 0.3);
    border-top-color: var(--mcd-color-primary);
}

/* ── Videos page icon gradient ──────────────────────────────────── */
.mcd-videos-page-icon {
    background: linear-gradient(135deg, var(--mcd-color-primary-light) 0%, var(--mcd-color-primary-subtle) 100%);
    color: var(--mcd-color-primary);
}

/* ── Videos empty state icon ────────────────────────────────────── */
.mcd-empty-icon {
    background: linear-gradient(135deg, var(--mcd-color-primary-light) 0%, var(--mcd-color-primary-subtle) 100%);
    color: var(--mcd-color-primary);
}

/* ── Pagination current page ────────────────────────────────────── */
.mcd-page-num.is-current {
    background: var(--mcd-gradient-primary);
    border-color: var(--mcd-color-primary);
    box-shadow: 0 4px 12px rgba(23, 98, 163, 0.3);
}

/* ── Video card watch button hover ──────────────────────────────── */
.mcd-video-card:hover .mcd-video-watch-btn {
    background: var(--mcd-color-primary);
    color: #ffffff;
}

.mcd-video-watch-btn {
    background: rgba(23, 98, 163, 0.08);
    color: var(--mcd-color-primary);
}

/* ── Footer bar (currently uses light blue bg) ──────────────────── */
.woocommerce section.mcd-footer-bar {
    background: var(--mcd-color-primary-light);
}

/* ── Video card play button — keep blue gradient on hover ───────── */
.mcd-video-card:hover .mcd-video-play-btn {
    background: var(--mcd-gradient-primary) !important;
    box-shadow:
        0 0 0 8px rgba(23, 98, 163, 0.25),
        0 12px 32px rgba(23, 98, 163, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Play icon SVG hover state stays white (no change needed) */
.mcd-play-icon,
.mcd-play-icon-wrap svg {
    fill: var(--mcd-color-primary) !important;
    color: var(--mcd-color-primary) !important;
}
.mcd-play-icon path,
.mcd-play-icon polygon,
.mcd-play-icon-wrap svg path,
.mcd-play-icon-wrap svg polygon {
    fill: var(--mcd-color-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COMING SOON CARD — Resources & Guides Placeholder
   ═══════════════════════════════════════════════════════════════════ */
.mcd-coming-soon-card {
    background: linear-gradient(135deg, #ffffff 0%, var(--mcd-color-primary-lighter) 100%);
    border-radius: 20px;
    padding: 56px 40px;
    text-align: center;
    border: 1px solid var(--mcd-color-primary-subtle);
    box-shadow: 0 4px 20px rgba(23, 98, 163, 0.06);
    position: relative;
    overflow: hidden;
}

/* Decorative background pattern */
.mcd-coming-soon-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(23, 98, 163, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.mcd-coming-soon-card::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(23, 98, 163, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Icon ──────────────────────────────────────────────────────── */
.mcd-coming-soon-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--mcd-gradient-primary);
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow:
        0 0 0 8px rgba(23, 98, 163, 0.1),
        0 8px 24px rgba(23, 98, 163, 0.3);
    animation: mcd-coming-soon-float 3s ease-in-out infinite;
}

@keyframes mcd-coming-soon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(5deg); }
}

/* ── Badge ─────────────────────────────────────────────────────── */
.mcd-coming-soon-badge {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 6px 16px;
    background: var(--mcd-color-primary);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(23, 98, 163, 0.3);
}

/* ── Title ─────────────────────────────────────────────────────── */
.mcd-coming-soon-title {
    position: relative;
    z-index: 1;
    font-size: 1.875rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ── Lead Paragraph ────────────────────────────────────────────── */
.mcd-coming-soon-lead {
    position: relative;
    z-index: 1;
    font-size: 1.0625rem;
    color: #475569;
    margin: 0 auto 32px;
    line-height: 1.6;
    max-width: 560px;
}

/* ── Features Grid ─────────────────────────────────────────────── */
.mcd-coming-soon-features {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: left;
}

.mcd-coming-soon-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--mcd-color-primary-subtle);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.mcd-coming-soon-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 98, 163, 0.1);
    border-color: var(--mcd-color-primary);
}

.mcd-coming-soon-feature svg {
    width: 20px;
    height: 20px;
    color: var(--mcd-color-primary);
    flex-shrink: 0;
    background: var(--mcd-color-primary-light);
    border-radius: 50%;
    padding: 3px;
}

.mcd-coming-soon-feature span {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Note (bottom) ─────────────────────────────────────────────── */
.mcd-coming-soon-note {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

.mcd-coming-soon-note a {
    color: var(--mcd-color-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}

.mcd-coming-soon-note a:hover {
    border-bottom-color: var(--mcd-color-primary);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mcd-coming-soon-card {
        padding: 40px 24px;
    }

    .mcd-coming-soon-title {
        font-size: 1.5rem;
    }

    .mcd-coming-soon-lead {
        font-size: 0.9375rem;
    }

    .mcd-coming-soon-features {
        grid-template-columns: 1fr;
    }

    .mcd-coming-soon-icon {
        width: 72px;
        height: 72px;
    }

    .mcd-coming-soon-icon svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .mcd-coming-soon-card {
        padding: 32px 20px;
    }

    .mcd-coming-soon-title {
        font-size: 1.25rem;
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v3.8 — SIDEBAR BRAND COLOR OVERRIDE
   Sidebar: Logo Blue background
   Menu hover + active: Logo Gold
   ═══════════════════════════════════════════════════════════════════ */

.mcd-cards-grid a.mcd-card:focus{
   outline: none !important;
   text-decoration:none !important;
   background: transparent !important;
}

/* ── Sidebar Background → Logo Blue ─────────────────────────────── */
.mcd-sidebar {
    background: var(--mcd-color-primary) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px;
}

/* ── Logo divider (subtle white line) ───────────────────────────── */
.mcd-sidebar-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Logo text on dark bg */
.mcd-logo-text strong {
    color: #ffffff;
}
.mcd-logo-text span {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Menu items: default state (white-ish text on blue) ─────────── */
.mcd-sidebar-nav .mcd-nav-item a {
    color: rgba(255, 255, 255, 0.82);
}

/* ── Menu items: HOVER → Logo Gold ──────────────────────────────── */
.mcd-sidebar-nav .mcd-nav-item a:hover {
    background: var(--mcd-color-gold-soft);
    color: var(--mcd-color-gold-light);
}

/* ── Menu items: ACTIVE → Logo Gold (solid) ─────────────────────── */
.mcd-sidebar-nav .mcd-nav-item.is-active a {
    background: var(--mcd-color-gold);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(207, 154, 14, 0.35);
}

/* Hover on already-active item — slightly darker gold */
.mcd-sidebar-nav .mcd-nav-item.is-active a:hover {
    background: var(--mcd-color-gold-dark);
    color: #ffffff;
}

/* ── Mobile toggle bars: white on blue bg ───────────────────────── */
.mcd-sidebar-toggle span {
    background: #ffffff;
}

/* ── Sidebar Help Card: translucent on blue bg ──────────────────── */
.mcd-sidebar-help {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
}
.mcd-sidebar-help h4 {
    color: #ffffff;
}
.mcd-sidebar-help p {
    color: rgba(255, 255, 255, 0.75);
}
.mcd-help-link {
    color: var(--mcd-color-gold-light);
}
.mcd-help-link:hover {
    color: #ffffff;
}

/* ── Sidebar booking-link arrow hint (gold instead of blue) ─────── */
.mcd-sidebar-booking-link::after {
    border-right-color: var(--mcd-color-gold-light);
    border-top-color: var(--mcd-color-gold-light);
}

/* ═══════════════════════════════════════════════════════════════════
   v3.8 — QUICK ACTION CARD UNDERLINE FIX
   Theme injects underline on <a> text; explicitly remove it
   ═══════════════════════════════════════════════════════════════════ */

.mcd-card,
.mcd-card:hover,
.mcd-card:focus,
.mcd-card:active,
.mcd-card *,
.mcd-card:hover *,
.mcd-card:focus *,
.mcd-card:active * {
    text-decoration: none !important;
    outline: none !important;
}

.mcd-card .mcd-card-title,
.mcd-card .mcd-card-desc,
.mcd-card:hover .mcd-card-title,
.mcd-card:hover .mcd-card-desc,
.mcd-card:focus .mcd-card-title,
.mcd-card:focus .mcd-card-desc {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Also kill any text-decoration on sidebar nav (defence) */
.mcd-sidebar-nav .mcd-nav-item a,
.mcd-sidebar-nav .mcd-nav-item a:hover,
.mcd-sidebar-nav .mcd-nav-item a:focus,
.mcd-sidebar-nav .mcd-nav-item a:active {
    text-decoration: none !important;
}

.mcd-sidebar-nav .mcd-nav-item a:focus{
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.8 — FLAT BUTTON COLORS (Remove gradient look)
   Buttons now use solid logo blue instead of gradient
   ═══════════════════════════════════════════════════════════════════ */

.mcd-btn-primary,
.site a.mcd-btn-primary,
.site a.mcd-btn-primary:link,
.site a.mcd-btn-primary:visited {
    background: var(--mcd-color-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(21, 99, 163, 0.25) !important;
}

.mcd-btn-primary:hover,
.site a.mcd-btn-primary:hover,
.site a.mcd-btn-primary:focus {
    background: var(--mcd-color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(21, 99, 163, 0.4) !important;
}

/* My Bookings: active tab (was gradient) → flat */
.mcd-tab-btn.is-active {
    background: var(--mcd-color-primary) !important;
}

/* My Bookings: coach avatar (was gradient) → flat */
.mcd-booking-coach-avatar {
    background: var(--mcd-color-primary) !important;
}

/* Video card watch button hover */
.mcd-video-card:hover .mcd-video-play-btn {
    background: var(--mcd-color-primary) !important;
}

/* Coming soon icon */
.mcd-coming-soon-icon {
    background: var(--mcd-color-primary);
}




/* ═══════════════════════════════════════════════════════════════════
   RESOURCES & GUIDES PAGE — Frontend Styles (v3.9)
   ═══════════════════════════════════════════════════════════════════ */

.mcd-resources-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 8px 0 32px;
}

/* ── Section Header (shared across all sections) ────────────────── */
.mcd-section-header {
    margin-bottom: 24px;
    text-align: center;
}
.mcd-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.3;
}
.mcd-section-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── SECTION 1: Featured Resource Hero ──────────────────────────── */
.mcd-resources-featured {
    width: 100%;
}

.mcd-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ffba00 0%, #eeae00 100%);
    color: #ffffff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}
.mcd-featured-badge .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.mcd-featured-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 28px;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.mcd-featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2081CC 0%, #1762A3 100%);
}

.mcd-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(23, 98, 163, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.mcd-featured-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #E8F1F8 0%, #D4E4F2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcd-featured-icon .dashicons {
    font-size: 36px !important;
    width: 36px !important;
    height: 36px !important;
    color: #1762A3;
}

.mcd-featured-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    line-height: 1.3;
}

.mcd-featured-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 24px;
}

.mcd-featured-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── SECTION 2: Resource Library Grid ──────────────────────────── */
.mcd-resources-library {
    width: 100%;
}

.mcd-resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mcd-resource-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.mcd-resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(23, 98, 163, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-color: #bfdbfe;
}

.mcd-resource-card-icon {
    width: 48px;
    height: 48px;
    background: #E8F1F8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcd-resource-card-icon .dashicons {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: #1762A3;
}

.mcd-resource-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

.mcd-resource-card-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* ── SECTION 3: Service Promotion Cards ────────────────────────── */
.mcd-resources-services {
    width: 100%;
}

.mcd-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.mcd-service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}
.mcd-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2081CC 0%, #1762A3 100%);
}
.mcd-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(23, 98, 163, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-color: #bfdbfe;
}

.mcd-service-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #E8F1F8 0%, #D4E4F2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcd-service-card-icon .dashicons {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    color: #1762A3;
}

.mcd-service-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.mcd-service-card-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* ── SECTION 4: Quick Links Bar ────────────────────────────────── */
.mcd-resources-quick-links {
    width: 100%;
}

.mcd-quick-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mcd-quick-link-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.mcd-quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(23, 98, 163, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-color: #1762A3;
}
.mcd-quick-link-card.mcd-book-now-btn {
    cursor: pointer;
}

.mcd-quick-link-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1762A3 0%, #0F4D7A 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcd-quick-link-icon .dashicons {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    color: #ffffff;
}

.mcd-quick-link-text {
    flex: 1;
    min-width: 0;
}

.mcd-quick-link-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 2px;
}

.mcd-quick-link-sub {
    display: block;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.mcd-quick-link-arrow {
    color: #94a3b8;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.mcd-quick-link-card:hover .mcd-quick-link-arrow {
    transform: translateX(3px);
    color: #1762A3;
}

/* ── Shared Button Styles (reuse existing where possible) ──────── */
.mcd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}
.mcd-btn .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

.mcd-btn-primary {
    background: linear-gradient(135deg, #2081CC 0%, #1762A3 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(23, 98, 163, 0.25);
}
.mcd-btn-primary:hover {
    background: linear-gradient(135deg, #2a8fd4 0%, #1e7bc4 100%);
    box-shadow: 0 6px 20px rgba(23, 98, 163, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
}

.mcd-btn-outline {
    background: #ffffff;
    color: #1762A3;
    border: 1px solid #1762A3;
}
.mcd-btn-outline:hover {
    background: #F0F7FC;
    transform: translateY(-1px);
    color: #1762A3;
}

.mcd-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}
.mcd-btn-sm .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Empty state for resource library */
.mcd-resources-empty {
    text-align: center;
    padding: 48px 24px;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
}
.mcd-resources-empty .dashicons {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    color: #cbd5e1;
    margin-bottom: 16px;
}
.mcd-resources-empty h3 {
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px;
}
.mcd-resources-empty p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESOURCES & GUIDES — SVG Icon Colors (v3.9.2)
   Fixes black icons that should be brand color or white.
   ═══════════════════════════════════════════════════════════════════ */

/* ── SVG alignment (general) ────────────────────────────────────── */
.mcd-resources-page .mcd-btn svg,
.mcd-resources-page .mcd-featured-badge svg {
    flex-shrink: 0;
    vertical-align: middle;
}

.mcd-resources-page .mcd-featured-icon svg,
.mcd-resources-page .mcd-resource-card-icon svg,
.mcd-resources-page .mcd-quick-link-icon svg {
    display: block;
}

.mcd-resources-page .mcd-quick-link-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.mcd-resources-page .mcd-quick-link-card:hover .mcd-quick-link-arrow {
    transform: translateX(3px);
}


/* ────────────────────────────────────────────────────────────────
   ICON COLORS — FIX BLACK ICONS
   ──────────────────────────────────────────────────────────────── */

/* ── Featured Hero Icon → BRAND BLUE ──────────────────────────── */
.mcd-resources-page .mcd-featured-icon {
    color: #1762A3;
}
.mcd-resources-page .mcd-featured-icon svg {
    color: #1762A3;
    stroke: #1762A3;
}

/* ── Featured Badge "Featured Resource" → WHITE (on blue bg) ──── */
.mcd-resources-page .mcd-featured-badge {
    color: #ffffff;
}
.mcd-resources-page .mcd-featured-badge svg {
    color: #ffffff;
    fill: #ffffff;
}

/* ── Library PDF Card Icons → BRAND BLUE ──────────────────────── */
.mcd-resources-page .mcd-resource-card-icon {
    color: #1762A3;
}
.mcd-resources-page .mcd-resource-card-icon svg {
    color: #1762A3;
    stroke: #1762A3;
}

/* ── View Button Icon (outline button) → BRAND BLUE ───────────── */
.mcd-resources-page .mcd-btn-outline svg {
    color: #1762A3;
    stroke: #1762A3;
}
.mcd-resources-page .mcd-btn-outline:hover svg {
    color: #0F4D7A;
    stroke: #0F4D7A;
}

/* ── Primary Button Icons → WHITE ─────────────────────────────── */
.mcd-resources-page .mcd-btn-primary svg {
    color: #ffffff;
    stroke: #ffffff;
}

/* ── Quick Links Bottom Bar Icons → WHITE (on blue circle bg) ── */
.mcd-resources-page .mcd-quick-link-icon {
    color: #ffffff;
}
.mcd-resources-page .mcd-quick-link-icon svg {
    color: #ffffff;
    stroke: #ffffff;
}

/* ── Quick Link Arrow → SOFT GREY, hover BRAND BLUE ───────────── */
.mcd-resources-page .mcd-quick-link-arrow {
    color: #94a3b8;
    stroke: #94a3b8;
}
.mcd-resources-page .mcd-quick-link-card:hover .mcd-quick-link-arrow {
    color: #1762A3;
    stroke: #1762A3;
}

/* ── Empty State Icon → SOFT GREY ─────────────────────────────── */
.mcd-resources-page .mcd-resources-empty svg {
    color: #cbd5e1;
    stroke: #cbd5e1;
}

/* Force flex centering regardless of inline styles */
.mcd-video-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

/* When hidden attribute is present OR display:none set, override */
.mcd-video-modal[hidden] {
    display: none !important;
}

/* When modal is visible (no hidden attribute), force flex */
.mcd-video-modal:not([hidden]) {
    display: flex !important;
}



/* Hide global Amelia popup trigger off-screen (required for popup to work) */
.mcd-amelia-popup-trigger {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}