.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-weight:var( --e-global-typography-text-font-weight );}.elementor-6463 .elementor-element.elementor-element-1aa3505{width:100%;max-width:100%;}/* Start custom CSS *//**
 * ============================================================================
 * WP Job Openings (AWSM) - Custom Application Form & Single Job Layout Styles
 * Target: https://www.tgilescaravans.co.uk/jobs/*
 * ============================================================================
 */

/**
 * 1. Design Tokens & Scoped CSS Custom Properties
 * Defines the color palette, typography, elevation, and spacing variables
 * scoped to the single job container for straightforward maintenance.
 */
.awsm-job-single-wrap {
    --tg-primary: #3A5ED8;          /* Deep dealership navy */
    --tg-primary-hover: #122440;    /* Darker navy for hover states */
    --tg-accent: #2563eb;           /* Interactive focus ring & accent blue */
    --tg-surface: #ffffff;          /* Form card background */
    --tg-surface-alt: #f8fafc;      /* Input default background & dropzone */
    --tg-text-main: #0f172a;        /* Primary heading & input text */
    --tg-text-muted: #475569;       /* Labels & secondary descriptions */
    --tg-border: #cbd5e1;           /* Default input & card border */
    --tg-border-subtle: #e2e8f0;    /* Outer card & divider border */
    --tg-error: #dc2626;            /* Validation error red */
    --tg-error-bg: #fef2f2;         /* Validation error surface */
    --tg-success: #16a34a;          /* Submission success green */
    --tg-success-bg: #f0fdf4;       /* Submission success surface */
    --tg-radius-lg: 14px;           /* Form container border radius */
    --tg-radius-md: 8px;            /* Input & button border radius */
    --tg-shadow-card: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 
                      0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --tg-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 2. Single Job Two-Column Layout & Sticky Form Container
 * Replaces the plugin's legacy float/flex spacing with a balanced modern grid
 * and keeps the application form anchored while scrolling job specifications.
 */
.awsm-job-single-wrap.awsm-col-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
    gap: 2.75rem;
    align-items: start;
    max-width: 1240px;
    margin: 2.5rem auto;
    padding: 0 1.25rem;
}

.awsm-job-single-wrap .awsm-job-content,
.awsm-job-single-wrap .awsm-job-form {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.awsm-job-single-wrap .awsm-job-form {
    position: sticky;
    top: 2rem;
}

/**
 * 3. Job Specifications Meta Bar (Left Column Enhancement)
 * Styles the job category, location, and type badges to match the form card.
 */
.awsm-job-single-wrap .awsm-job-specification-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem;
    background-color: var(--tg-surface-alt);
    border: 1px solid var(--tg-border-subtle);
    border-radius: var(--tg-radius-md);
}

.awsm-job-single-wrap .awsm-job-specification-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--tg-surface);
    border: 1px solid var(--tg-border-subtle);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--tg-text-main);
    margin: 0 !important;
}

/**
 * 4. Application Form Card Wrapper (.awsm-job-form-inner)
 * Elevates the form into a clean, structured card with high-contrast borders.
 */
.awsm-job-single-wrap .awsm-job-form-inner {
    background-color: var(--tg-surface) !important;
    border: 1px solid var(--tg-border-subtle) !important;
    border-top: 4px solid var(--tg-primary) !important;
    border-radius: var(--tg-radius-lg) !important;
    padding: 2.25rem !important;
    box-shadow: var(--tg-shadow-card) !important;
}

/**
 * 5. Form Header Typography (.awsm-job-form-inner h2)
 * Styles the "Apply for this position" title with a subtle bottom separator.
 */
.awsm-job-single-wrap .awsm-job-form-inner h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--tg-text-main) !important;
    margin: 0 0 1.5rem 0 !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--tg-border-subtle) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em;
}

/**
 * 6. Field Groups & Labels (.awsm-job-form-group)
 * Standardizes vertical rhythm between fields and refines label legibility.
 */
