/**

 * McCarthy Manifesting Dashboard — Main Stylesheet

 * Version: 3.9.0

 */



/* =================

   Design Tokens — McCarthy Brand Color System v3.9


   ========================================== */

: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;




    --mcd-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}


/* ================================================================
   HEADER COMPATIBILITY FIX - Prevent breaking site header
   ================================================================ */
.mcd-app {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force theme header to stay normal */
body.woocommerce-account .mcd-app {
    max-width: 100% !important;
    margin: 0 auto;
}

/* Hide default WooCommerce My Account navigation */
.woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Make sure main content doesn't overlap header */
.mcd-main {
    padding-top: 30px !important;
}


/* ==========================================================================

   Base Layout

   ========================================================================== */

body.mccarthy-dashboard-active {

    background: var(--mcd-color-bg);

    font-family: var(--mcd-font);

    color: var(--mcd-color-text);

}

body, input, textarea, select, .mccarthy-dashboard-active h1, .mccarthy-dashboard-active p, .mccarthy-dashboard-active h2, .mccarthy-dashboard-active h3 {
    font-family: 'Titillium Web',Helvetica,Arial,Lucida,sans-serif !important;
}
.mccarthy-dashboard-active .et_pb_with_border.et_pb_section.et_pb_section_2_tb_body.et_pb_with_background.et_section_regular.section_has_divider.et_pb_bottom_divider.et_pb_top_divider, .mccarthy-dashboard-active .logo_container {
    display:  none !important;
}
.mccarthy-dashboard-active .et_builder_inner_content.et_pb_gutters3 .et_pb_section.et_pb_section_0_tb_body.et_section_regular {
    padding-bottom: 0;
}
.mccarthy-dashboard-active .et-l.et-l--body .et_pb_section {
    background-color: #f9fafb;
}
.mccarthy-dashboard-active .et-l.et-l--body .et_pb_section {
    background-color: #f9fafb;
    padding: 80px 32px;
}
body.mccarthy-dashboard-active main.mcd-main {
    padding-right: 0 !important;
}
.mcd-sidebar-help a, section.mcd-widget a, .mcd-footer-content .mcd-footer-contact a, .mcd-featured-content .mcd-featured-actions a, .mcd-resource-card-actions a, section.mcd-resources-quick-links a {
    text-decoration: none !important;
}
.mcd-featured-content .mcd-featured-actions a.mcd-btn.mcd-btn-outline:hover {
    background: #1563a3;
    color: #ffffff !important;
    transform: translateY(-1px);
    border-color: transparent;
}
.mcd-resource-card-actions a.mcd-btn.mcd-btn-sm.mcd-btn-outline:hover{
    background-color: #1762A3;
}
.mcd-featured-content .mcd-featured-actions a.mcd-btn.mcd-btn-outline:hover svg, .mcd-resource-card-actions a.mcd-btn.mcd-btn-sm.mcd-btn-outline:hover svg {
    color: #fff;
    stroke: #fff;
}
nav.mcd-sidebar-nav li {
    line-height: 1.5 !important;
}
.woocommerce-account .et_pb_post_content_0_tb_body {
    width: 100%;
    max-width: 100%;
}
.mccarthy-dashboard-active .woocommerce-account .woocommerce {

    max-width: 100%;

    padding: 0;

    margin: 0;

}
.mcd-dashboard section.mcd-banner {
    padding-bottom: 0;
}
nav.mcd-sidebar-nav ul {
    padding-left: 0;
}
nav.mcd-sidebar-nav ul li.mcd-nav-item {
    list-style: none;
}

/* 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);

}

.mccarthy-dashboard-active .et_pb_row.et_pb_row_0_tb_body {
    max-width: 1600px;
    width: 100%;
}
.woocommerce-page.mccarthy-dashboard-active .mcd-submit-wrap input#mc-embedded-subscribe:hover {
    background-color: #cf9a0e !important;
    color: #fff !important;
}

.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;
    padding: 20px;

}

.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: 16px;

    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;

}




/* ── 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;

}



/* ── 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;

}





/* ── 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) {
    
    .mccarthy-dashboard-active .et-l.et-l--body .et_pb_section {
        padding: 10px 20px 20px;
    }

    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;

    }

    section.mcd-widget.mcd-coach-widget .mcd-coach-content {
    align-items: center !important;
    }
    .mcd-newsletter-content .mcd-newsletter-fields {
        flex-direction: row;
    }

    body.mccarthy-dashboard-active .mcd-main {

        padding: 0px !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 !important;

}

.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;

}