/* Shared "gt-form" styling: used by the homepage "Get in Touch" form
   and the talent-acquisition job application form. */

.gt-card {
    background: #fff;
    padding: 32px 28px 26px;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(20, 40, 80, 0.14);
}

/* Keep the "Get in Touch" badge fully inside the card's own flow instead
   of poking above it via negative transform (the theme's default). On
   the homepage hero the card sits inside a `.section-bg-image` ancestor,
   which has `overflow: hidden` (HTWF/style.css) — anything poking above
   the card gets silently clipped away there. Rendering the badge in
   normal flow avoids depending on exact ancestor spacing/clipping. */
.gt-card .get-in-touch-btn-wrapper {
    position: static;
    height: auto;
    margin: 0 0 18px;
    text-align: center;
}

.gt-card .get-in-touch-banner {
    position: static;
    display: inline-block;
    transform: none;
}

.gt-form .gt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.gt-form .gt-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gt-form label {
    font-size: 11px;
    font-weight: 700;
    color: #4A5568;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
}

.gt-form label .req {
    color: #e74c3c;
    margin-left: 2px;
}

.gt-form .gt-input-wrap {
    position: relative;
}

.gt-form .gt-input-wrap i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #A0AEC0;
    font-size: 14px;
    pointer-events: none;
}

.gt-form input[type="text"],
.gt-form input[type="email"],
.gt-form input[type="tel"],
.gt-form input[type="number"],
.gt-form input[type="url"],
.gt-form select,
.gt-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #1A202C;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.gt-form input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px dashed #CBD5E0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #4A5568;
    font-size: 13px;
    font-family: inherit;
    transition: border-color .2s ease, background .2s ease;
}

.gt-form input[type="file"]:focus {
    outline: none;
    border-color: #4A90E2;
    background: #fff;
}

.gt-form .gt-input-wrap input {
    padding-left: 38px;
}

.gt-form textarea {
    height: auto;
    min-height: 76px;
    padding: 12px 14px;
    resize: vertical;
}

.gt-form input:focus,
.gt-form select:focus,
.gt-form textarea:focus {
    outline: none;
    border-color: #4A90E2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
}

.gt-form input::placeholder,
.gt-form textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

.gt-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 34px;
    cursor: pointer;
}

.gt-form .gt-error,
.gt-error {
    color: #e74c3c;
    font-size: 11px;
    min-height: 14px;
    margin-top: 5px;
    display: block;
}

.gt-form .gt-security-label {
    margin-top: 4px;
}

.gt-form .gt-captcha-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gt-form .gt-captcha-box {
    font-size: 15px;
    font-weight: 700;
    color: #1A202C;
    background: #EDF2F7;
    border: 1.5px solid #E2E8F0;
    padding: 0 16px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.gt-form #captchaAnswer {
    width: 84px;
    text-align: center;
    flex: 0 0 auto;
}

.gt-form .gt-submit-wrap {
    margin-left: auto;
}

.gt-form .submit-enquiry-banner {
    height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 26px;
}

@media (max-width: 480px) {
    .gt-form .gt-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gt-form .gt-captcha-row {
        flex-direction: column;
        align-items: stretch;
    }

    .gt-form .gt-captcha-box,
    .gt-form #captchaAnswer {
        width: 100%;
    }

    .gt-form .gt-submit-wrap {
        margin-left: 0;
        width: 100%;
    }

    .gt-form .submit-enquiry-banner {
        width: 100%;
        justify-content: center;
    }
}

/* Job card "Apply Now" button */
.job-apply-btn {
    display: inline-block;
    margin-top: 18px;
    background: #247CFF;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 20px;
    padding: 9px 22px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    text-decoration: none !important;
}

.job-apply-btn:hover {
    background: #FF6B35;
    transform: translateY(-2px);
}

/* Application form section */
#apply-form-section {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    scroll-margin-top: 90px;
}

#apply-form-section .gt-card {
    text-align: left;
}
