/* Contact & hire forms: instant validation states, styled dropdowns, phone with country code */
.lf-group { position: relative; }
.lf-control { position: relative; }
.lf-group .form-control { transition: border-color .2s, box-shadow .2s; }
.lf-group.is-valid .form-control, .lf-group.is-valid .lf-sel-btn { border-color: #22A06B; }
.lf-group.has-error .form-control, .lf-group.has-error .lf-sel-btn { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, .1); }
.lf-state { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; font-size: .8rem; }
.lf-control:has(textarea) .lf-state { top: 18px; translate: none; }
.lf-state i { display: none; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; }
.lf-group.is-valid .lf-state .fa-check { display: inline-flex; background: #22A06B; }
.lf-group.has-error .lf-state .fa-exclamation { display: inline-flex; background: #E5484D; }
.lf-group:has(select) .lf-state { right: 42px; }
.lf-error { display: flex; gap: .4rem; align-items: flex-start; margin-top: .45rem; color: #D93036; font-size: .84rem; font-weight: 500; animation: lf-in .25s ease; }
.lf-error[hidden] { display: none; }
.lf-error i { margin-top: .2rem; }
@keyframes lf-in { from { opacity: 0; transform: translateY(-4px); } }
.lf-hint { margin: .4rem 0 0; font-size: .8rem; color: var(--gray-500, #64748B); }
.lf-switch { margin: .6rem 0 0; font-size: .92rem; color: var(--gray-600, #475569); }
.lf-switch a { font-weight: 600; }
.lf-step { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 1rem; font-size: 1.05rem; }
.lf-step:first-child { margin-top: 0; }
.lf-step span { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; background: linear-gradient(135deg, #2D5BFF, #7B3CF5); }
.lf-other { animation: lf-in .3s ease; }

/* Styled dropdown */
.lf-sel { position: relative; }
.lf-native { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.lf-sel-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; text-align: left;
    min-height: 54px; padding: .8rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--gray-200, #E2E8F0); background: #fff;
    font: inherit; font-size: 1rem; color: var(--gray-900, #0F172A); cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.lf-sel-btn:hover { border-color: #A5B4FC; }
.lf-sel-btn:focus-visible, .lf-sel.is-open .lf-sel-btn { outline: none; border-color: #2D5BFF; box-shadow: 0 0 0 4px rgba(45, 91, 255, .12); }
.lf-sel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-sel-btn .lf-ph { color: var(--gray-400, #94A3B8); }
.lf-sel-btn i { color: #2D5BFF; font-size: .8rem; transition: transform .25s; flex-shrink: 0; }
.lf-sel.is-open .lf-sel-btn i { transform: rotate(180deg); }
.lf-sel-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; max-height: 300px; overflow-y: auto; padding: 6px;
    border-radius: 16px; background: #fff; border: 1px solid rgba(31, 39, 184, .1);
    box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .3); opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.lf-sel-list::before { content: ''; position: sticky; top: -6px; display: block; height: 3px; margin: -6px -6px 6px; background: linear-gradient(90deg, #4CC6FF, #7B3CF5, #FF3D9A, #FF9A2E); }
.lf-sel.is-open .lf-sel-list { opacity: 1; visibility: visible; transform: none; }
.lf-opt { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-radius: 10px; cursor: pointer; font-size: .95rem; color: var(--gray-800, #1E293B); }
.lf-opt:hover, .lf-opt.is-active { background: #F0F4FF; }
.lf-opt.is-selected { background: #E8EEFF; color: #1F27B8; font-weight: 600; }
.lf-opt-empty { color: var(--gray-400, #94A3B8); }
.lf-opt-other { border-top: 1px dashed #E2E8F0; margin-top: 4px; color: #7B3CF5; font-weight: 600; }
.lf-tick { margin-left: auto; color: #2D5BFF; }
.lf-sel-search { position: sticky; top: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; margin-bottom: 4px; border-radius: 10px; background: #F5F7FC; z-index: 1; }
.lf-sel-search i { color: #94A3B8; font-size: .8rem; }
.lf-sel-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: .9rem; outline: none; }

/* Phone: country code + number */
.lf-phone { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: .5rem; }
.lf-phone .lf-sel-btn { padding-right: .8rem; }
.lf-phone .lf-sel-list { width: min(320px, 85vw); right: auto; }
.lf-phone .lf-state { right: 14px; }
.lf-group:has(.lf-phone) .lf-state { right: 14px; }
.contact-submit-btn.is-loading { opacity: .75; pointer-events: none; }

.lf-opt-group { position: sticky; top: 38px; z-index: 1; padding: .6rem .85rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7B3CF5; background: #fff; }
.lf-opt-tag { margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: #F1F5F9; color: #64748B; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.lf-sel-list { max-height: 340px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Highlighted switch between the project and hire forms */
.lf-switch-card {
    display: flex; align-items: center; gap: 1rem; margin: 1.1rem 0 .4rem; padding: 1rem 1.1rem; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(120deg, rgba(45, 91, 255, .08), rgba(123, 60, 245, .1) 60%, rgba(255, 154, 46, .08));
    border: 1.5px solid rgba(123, 60, 245, .28); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lf-switch-card:hover { transform: translateY(-2px); border-color: rgba(123, 60, 245, .55); box-shadow: 0 16px 32px -18px rgba(123, 60, 245, .6); color: inherit; }
.lf-switch-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; background: linear-gradient(135deg, #2D5BFF, #7B3CF5); box-shadow: 0 10px 20px -10px rgba(123, 60, 245, .8); }
.lf-switch-text { flex: 1; min-width: 0; }
.lf-switch-text strong { display: block; color: var(--gray-900, #0F172A); font-size: 1rem; }
.lf-switch-text span { display: block; color: var(--gray-600, #475569); font-size: .86rem; margin-top: .15rem; }
.lf-switch-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: #fff; background: linear-gradient(90deg, #2D5BFF, #7B3CF5); white-space: nowrap; }
.lf-switch-card:hover .lf-switch-go i { transform: translateX(3px); }
.lf-switch-go i { transition: transform .25s; }
.lf-switch-badge { position: absolute; top: 0; right: 0; padding: .2rem .6rem; border-bottom-left-radius: 10px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #FF3D9A, #FF9A2E); }
@media (max-width: 576px) { .lf-switch-card { flex-wrap: wrap; } .lf-switch-go { width: 100%; justify-content: center; } }

/* Two-option switch at the top of the form */
.lf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 1.5rem; border-radius: 18px; background: #F1F4FB; border: 1px solid rgba(31, 39, 184, .08); }
.lf-tab { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 13px; color: var(--gray-700, #334155); text-decoration: none; transition: background .25s, color .25s, box-shadow .25s, transform .2s; }
.lf-tab:hover { background: rgba(255, 255, 255, .7); color: #1F27B8; }
.lf-tab i { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #2D5BFF; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .06); transition: all .25s; }
.lf-tab strong { display: block; font-size: .98rem; color: inherit; }
.lf-tab small { display: block; font-size: .78rem; color: var(--gray-500, #64748B); margin-top: .1rem; }
.lf-tab.is-active { background: #fff; color: #1F27B8; box-shadow: 0 10px 24px -14px rgba(31, 39, 184, .45); }
.lf-tab.is-active i { color: #fff; background: linear-gradient(135deg, #2D5BFF, #7B3CF5); box-shadow: 0 8px 16px -8px rgba(123, 60, 245, .8); }
@media (max-width: 480px) { .lf-tab small { display: none; } .lf-tab { padding: .7rem .75rem; gap: .55rem; } .lf-tab i { width: 32px; height: 32px; } }

.lf-sel.is-up .lf-sel-list { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.lf-sel.is-up.is-open .lf-sel-list { transform: none; }

/* ---------- Forms on phones ---------- */
.lf-tab strong { white-space: nowrap; }
@media (max-width: 520px) {
    .lf-tabs { gap: 4px; padding: 4px; }
    .lf-tab { flex-direction: column; text-align: center; gap: .35rem; padding: .65rem .4rem; }
    .lf-tab strong { font-size: .86rem; }
    .lf-tab small { display: none; }
    .lf-tab i { width: 32px; height: 32px; font-size: .85rem; }
    .lf-phone { grid-template-columns: 112px minmax(0, 1fr); }
    .lf-step { font-size: .98rem; }
    .lf-sel-list { max-height: 60vh; }
}
@media (max-width: 360px) { .lf-tab strong { font-size: .78rem; } .lf-phone { grid-template-columns: 1fr; } }

/* Social links in the contact page box */
.rc-socials { margin-top: 1.2rem; }
.rc-socials small { display: block; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(226, 232, 255, .6); }
.rc-socials > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.rc-social { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .84rem; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.rc-social:hover { background: rgba(255, 255, 255, .16); border-color: rgba(138, 217, 255, .5); color: #fff; transform: translateY(-2px); }
.rc-social i { color: #8AD9FF; }

/* Light flash across the contact side card: once when it appears, then every 10 seconds
   (same effect as the navbar side cards) */
.rc-sheen { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; }
.rc-sheen::before {
    content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(76, 198, 255, .14) 32%, rgba(255, 255, 255, .42) 50%, rgba(255, 61, 154, .14) 68%, transparent 100%);
    transform: translateX(-140%) skewX(-12deg);
}
.rc-panel.in-view .rc-sheen::before, .rc-panel:not(.animate-on-scroll) .rc-sheen::before { animation: rcSheen 10s cubic-bezier(.45, 0, .25, 1) .6s infinite; }
@keyframes rcSheen {
    0% { transform: translateX(-140%) skewX(-12deg); }
    14%, 100% { transform: translateX(330%) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce) { .rc-sheen::before { animation: none !important; } }