/* =========================================================================
   JOYRIDE GLASSMORPHISM & PREMIUM DESIGN SYSTEM FOR ELEMENTOR
   ========================================================================= */

:root {
    --joy-font: 'Plus Jakarta Sans', sans-serif;
    
    /* Primary Colors */
    --joy-primary: #1a2b4a;      /* Dark navy / Headlines */
    --joy-accent: #40BEDC;       /* Light teal */
    --joy-accent-dark: #2980b9;  /* Darker teal for gradients */
    
    /* Neutral & Backgrounds */
    --joy-bg-main: #f5f7fa;      /* Main page background */
    --joy-surface: #ffffff;      /* Solid white cards */
    --joy-gray-text: #8a95a5;    /* Subtext and labels */
    --joy-border: #dde1e6;       /* Soft borders */
    
    /* Radii & Shadows */
    --joy-radius: 14px;          /* Standard card radius */
    --joy-radius-lg: 20px;       /* Large hero elements */
    --joy-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --joy-shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --joy-shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
    --joy-shadow-color: 0 6px 20px rgba(41,128,185,0.3); /* Button shadows */
}

/* -----------------------------------------
   1. TYPOGRAPHY
----------------------------------------- */
/* Apply to Elementor Heading Widgets */
.joy-heading-primary {
    font-family: var(--joy-font) !important;
    color: var(--joy-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Apply to Text Editors for sub-text */
.joy-text-lead {
    font-family: var(--joy-font) !important;
    color: var(--joy-gray-text) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

/* Apply to small labels above titles */
.joy-label-caps {
    font-family: var(--joy-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--joy-gray-text) !important;
}

/* -----------------------------------------
   2. GLASSMORPHISM PANELS (For Hero & Layouts)
----------------------------------------- */
/* Light Frost: Best for Overlays on top of dark images (Hero sections) */
.joy-glass-light {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--joy-radius-lg) !important;
    color: white !important;
}

/* Frosty White: Best for overlapping sections (like Action cards matrix) */
.joy-glass-white {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--joy-radius-lg) !important;
    box-shadow: var(--joy-shadow-lg) !important;
    color: var(--joy-primary) !important;
}

/* -----------------------------------------
   3. SOLID PREMIUM CARDS (For grids, features, "Our Fleet")
----------------------------------------- */
.joy-premium-card {
    background: var(--joy-surface) !important;
    border-radius: var(--joy-radius) !important;
    box-shadow: var(--joy-shadow-md) !important;
    padding: 24px !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.joy-premium-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--joy-shadow-lg) !important;
}

/* -----------------------------------------
   4. BUTTONS & CONTROLS
----------------------------------------- */
/* Apply to Elementor Button Widgets */
.joy-btn-gradient .elementor-button, button.joy-btn-gradient {
    background: linear-gradient(135deg, var(--joy-accent), var(--joy-accent-dark)) !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 14px 28px !important;
    font-family: var(--joy-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    box-shadow: var(--joy-shadow-color) !important;
    transition: all 0.25s ease !important;
}

.joy-btn-gradient .elementor-button:hover, button.joy-btn-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(41,128,185,0.4) !important;
    color: white !important;
}

/* White / Ghost Button */
.joy-btn-outline .elementor-button, button.joy-btn-outline {
    background: transparent !important;
    color: var(--joy-primary) !important;
    border: 2px solid var(--joy-border) !important;
    border-radius: 25px !important;
    padding: 12px 26px !important;
    font-family: var(--joy-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
}

.joy-btn-outline .elementor-button:hover, button.joy-btn-outline:hover {
    border-color: var(--joy-accent) !important;
    color: var(--joy-accent) !important;
    background: rgba(64, 190, 220, 0.05) !important;
}

/* -----------------------------------------
   5. BADGES & PILLS
----------------------------------------- */
/* Teal badge - Great for pricing, discounts, alerts */
.joy-badge-accent {
    background: rgba(64, 190, 220, 0.15) !important;
    color: var(--joy-accent-dark) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: var(--joy-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    display: inline-block;
}

/* Glass Badge - Great over images */
.joy-badge-glass {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(8px) !important;
    color: white !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: var(--joy-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-block;
}