/* ================================================= */
/* B. Dashboard Metric Cards (4-Column Grid) */
/* Modified for V0 Compact Look (Thinner, Smaller Font) */
/* ================================================= */

/* 1. Container for the 4-column layout defined by PHP */
.body{
    font-family: Lato !important;
}
.v2-dashboard-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    align-items: center;
    text-align: center;
    padding: 0px 10% 0px 10%;
}

/* 2. Styling for Individual Metric Cards (V0 Style) */
.metric-card {
    background-color: #ffffff;
    padding: 25px 10px; /* Reduced padding for smaller height */
    border-radius: 8px; /* Slightly more subtle radius */
    text-align: center;
    /* Subtle box shadow to match V0's cleaner look */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    /* Lighter, subtle border */
    border: 1px solid #eee;
    transition: 0.3s ease;
}

/* 3. Metric Value (The '0' or number) - Significantly Smaller Font */
.metric-value {
    font-size: 1.8em; /* Reduced from 3.0em to 1.8em */
    font-weight: 700;
    color: #000; /* Darker number */
    line-height: 1.2;
    margin-bottom: 5px;
}

/* 4. Metric Label (e.g., 'Courses Enrolled') - Smaller and Lighter Text */
.metric-label {
    font-size: 0.75em; /* Reduced from 0.9em for compactness */
    color: #777; /* Lighter color for label text */
    text-transform: capitalize; /* Changed from uppercase to capitalize to match v0 image */
    font-weight: 500; /* Slightly less bold */
    line-height: 1.2;
}

/* 5. Icon Styling (Orange) - Smaller Icon */
.metric-icon i, .metric-icon svg {
    color: #e68a00; /* V2 Orange */
    font-size: 16px; /* Reduced from 2.0em */
    margin-bottom: 8px; /* Reduced margin */
}
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border: 1px solid #e68a00; 
  }


@media (max-width: 576px) {
.v2-dashboard-metrics-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* ================================================= */
/* C. Custom CTA Button Styling (No Change Requested) */
/* ================================================= */

.physical-card-cta-container {
    text-align: center;
    margin-top: 40px;
}

.physical-card-cta-button {
    display: inline-block;
    background-color: #e68a00 !important; /* V2 Orange (Non-Hover State) */
    color: #ffffff;
    padding: 5px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    border: 1px solid #e68a00 !important;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Hover State Revision to Match Image 1 (Light Tan/Orange Border) */
.physical-card-cta-button:hover {
    background-color: #d6820c !important;
    /* Added a subtle pressed effect */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); 
    border-color: #e68a00; /* Ensure border stays consistent */
    color: #ffffff !important;
}

/* Link State Fix: Ensure text color is black on click, focus, and visited states */
.physical-card-cta-button:active,
.physical-card-cta-button:focus,
.physical-card-cta-button:visited {
    /* When the element is being clicked, or focused, or has been visited, 
       we force the color to black to prevent it from disappearing. */
    color: #ffffff !important;
}

/* Active State (On Click) - Refined to use the light hover background */
.physical-card-cta-button:active {
    /* Use the same light background as hover state when pressed */
    background-color: #d6820c; 
    /* Added a subtle pressed effect */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); 
    border-color: #e68a00; /* Ensure border stays consistent */
    color: #ffffff !important;
}

.physical-card-cta-caption {
    font-size: 1.5rem !important;
    color: #333 !important;
    margin-top: 10px;
    font-weight: 400 !important;
    width: 600px;
    text-align: center;
    margin: 10px auto 0;
    line-height: 2rem !important;
}

/* ================================================= */
/* D. Dashboard Greeting and Descriptive Text Styling (No Change Requested) */
/* ================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
    width: 78% !important;
}
/* Ensure the main Welcome heading is large and bold (Image 2) */
/* Targeting h1, h2, or the specific element your theme uses for the greeting */
/* .woocommerce-MyAccount-content h1,
.woocommerce-MyAccount-content h2, */
.woocommerce-MyAccount-content .wdm-myaccount-welcome-text {
    font-weight: 700 !important;
    color: #000 !important;
    font-size: 2.5em !important;
    margin-bottom: 10px;
    display: block;
    line-height: 1.2;
    padding-top: 30px !important;
}

/* Style the descriptive paragraph text */
/* Paragraph styling */
.woocommerce .woocommerce-MyAccount-content p {
    color: #4a5565 !;
    font-weight: 400; /* normal text */
    font-size: 16px;
    font-family: 'Lato';
    text-decoration: none;
}

