/* Join the Team Page Styles */

/* Hero Section */
#jtt-hero {
    background-color: #13001A;
}

#jtt-hero-container {
    position: relative;
}

#jtt-hero-bg-desktop {
    background-image: linear-gradient(90deg, rgb(0 0 0 / 54%) 31%, rgb(0 0 0 / 0%) 100%), url('../images/contact/contact-hero-bg-548e77.jpg');
    background-size: 88%;
    background-position: left;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    background-color: #000;
}

#jtt-hero-content {
    padding-bottom: 20px;
}

#jtt-hero-title {
    font-size: 60px;
}

@media (max-width: 768px) {
    #jtt-hero {
        height: auto;
    }
    
    #jtt-hero-container {
        height: auto;
        min-height: 400px;
        padding-top: 80px;
        padding-bottom: 60px;
    }
    
    #jtt-hero-title {
        font-size: 40px;
    }
}

/* Form Section */
#jtt-form {
    background-color: #0C1717;
}

#jtt-form-container {
    max-width: 1440px;
}

/* Intro Text */
#jtt-intro {
    max-width: 900px;
}

/* Form Fields */
#jtt-form-fields {
    width: 100%;
}

.jtt-field {
    display: flex;
    flex-direction: column;
}

.jtt-input,
.jtt-select,
.jtt-textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(171, 235, 240, 0.3);
    padding: 24px;
    font-family: 'Galano Grotesque', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #D7D7D7;
    opacity: 0.8;
    outline: none;
    transition: all 0.3s ease;
}

.jtt-input::placeholder,
.jtt-select option:first-child,
.jtt-textarea::placeholder {
    color: #D7D7D7;
    opacity: 0.8;
}

.jtt-input:focus,
.jtt-select:focus,
.jtt-textarea:focus {
    border-bottom-color: rgba(171, 235, 240, 0.6);
    opacity: 1;
}

/* Select Dropdown Styling */
.jtt-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 3L7 1' stroke='%23FEF9F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    padding-right: 50px;
    cursor: pointer;
}

.jtt-select option {
    background-color: #0C1717;
    color: #FEF9F4;
    padding: 10px;
}

/* Textarea */
.jtt-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Galano Grotesque', sans-serif;
}

/* File Upload Styling */
.jtt-file-input {
    display: none;
}

.jtt-file-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(171, 235, 240, 0.3);
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jtt-file-label:hover {
    border-bottom-color: rgba(171, 235, 240, 0.6);
}

.jtt-file-text {
    font-family: 'Galano Grotesque', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #D7D7D7;
    opacity: 0.8;
    flex: 1;
}

.jtt-file-button {
    background-color: #009688;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: 'Galano Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FEF9F4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.jtt-file-label:hover .jtt-file-button {
    background-color: #00796b;
}

@media (max-width: 1024px) {
    .jtt-file-label {
        padding: 20px;
    }
    
    .jtt-file-text {
        font-size: 16px;
    }
    
    .jtt-file-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Checkbox Styling */
#jtt-field-consent {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.jtt-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #009688;
    border: 1px solid rgba(171, 235, 240, 0.3);
}

.jtt-checkbox-label {
    cursor: pointer;
    user-select: none;
    margin: 0;
    display: inline;
}

.jtt-checkbox:checked {
    background-color: #009688;
}

/* Rows */
#jtt-row-1,
#jtt-row-2,
#jtt-row-3,
#jtt-row-4,
#jtt-row-5,
#jtt-row-6,
#jtt-row-7 {
    width: 100%;
}

@media (max-width: 1024px) {
    #jtt-row-1,
    #jtt-row-2,
    #jtt-row-3,
    #jtt-row-4,
    #jtt-row-5 {
        flex-direction: column;
    }
    
    .jtt-input,
    .jtt-select,
    .jtt-textarea {
        font-size: 18px;
        padding: 20px;
    }
}

/* Submit Button */
#jtt-submit-wrapper {
    margin-top: 20px;
}

@media (max-width: 768px) {
    #jtt-submit-wrapper {
        width: 100%;
    }
    
    #jtt-submit-wrapper .primary-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Divider Section */
#jtt-divider {
    background-color: #13001A;
}

#jtt-divider-container {
    padding-top: 0;
    padding-bottom: 0;
}

#jtt-divider-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #jtt-form-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #jtt-intro {
        margin-bottom: 40px;
    }
}

/* Required field indicator */
.jtt-input[required]::placeholder::after,
.jtt-select[required] option:first-child::after {
    content: " *";
    color: #FF6B6B;
}

/* Form validation states */
.jtt-input:invalid:not(:placeholder-shown),
.jtt-select:invalid:not(:placeholder-shown) {
    border-bottom-color: rgba(255, 107, 107, 0.5);
}

.jtt-input:valid:not(:placeholder-shown),
.jtt-select:valid {
    border-bottom-color: rgba(0, 150, 136, 0.5);
}

/* Mobile: Force all GSAP animations to be visible */
@media (max-width: 767px) {
    .gsap-fade-up,
    .gsap-fade-right,
    .gsap-fade-left,
    .gsap-zoom-in,
    .gsap-text-reveal {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}