/* ===================================================================
   DYNAMIC THEME VARIABLES
   This file defines CSS custom properties that are dynamically
   controlled from the admin panel. These variables are injected
   into the page via inline styles in _LayoutGym.cshtml
   =================================================================== */

/* Theme colors will be injected dynamically via :root in layout */

/* Usage patterns for theme colors */
.theme-color-primary {
    color: var(--theme-primary) !important;
}

.theme-bg-primary {
    background-color: var(--theme-primary) !important;
}

.theme-border-primary {
    border-color: var(--theme-primary) !important;
}

/* Gradient variations */
.theme-gradient-primary {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary-dark)) !important;
}

/* Button hover effects with theme color */
.btn-theme-outline {
    border: 2px solid var(--theme-primary);
    color: var(--theme-primary);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-theme-outline:hover {
    background: var(--theme-primary);
    color: #ffffff;
}

/* Map old color variables to theme colors for centralized management (Injected via Layout) */

/* EMS Advantages Section Styles */
.advantage-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.advantage-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(var(--theme-primary-rgb), 0.5) !important;
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
}

/* Link hover effects */
a.theme-link:hover {
    color: var(--theme-primary) !important;
}

/* Sidebar section underlines */
.sidebar-title-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: var(--theme-primary);
}

/* Overlay for slider/hero sections */
.hero-overlay {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.hero-overlay::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgb(var(--slider-overlay-rgb, var(--theme-primary-rgb))) !important;
    mix-blend-mode: multiply !important;
    opacity: var(--theme-overlay-opacity) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.hero-overlay>* {
    position: relative !important;
    z-index: 3 !important;
}

/* Overlay for general banners */
.banner-overlay {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.banner-overlay::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
    opacity: var(--banner-overlay-opacity, 0.5) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.banner-overlay>* {
    position: relative !important;
    z-index: 3 !important;
}