/* Link styling inside the paragraph */
.woocommerce .woocommerce-MyAccount-content p a {
    color: #000 !important;         /* black */
    font-weight: 700 !important;    /* bold links */
    text-decoration: none !important;
}


/* Training Course Section CSS */

/* ---------------------------------- */
/* 1. Global Reset and Font Loading   */
/* ---------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

/* Apply font and background to the page body */
body {
    font-family: 'Lato', sans-serif;
    background-color: #f7f9fc; /* Light blue-grey background */
    margin: 0;
    padding: 0;
}

/* ---------------------------------- */
/* 2. Container and Title             */
/* ---------------------------------- */

.card-section-container {
    max-width: 1280px; /* Equivalent to max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; /* Equivalent to p-4 */
}

.section-title {
    font-size: 2.25rem; /* Equivalent to text-3xl/sm:text-4xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #000; /* Dark title color */
    text-align: left;
    margin-bottom: 2.5rem; /* Equivalent to mb-10 */
    margin-top: 1.5rem; /* Equivalent to mt-6 */
}
/* ---------------------------------- */
/* 3. Grid Layout (Responsive)        */
/* ---------------------------------- */

.cards-grid {
    display: grid;
    /* Default: 1 column for mobile (grid-cols-1) */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Equivalent to gap-6 (24px) */
}

/* Medium devices (md: ~768px and up) */
@media (min-width: 640px) {
    .card-section-container {
        padding: 0rem; /* Equivalent to sm:p-8 */
    }
    .cards-grid {
        gap: 1.5rem; /* Equivalent to sm:gap-8 (32px) */
    }
}

/* Large devices (lg: ~1024px and up) */
@media (min-width: 1024px) {
    .card-section-container {
        padding: 0rem; /* Equivalent to lg:p-12 */
    }
    .cards-grid {
        /* 3 columns for desktop (lg:grid-cols-3) */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------------------------------- */
/* 4. Individual Card Styling         */
/* ---------------------------------- */

.training-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    border: 1px solid #ebe6e7;
}
/* Standard hover effects (only shadow kept, highlight effect applied below) */
.training-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
    background: #d6820c !important;
    color: #fff;
}

/* ---------------------------------- */
/* 5. Card Content and Typography     */
/* ---------------------------------- */

.card-content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Equivalent to h-full flex flex-col justify-between */
}

.card-title {
    font-size: 1.25rem !important; /* Equivalent to text-xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #1f2937;
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
    transition: color 0.3s ease-in-out; /* Added color transition */
}

.card-description {
    font-size: 18px;
    color: #4a5565 !important;
    margin-top: 0;
    margin-bottom: 0;
    transition: color 0.3s ease-in-out;
    font-weight: 500 !important;
    line-height: 24px !important;
    font-family: 'Lato';
    padding-top: 10px;
}

.text-bold-secondary {
    font-weight: 600; /* Equivalent to font-semibold */
    color: #374151; /* Equivalent to text-gray-800 */
}

/* ---------------------------------- */
/* 6. Read More Link Styling          */
/* ---------------------------------- */

.card-link {
    /* display: flex;
    align-items: center;
    margin-top: 1rem; /* Equivalent to mt-4 */
    /* color: #1d4ed8; Equivalent to text-[#1d4ed8] (a blue color) */
    /* font-weight: 500; Equivalent to font-medium */
    /* text-decoration: none;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; Added background transition */ 
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #d6820c;
    padding: 6px 10px;
    border-radius: 10px;
    margin-top: 10px;
    color: #d6820c;
    font-weight: 500;
    transition: none !important;
}

.card-link:hover {
    display: block;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid #d6820c;
    padding: 6px 10px;
    border-radius: 10px;
    margin-top: 10px;
    color: #d6820c;
    font-weight: 500;
    transition: none !important;
}

.link-arrow {
    margin-left: 0.25rem; /* Equivalent to ml-1 */
    transition: transform 0.3s ease-in-out; /* Equivalent to transition-transform */
}

/* ---------------------------------- */
/* 7. Highlighted Card (Static - BAS P BAS U) */
/* ---------------------------------- */

/* This section defines the default style for the permanently highlighted card */
.card-highlight {
    background-color: #e5a760; /* The orange/yellow highlight color */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
}

.card-highlight .card-title {
    color: #ffffff; /* White title in the highlighted card */
}


/* ---------------------------------- */
/* 7.5. Dynamic Hover Highlight (Non-Highlighted Cards) */
/* ---------------------------------- */