.awsm-job-single-wrap .awsm-job-form-group {
    margin-bottom: 1.35rem !important;
    position: relative;
}

.awsm-job-single-wrap .awsm-job-form-group label {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--tg-text-main) !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.4 !important;
}

.awsm-job-single-wrap .awsm-job-form-req {
    color: var(--tg-error) !important;
    font-weight: 700;
    margin-left: 2px;
}

/**
 * 7. Text Inputs, Selects, and Textareas (.awsm-job-form-control)
 * Normalizes cross-browser appearance, height, padding, and interactive focus rings.
 */
.awsm-job-single-wrap .awsm-job-form-control,
.awsm-job-single-wrap .awsm-job-form-inner input[type="text"],
.awsm-job-single-wrap .awsm-job-form-inner input[type="email"],
.awsm-job-single-wrap .awsm-job-form-inner input[type="tel"],
.awsm-job-single-wrap .awsm-job-form-inner input[type="number"],
.awsm-job-single-wrap .awsm-job-form-inner input[type="url"],
.awsm-job-single-wrap .awsm-job-form-inner select,
.awsm-job-single-wrap .awsm-job-form-inner textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--tg-surface-alt) !important;
    color: var(--tg-text-main) !important;
    border: 1px solid var(--tg-border) !important;
    border-radius: var(--tg-radius-md) !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    transition: var(--tg-transition) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    appearance: none;
}

.awsm-job-single-wrap .awsm-job-form-inner textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

/* Hover & Focus states for standard inputs */
.awsm-job-single-wrap .awsm-job-form-control:hover,
.awsm-job-single-wrap .awsm-job-form-inner input[type="text"]:hover,
.awsm-job-single-wrap .awsm-job-form-inner input[type="email"]:hover,
.awsm-job-single-wrap .awsm-job-form-inner input[type="tel"]:hover,
.awsm-job-single-wrap .awsm-job-form-inner textarea:hover {
    border-color: #94a3b8 !important;
}

