/*
 * J&G Group — Creative Career Section (Elementor-compatible)
 * Premium design with glassmorphism, gradients, hover effects, and responsive design.
 * Works with Elementor containers + custom CSS classes.
 * Author: Antigravity
 */

/* ═══════════════════════════════════════════════════════════════
   CAREER SECTION — ELEMENTOR CONTAINER OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Animated gradient mesh overlay on career section */
.jg-career-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(205, 213, 90, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(42, 90, 140, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(205, 213, 90, 0.05) 0%, transparent 50%);
    animation: jgCareerMeshMove 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes jgCareerMeshMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, -1%) rotate(1deg); }
    50% { transform: translate(-1%, 2%) rotate(-0.5deg); }
    75% { transform: translate(1%, 1%) rotate(0.5deg); }
}

/* Ensure inner content is above the animated overlay */
.jg-career-section > .e-con-inner,
.jg-career-section > .elementor-element {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   CARD HOVER EFFECTS
   ═══════════════════════════════════════════════════════════════ */

.jg-career-card {
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Shimmer highlight on hover */
.jg-career-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

.jg-career-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(205, 213, 90, 0.06) !important;
}

.jg-career-card--coop:hover {
    border-color: rgba(205, 213, 90, 0.3) !important;
}

.jg-career-card--standard:hover {
    border-color: rgba(99, 179, 237, 0.3) !important;
}

.jg-career-card:hover::before {
    opacity: 1;
}

/* Accent line at top of card */
.jg-career-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    z-index: 1;
}

