/* Form lien he doanh nghiep.
 *
 * Component Livewire `employer-contact-form` xuat hien o HAI noi: trang /employer
 * va tab "Cho Nha Tuyen Dung" tren trang chu. Truoc day style cua no nam trong
 * employer-landing.css — file chi nap o /employer — nen trang chu nhan markup moi
 * ma khong co CSS: nhan chim mau tren nen toi, o lech nhau, nut gui thanh chu tron.
 * Mot component thi style phai o mot cho; file nay la cho do.
 *
 * Moi luat deu bo trong #leadform de nap o trang nao cung khong dung toi form khac.
 */

#leadform {
    --or: #EB6F23;
    --lime: #7DC52B;
    --limeL: #EFF9E2;
    --ink: #152A20;
    --ink2: #5F7168;
    --mist: #F6FAF8;
    --line: #E1EBE5;

    padding: 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(14, 107, 59, .07);
}

#leadform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#leadform .frow > * { min-width: 0; }
#leadform .fld { display: grid; gap: 7px; margin-bottom: 16px; }
#leadform .fld label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
#leadform .fld label i { font-style: normal; color: var(--or); }
#leadform .fld input,
#leadform .fld select,
#leadform .fld textarea {
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 15.5px;
    color: var(--ink);
    background: #fff;
}
#leadform .fld textarea { resize: vertical; min-height: 82px; }

/* Input co be rong noi tai (~20 ky tu) va la o luoi cua .fld nen min-width:auto giu
   no khong co lai duoc: o cot hep cua trang chu, o tran ra ngoai mep the. Tren
   /employer the rong nen khong lo ra. */
#leadform .fld > * { min-width: 0; }
#leadform .fld input,
#leadform .fld select,
#leadform .fld textarea { width: 100%; min-width: 0; }
#leadform .fld input:focus,
#leadform .fld select:focus,
#leadform .fld textarea:focus {
    outline: none;
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(125, 197, 43, .22);
}
#leadform .fld input[type=file] { padding: 11px; background: var(--mist); }
#leadform .err { font-size: 13px; color: #C9302C; }

/* Thong bao gui thanh cong. Blade dung .okmsg; truoc gio khong co luat nao cho no
   nen no hien ra nhu mot dong chu tran, ca o /employer. */
#leadform .okmsg {
    padding: 18px 20px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--limeL);
    border: 1px solid var(--lime);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
}

#leadform .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 15px 26px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: .18s;
}
#leadform .btn svg { width: auto; height: auto; transition: transform .18s; }
#leadform .btn:hover svg { transform: translateX(3px); }
#leadform .btn-p {
    background: var(--or);
    color: #fff !important;
    border-color: var(--or);
    box-shadow: 0 8px 22px rgba(235, 111, 35, .26);
}
#leadform .btn-p:hover { background: #D45F16; border-color: #D45F16; }
#leadform .btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; }

#leadform .commit {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink2);
    text-align: center;
}

@media (max-width: 720px) {
    #leadform { padding: 22px; }
    #leadform .frow { grid-template-columns: 1fr; }
}