/* Apply highlight background/shadow to any card that is NOT permanently highlighted when hovered */
.training-card:not(.card-highlight):hover {
    background-color: #e5a760; /* Highlight color on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
}

/* Change title/description text color to white on hover */
.training-card:not(.card-highlight):hover .card-title,
.training-card:not(.card-highlight):hover .card-description {
    color: #ffffff !important; 
}

/* Change the nested bold text to white on hover */
.training-card:not(.card-highlight):hover .text-bold-secondary {
    color: #ffffff !important; 
}

/* Make the Read More link look like a button on hover */
.training-card:not(.card-highlight):hover .card-link {
    background-color: #ffffff;
    color: #000;   
}

.training-card:not(.card-highlight):hover .card-link:hover {
    background-color: #f3f4f6;
    color: #000;
}

/* Ensure the arrow is dark and still moves on link hover inside the card hover */
.training-card:not(.card-highlight):hover .card-link .link-arrow {
    color: #000;
}


/* ---------------------------------- */
/* 8. Custom Button Styling           */
/* ---------------------------------- */

.edit-button {
    /* Color matching the image */
    background-color: #e58c00; 
    color: #ffffff;
    /* Text styling */
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    /* Spacing and shape */
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem; /* Large rounded corners */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.edit-button:hover {
    background-color: #cc7d00; /* Slightly darker on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Wrapper: title left, button right */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Title */
.section-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

/* Button normal state */
.section-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid #f0ad4e !important;
    color: #f0ad4e !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* SVG inherits text color */
.section-view-all .arrow-icon {
    transition: all 0.3s ease;
}

/* Hover State */
.section-view-all:hover {
    background-color: #f0ad4e !important;
    color: #fff !important;
}

.section-view-all:hover .arrow-icon {
    color: #fff !important;
}


.edit-button:active {
    background-color: #b36c00; /* Even darker on click */
    box-shadow: none;
}


    .physical-card-cta-caption {
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: 400 !important;
        width: 100% !important;
        line-height: 1.5rem !important;
    }

    .elementor-40310 .elementor-element.elementor-element-e19b1cf {
        margin-top: 0px;
        margin-bottom: 0px;
        /* padding removed for mobile */
        padding: 0 !important;
    }

    .section-title {
        font-size: 18px;
        font-weight: 700;
        margin: 0;
    }
    
    .metric-value {
        font-size: 1.2em;
    }
    .card-title {
        font-size: 1rem !important;
    }
    .woocommerce .woocommerce-MyAccount-content p {

        font-size: 14px;
    
    }
    .training-card {
        background-color: #ffffff;
        padding: 1rem;
    }
    .entry-content .wp-audio-shortcode, .entry-content .wp-embedded-audio, .entry-content .wp-embedded-video, .entry-content .wp-video, .entry-content p {
        margin-bottom: 0.5em;
    }


    /*mobile */
    @media (max-width: 768px) {
    
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        display: flex;
        text-align: center !important;
    }

    .physical-card-cta-caption {
        font-size: 1rem !important;
        color: #333 !important;
        font-weight: 400 !important;
        width: 100% !important;
        line-height: 1.5rem !important;
    }

    .elementor-40310 .elementor-element.elementor-element-e19b1cf {
        margin-top: 0px;
        margin-bottom: 0px;
        /* padding removed for mobile */
        padding: 0 !important;
    }

    .woocommerce-MyAccount-content .wdm-myaccount-welcome-text {
        font-weight: 700 !important;
        color: #000 !important;
        font-size: 1.2em !important;
        padding-top: 20px !important; /* Adjusted for mobile */
    }
    .v2-dashboard-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        margin:15px 0px;
    }
    .physical-card-cta-button {
        font-size: 0.8em !important;
    }
    .section-view-all {
        gap: 4px;
        padding: 4px 6px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 18px;
    }
    .section-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .metric-card {
        padding: 8px 15px;   
    }
    .metric-value {
        font-size: 1.2em;
    }
    .card-title {
        font-size: 1rem !important;
    }
    .woocommerce .woocommerce-MyAccount-content p {

        font-size: 14px;
    
    }
    .training-card {
        background-color: #ffffff;
        padding: 1rem;
    }
    .entry-content .wp-audio-shortcode, .entry-content .wp-embedded-audio, .entry-content .wp-embedded-video, .entry-content .wp-video, .entry-content p {
        margin-bottom: 0.5em;
    }
}