.jg-career-card--coop::after {
    background: linear-gradient(90deg, #CDD55A 0%, rgba(205, 213, 90, 0.3) 100%);
}

.jg-career-card--standard::after {
    background: linear-gradient(90deg, #63B3ED 0%, rgba(99, 179, 237, 0.3) 100%);
}

.jg-career-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Keep all card children above the pseudo-elements */
.jg-career-card > .e-con-inner,
.jg-career-card > .elementor-element,
.jg-career-card .elementor-widget {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.jg-career-card .elementor-button {
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.jg-career-card--coop .elementor-button {
    box-shadow: 0 4px 15px rgba(205, 213, 90, 0.25);
}

.jg-career-card--coop .elementor-button:hover {
    box-shadow: 0 8px 25px rgba(205, 213, 90, 0.35) !important;
}

.jg-career-card--standard .elementor-button:hover {
    box-shadow: 0 8px 25px rgba(99, 179, 237, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORM PAGE HERO — ANIMATED BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

.jg-form-hero {
    position: relative;
}

.jg-form-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(205, 213, 90, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(42, 90, 140, 0.08) 0%, transparent 50%);
    animation: jgCareerMeshMove 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.jg-form-hero > .e-con-inner,
.jg-form-hero > .elementor-element {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   FORM BODY — OVERLAP WITH NEGATIVE MARGIN
   ═══════════════════════════════════════════════════════════════ */

.jg-form-body {
    position: relative;
    z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — EXTRA FINE-TUNING BEYOND ELEMENTOR BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .jg-career-section {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .jg-career-card {
        padding: 36px 28px 32px !important;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .jg-career-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .jg-career-card {
        padding: 32px 22px 28px !important;
    }

    .jg-career-card::after {
        left: 22px;
        right: 22px;
    }

    .jg-form-hero {
        padding-top: 30px !important;
        padding-bottom: 28px !important;
    }

    .jg-form-body {
        margin-top: -20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .jg-career-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .jg-career-card {
        padding: 26px 18px 24px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RTL SUPPORT — ARABIC PAGES
   ═══════════════════════════════════════════════════════════════ */

/* Flip accent line origin for RTL */
[dir="rtl"] .jg-career-card::after,
html[lang="ar"] .jg-career-card::after {
    transform-origin: right;
}

/* RTL text alignment for card content */
[dir="rtl"] .jg-career-card .elementor-widget-heading .elementor-heading-title,
html[lang="ar"] .jg-career-card .elementor-widget-heading .elementor-heading-title {
    text-align: right;
}

[dir="rtl"] .jg-career-card .elementor-widget-text-editor,
html[lang="ar"] .jg-career-card .elementor-widget-text-editor {
    text-align: right;
}

/* RTL button alignment */
[dir="rtl"] .jg-career-card .elementor-widget-button .elementor-button-wrapper,
html[lang="ar"] .jg-career-card .elementor-widget-button .elementor-button-wrapper {
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   RTL GRAVITY FORMS — ARABIC STYLING
   ═══════════════════════════════════════════════════════════════ */

/* Global RTL form direction */
.gf-rtl-form,
[dir="rtl"] .gform_wrapper,
html[lang="ar"] .gform_wrapper {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .gform_wrapper .gfield_label,
html[lang="ar"] .gform_wrapper .gfield_label {
    text-align: right;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .gform_wrapper input[type="text"],
[dir="rtl"] .gform_wrapper input[type="email"],
[dir="rtl"] .gform_wrapper input[type="tel"],
[dir="rtl"] .gform_wrapper input[type="number"],
[dir="rtl"] .gform_wrapper input[type="url"],
[dir="rtl"] .gform_wrapper textarea,
[dir="rtl"] .gform_wrapper select,
html[lang="ar"] .gform_wrapper input[type="text"],
html[lang="ar"] .gform_wrapper input[type="email"],
html[lang="ar"] .gform_wrapper input[type="tel"],
html[lang="ar"] .gform_wrapper input[type="number"],
html[lang="ar"] .gform_wrapper input[type="url"],
html[lang="ar"] .gform_wrapper textarea,
html[lang="ar"] .gform_wrapper select {
    direction: rtl;
    text-align: right;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* RTL section heading decorative line */
[dir="rtl"] .gform_wrapper .gsection .gsection_title,
html[lang="ar"] .gform_wrapper .gsection .gsection_title {
    text-align: right;
    padding-right: 16px;
    padding-left: 0;
    border-right: 3px solid #CDD55A;
    border-left: none;
}

/* RTL description alignment */
[dir="rtl"] .gform_wrapper .gfield_description,
html[lang="ar"] .gform_wrapper .gfield_description {
    text-align: right;
}

/* RTL submit button */
[dir="rtl"] .gform_wrapper .gform_footer,
html[lang="ar"] .gform_wrapper .gform_footer {
    text-align: right;
}

[dir="rtl"] .gform_wrapper .gform_footer input[type="submit"],
html[lang="ar"] .gform_wrapper .gform_footer input[type="submit"] {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* RTL checkbox/radio alignment */
[dir="rtl"] .gform_wrapper .gfield_checkbox label,
[dir="rtl"] .gform_wrapper .gfield_radio label,
html[lang="ar"] .gform_wrapper .gfield_checkbox label,
html[lang="ar"] .gform_wrapper .gfield_radio label {
    margin-right: 8px;
    margin-left: 0;
}

/* RTL file upload */
[dir="rtl"] .gform_wrapper .gform_fileupload_rules,
html[lang="ar"] .gform_wrapper .gform_fileupload_rules {
    text-align: right;
}

/* RTL validation message */
[dir="rtl"] .gform_wrapper .validation_message,
html[lang="ar"] .gform_wrapper .validation_message {
    text-align: right;
}

/* RTL half-width fields — flip positions */
[dir="rtl"] .gform_wrapper .gf_left_half,
html[lang="ar"] .gform_wrapper .gf_left_half {
    float: right;
    padding-left: 16px;
    padding-right: 0;
}

[dir="rtl"] .gform_wrapper .gf_right_half,
html[lang="ar"] .gform_wrapper .gf_right_half {
    float: left;
    padding-right: 16px;
    padding-left: 0;
}