/*
 * Workout Planner – Final Fixes
 *
 * These styles apply minor enhancements to the existing workout planner without
 * altering its layout. They ensure that buttons respect the global colour
 * palette defined in Elementor, add visual feedback for current exercises
 * (including supersets), hide utility elements, and style the persistent
 * timer block. All colours derive from Elementor CSS variables such as
 * --e-global-color-secondary, --e-global-color-primary and --e-global-color-text-2.
 */

/* Ensure "Find My Plan" buttons inherit global colours. We target both
   Elementor button widgets and plain HTML buttons inside the .find-my-plan
   container. */
.garthux-planner .find-my-plan .elementor-button,
.garthux-planner .find-my-plan button {
    color: var(--e-global-color-text-2);
    background-color: var(--e-global-color-secondary);
    border-color: transparent;
}
.garthux-planner .find-my-plan .elementor-button:hover,
.garthux-planner .find-my-plan button:hover {
    color: var(--e-global-color-text-2);
    background-color: var(--e-global-color-primary);
}

/* Highlight the current exercise or superset. The outline uses the
   Secondary colour so that it matches the site’s accent. */
.garthux-planner .is-current,
.garthux-planner .is-current-superset {
    outline: 2px solid var(--e-global-color-secondary);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Utility class used to toggle visibility via JavaScript. */
.garthux-planner .is-hidden {
    display: none !important;
}

/* Styling for the persistent rest timer. It lives outside individual
   exercise cards but visually remains associated with the current selection. */
.garthux-planner #gx-timer {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--e-global-color-secondary);
    border-radius: 10px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-text-2);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.garthux-planner #gx-timer .time {
    font-weight: 700;
    letter-spacing: .03em;
}
.garthux-planner #gx-timer .gx-btn {
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-text-2);
    border: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    cursor: pointer;
}
.garthux-planner #gx-timer .gx-btn:hover {
    background: var(--e-global-color-primary);
}