.awsm-job-single-wrap .awsm-job-form-control:focus,
.awsm-job-single-wrap .awsm-job-form-inner input[type="text"]:focus,
.awsm-job-single-wrap .awsm-job-form-inner input[type="email"]:focus,
.awsm-job-single-wrap .awsm-job-form-inner input[type="tel"]:focus,
.awsm-job-single-wrap .awsm-job-form-inner select:focus,
.awsm-job-single-wrap .awsm-job-form-inner textarea:focus {
    background-color: var(--tg-surface) !important;
    border-color: var(--tg-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}

/**
 * 8. CV / Resume File Upload Control
 * Transforms the default browser file input into a dashed dropzone container
 * with a styled native file-body.elementor-page-6463 button.
 */
.awsm-job-single-wrap .awsm-job-form-file-control,
.awsm-job-single-wrap .awsm-job-form-inner input[type="file"] {
    width: 100% !important;
    padding: 0.65rem !important;
    background-color: var(--tg-surface-alt) !important;
    border: 1.5px dashed var(--tg-border) !important;
    border-radius: var(--tg-radius-md) !important;
    font-size: 0.875rem !important;
    color: var(--tg-text-muted) !important;
    cursor: pointer !important;
    transition: var(--tg-transition) !important;
}

.awsm-job-single-wrap .awsm-job-form-file-control:hover,
.awsm-job-single-wrap .awsm-job-form-inner input[type="file"]:hover {
    border-color: var(--tg-primary) !important;
    background-color: #f1f5f9 !important;
}

.awsm-job-single-wrap .awsm-job-form-inner input[type="file"]::file-body.elementor-page-6463-button {
    background-color: var(--tg-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-right: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tg-transition);
}

.awsm-job-single-wrap .awsm-job-form-inner input[type="file"]::file-body.elementor-page-6463-button:hover {
    background-color: var(--tg-primary-hover);
}

.awsm-job-single-wrap .awsm-job-form-description,
.awsm-job-single-wrap .awsm-job-form-group small {
    display: block !important;
    margin-top: 0.4rem !important;
    font-size: 0.8rem !important;
    color: var(--tg-text-muted) !important;
    line-height: 1.4 !important;
}

/**
 * 9. Checkboxes, Radio Options, and GDPR Privacy Consent
 * Aligns checkbox inputs cleanly alongside multi-line consent labels.
 */
.awsm-job-single-wrap .awsm-job-form-options,
.awsm-job-single-wrap .awsm-job-form-group label[for="awsm_form_privacy_policy"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    color: var(--tg-text-muted) !important;
    cursor: pointer;
}

.awsm-job-single-wrap .awsm-job-form-inner input[type="checkbox"],
.awsm-job-single-wrap .awsm-job-form-inner input[type="radio"] {
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin: 0.15rem 0 0 0 !important;
    accent-color: var(--tg-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/**
 * 10. Primary Submit Button (#awsm-application-submit-btn)
 * Full-width, high-contrast call-to-action button with micro-interaction lift.
 */
.awsm-job-single-wrap #awsm-application-submit-btn,
.awsm-job-single-wrap .awsm-application-submit-btn,
.awsm-job-single-wrap .awsm-job-form-inner input[type="submit"],
.awsm-job-single-wrap .awsm-job-form-inner button[type="submit"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background-color: var(--tg-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--tg-radius-md) !important;
    padding: 0.95rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: var(--tg-transition) !important;
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.2) !important;
    margin-top: 0.5rem !important;
}

.awsm-job-single-wrap #awsm-application-submit-btn:hover,
.awsm-job-single-wrap .awsm-application-submit-btn:hover,
.awsm-job-single-wrap .awsm-job-form-inner input[type="submit"]:hover {
    background-color: var(--tg-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(27, 54, 93, 0.28) !important;
}

.awsm-job-single-wrap #awsm-application-submit-btn:active {
    transform: translateY(0);
}

.awsm-job-single-wrap #awsm-application-submit-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/**
 * 11. Validation Error States & AJAX Feedback Alerts
 * Styles jQuery Validation inline errors and post-submission status notices.
 */
.awsm-job-single-wrap .awsm-job-form-control.awsm-job-form-error {
    border-color: var(--tg-error) !important;
    background-color: var(--tg-error-bg) !important;
}

.awsm-job-single-wrap label.awsm-job-form-error,
.awsm-job-single-wrap div.awsm-job-form-error {
    color: var(--tg-error) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-top: 0.35rem !important;
}

.awsm-job-single-wrap .awsm-application-message {
    margin-top: 1.25rem !important;
    padding: 1rem 1.25rem !important;
    border-radius: var(--tg-radius-md) !important;
    font-size: 0.925rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.awsm-job-single-wrap .awsm-success-message {
    background-color: var(--tg-success-bg) !important;
    color: var(--tg-success) !important;
    border: 1px solid #bbf7d0 !important;
}

.awsm-job-single-wrap .awsm-error-message {
    background-color: var(--tg-error-bg) !important;
    color: var(--tg-error) !important;
    border: 1px solid #fecaca !important;
}

/**
 * 12. Responsive Breakpoints (Tablets & Mobile Devices)
 * Collapses the 2-column grid into a stacked layout below 992px and adjusts
 * internal card padding for smaller viewports.
 */
@media (max-width: 991px) {
    .awsm-job-single-wrap.awsm-col-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .awsm-job-single-wrap .awsm-job-form {
        position: static;
    }
}

@media (max-width: 575px) {
    .awsm-job-single-wrap .awsm-job-form-inner {
        padding: 1.5rem 1.25rem !important;
    }

    .awsm-job-single-wrap .awsm-job-form-inner h2 {
        font-size: 1.3rem !important;
    }
}/* End custom CSS */