/* ============================================================
   WORK FORM  (/Home/Work)
   Loaded via the _Layout "Styles" section, after
   aqlama-freelancer-theme.css, so it wins on equal specificity.

   IMPORTANT: the public layout loads Bootstrap's JS but NOT its
   stylesheet. Utility classes (mb-3, w-100, fw-bold, .row,
   form-select-sm) are no-ops on this page, so everything this
   form needs is defined here. All new selectors are namespaced
   .wf-* to avoid fighting the theme, which uses !important on
   .language-block.
   ============================================================ */

/* ---- intl-tel-input dropdown (moved from the inline <style>) ---- */
.iti__country-name { color: black; }
.iti__country-list { background-color: white; }
.iti__country:hover { background-color: #f1f1f1; }
.iti__selected-dial-code { color: black !important; }

/* Payment groups are revealed by JS setting inline display:block.
   This rule is load-bearing — without it every group shows at once. */
.payment-detail-group { display: none; }

/* ---- Shell ----
   The theme styles `.page-wrapper form` as one big white card. This page
   now renders its own cards, so flatten the outer shell to avoid nesting
   a card inside a card. Specificity 0,2,1 beats the theme's 0,1,1. */
.page-wrapper form.wf-form {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.wf-intro {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 60ch;
}

/* ---- Card ---- */
.wf-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--card-shadow);
    padding: 24px;
}

.wf-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.wf-step {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
}

.wf-card-head h2 {
    margin: 3px 0 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark);
}

.wf-card-head p {
    margin: 4px 0 0;
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* ---- Grid ---- */
.wf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 768px) {
    .wf-grid { grid-template-columns: 1fr 1fr; }
}

.wf-span-2 { grid-column: 1 / -1; }

/* ---- Field ---- */
.wf-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wf-field > label {
    margin-bottom: 8px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-dark);
}

.wf-req {
    color: var(--error-color);
    margin-inline-start: 3px;
}

.wf-hint {
    margin-top: 6px;
    font-size: 0.83rem;
    color: var(--text-muted);
}

.wf-field .text-danger { margin-top: 6px; }

.wf-field input[type="file"] {
    background: var(--light-bg);
    cursor: pointer;
}

/* intl-tel-input wraps the phone input; make it fill the grid cell */
.wf-field .iti { width: 100%; }

/* ---- Chips (areas of experience) ---- */
.wf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wf-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wf-chip label {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--text-subtle);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: 0.2s ease;
}

.wf-chip label:hover { border-color: var(--primary-color); }

.wf-chip input:checked + label {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.wf-chip input:focus-visible + label {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

/* ---- Languages ---- */
.wf-lang-search { margin-bottom: 14px; }

.wf-lang-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
    padding-inline-end: 4px;
}

@media (min-width: 992px) {
    .wf-lang-list { grid-template-columns: 1fr 1fr; }
}

.wf-lang-block {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: #fff;
    padding: 14px;
    align-self: start;
    transition: 0.2s ease;
}

.wf-lang-block:hover { border-color: var(--border-color); }

.wf-lang-block .language-extra {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
}

.wf-lang-block .language-extra label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-muted);
}

.wf-lang-block .language-extra select {
    padding: 9px 12px;
    font-size: 0.9rem;
}

.wf-empty {
    padding: 16px 4px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---- Submit ---- */
.wf-submit {
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    font-family: var(--font-family-base);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.wf-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
}

.wf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.wf-foot {
    margin-top: 18px;
    text-align: center;
}

@media (max-width: 576px) {
    .wf-card { padding: 18px 16px; }
    .wf-card-head { margin-bottom: 16px; }
}