/* ============================================================
   Flight Hired CV Parser – Frontend Styles
   ============================================================ */

:root {
    --fhcp-accent:   #e05c2c;
    --fhcp-accent-h: #c94e22;
    --fhcp-green:    #3ab446;
    --fhcp-red:      #d93025;
    --fhcp-blue:     #1a73e8;
    --fhcp-bg:       #ffffff;
    --fhcp-surface:  #f8f9fa;
    --fhcp-border:   #e0e0e0;
    --fhcp-text:     #333333;
    --fhcp-muted:    #666666;
    --fhcp-radius:   10px;
    --fhcp-shadow:   0 4px 24px rgba(0,0,0,.12);
}

/* ── Uploader intro banner ──────────────────────────────────── */
.fhcp-uploader-intro {
    display      : flex;
    align-items  : flex-start;
    gap          : 12px;
    background   : #f0f4ff;
    border       : 1px solid #d0daf8;
    border-radius: var(--fhcp-radius);
    padding      : 14px 16px;
    margin-bottom: 10px;
}
.fhcp-uploader-intro-icon {
    width        : 32px;
    height       : 32px;
    border-radius: 50%;
    background   : #1c2b4b;
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-shrink  : 0;
    margin-top   : 1px;
}
.fhcp-uploader-intro-icon svg {
    width : 16px;
    height: 16px;
    stroke: #fff;
    color : #fff;
}
.fhcp-uploader-intro-body {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
}
.fhcp-uploader-intro-body strong {
    font-size  : .875rem;
    font-weight: 700;
    color      : #1c2b4b;
    line-height: 1.3;
}
.fhcp-uploader-intro-body span {
    font-size  : .8rem;
    color      : #4a5568;
    line-height: 1.55;
}

/* ── Uploader widget ────────────────────────────────────────── */
.fhcp-uploader {
    background   : var(--fhcp-surface);
    border       : 2px dashed var(--fhcp-border);
    border-radius: var(--fhcp-radius);
    padding      : 20px 24px;
    margin-bottom: 28px;
    transition   : border-color .2s, background .2s;
}
.fhcp-uploader.fhcp-dragging,
.fhcp-uploader:hover {
    border-color: var(--fhcp-accent);
    background  : #fff8f5;
}
.fhcp-uploader-inner {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 12px;
}
.fhcp-upload-icon {
    width : 36px;
    height: 36px;
    color : var(--fhcp-accent);
    flex-shrink: 0;
}
.fhcp-uploader-text {
    flex     : 1;
    min-width: 120px;
}
.fhcp-filename {
    display    : block;
    font-weight: 600;
    color      : var(--fhcp-text);
    font-size  : .9rem;
}
.fhcp-filesize {
    font-size: .8rem;
    color    : var(--fhcp-muted);
}
.fhcp-hint {
    margin : 8px 0 0;
    font-size: .78rem;
    color  : var(--fhcp-muted);
}

/* Buttons */
.fhcp-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 8px 18px;
    border         : none;
    border-radius  : 6px;
    font-size      : .875rem;
    font-weight    : 600;
    cursor         : pointer;
    transition     : background .15s, opacity .15s, transform .1s;
    white-space    : nowrap;
}
.fhcp-btn:active { transform: scale(.97); }
.fhcp-btn:disabled { opacity: .5; cursor: not-allowed; }

.fhcp-btn-select {
    background: var(--fhcp-surface);
    border    : 1.5px solid var(--fhcp-border);
    color     : var(--fhcp-text);
}
.fhcp-btn-select:hover:not(:disabled) {
    border-color: var(--fhcp-accent);
    color       : var(--fhcp-accent);
}
.fhcp-btn-parse {
    background: #1c2b4b;
    color     : #fff;
}
.fhcp-btn-parse:hover:not(:disabled) { background: #0f1c33; }
.fhcp-btn-primary {
    background: #1c2b4b;
    color     : #fff;
    font-size  : .95rem;
    padding    : 10px 26px;
}
.fhcp-btn-primary:hover { background: #0f1c33; }
.fhcp-btn-outline {
    background: transparent;
    border    : 2px solid #d1d5db;
    color     : #1c2b4b;
}
.fhcp-btn-outline:hover { border-color: #1c2b4b; }

/* ── Modal overlay ──────────────────────────────────────────── */
body.fhcp-modal-open { overflow: hidden; }

.fhcp-modal-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(15,23,42,.72);
    z-index         : 99999;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 16px;
    backdrop-filter : blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fhcp-modal-box {
    background   : #ffffff;
    border-radius: 20px;
    box-shadow   : 0 24px 72px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
    width        : 100%;
    max-width    : 456px;
    overflow     : hidden;
    animation    : fhcpModalIn .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes fhcpModalIn {
    from { transform: translateY(36px) scale(.94); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ── Top gradient progress track ───────────────────────────── */
.fhcp-modal-track {
    height    : 4px;
    background: #efefef;
}
.fhcp-modal-fill {
    height    : 4px;
    width     : 0%;
    background: linear-gradient(90deg, var(--fhcp-accent) 0%, #f5a623 100%);
    transition: width .55s cubic-bezier(.4,0,.2,1);
}

/* ── Modal header ───────────────────────────────────────────── */
.fhcp-modal-header {
    padding   : 30px 32px 18px;
    text-align: center;
}

.fhcp-modal-icon {
    position       : relative;
    width          : 82px;
    height         : 82px;
    margin         : 0 auto 18px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.fhcp-icon-ring {
    position     : absolute;
    border-radius: 50%;
    border       : 2px solid transparent;
}
.fhcp-icon-ring-1 {
    inset            : -10px;
    border-top-color : var(--fhcp-accent);
    border-right-color: rgba(224,92,44,.25);
    animation        : fhcpRingSpin 1.9s linear infinite;
}
.fhcp-icon-ring-2 {
    inset            : -19px;
    border-top-color : rgba(224,92,44,.2);
    border-left-color: rgba(224,92,44,.1);
    animation        : fhcpRingSpin 3.2s linear infinite reverse;
}
@keyframes fhcpRingSpin { to { transform: rotate(360deg); } }

.fhcp-icon-core {
    position       : relative;
    z-index        : 2;
    width          : 60px;
    height         : 60px;
    border-radius  : 50%;
    background     : linear-gradient(145deg, var(--fhcp-accent) 0%, #f07b3f 100%);
    display        : flex;
    align-items    : center;
    justify-content: center;
    box-shadow     : 0 6px 20px rgba(224,92,44,.38);
}
.fhcp-icon-core svg {
    width : 27px;
    height: 27px;
    stroke: #fff;
    color : #fff;
}

/* Success icon state */
.fhcp-modal-icon.fhcp-icon-success .fhcp-icon-core {
    background: linear-gradient(145deg, var(--fhcp-green) 0%, #5cc46b 100%);
    box-shadow : 0 6px 20px rgba(58,180,70,.38);
}
.fhcp-modal-icon.fhcp-icon-success .fhcp-icon-ring {
    animation: none;
    opacity  : 0;
    transition: opacity .3s;
}

#fhcp-modal-title {
    margin       : 0 0 6px;
    font-size    : 1.2rem;
    font-weight  : 700;
    color        : var(--fhcp-text);
    letter-spacing: -.01em;
}
.fhcp-modal-subtitle {
    margin   : 0;
    font-size: .875rem;
    color    : var(--fhcp-muted);
}

/* ── Steps ──────────────────────────────────────────────────── */
.fhcp-steps { padding: 4px 24px 22px; }

.fhcp-step {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 10px 12px;
    border-radius: 10px;
    margin-bottom: 2px;
    transition   : background .25s, opacity .3s;
    opacity      : .38;
    position     : relative;
}
/* Connector line between circles */
.fhcp-step + .fhcp-step::before {
    content      : '';
    position     : absolute;
    left         : 28px;
    top          : -7px;
    height       : 7px;
    width        : 2px;
    background   : var(--fhcp-border);
    border-radius: 2px;
}
.fhcp-step.fhcp-step-active {
    opacity   : 1;
    background: rgba(224,92,44,.07);
}
.fhcp-step.fhcp-step-done { opacity: 1; }

/* ─ Number circle ──────────────────────────────────────────── */
.fhcp-step-num {
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    border         : 2px solid var(--fhcp-border);
    background     : transparent;
    color          : var(--fhcp-muted);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : .78rem;
    font-weight    : 700;
    flex-shrink    : 0;
    position       : relative;
    transition     : background .35s, border-color .35s, box-shadow .35s, color .2s;
    overflow       : hidden;
}
.fhcp-step.fhcp-step-active .fhcp-step-num {
    background  : var(--fhcp-accent);
    border-color: var(--fhcp-accent);
    color       : #fff;
    animation   : fhcpNumPulse 1.9s ease-in-out infinite;
}
.fhcp-step.fhcp-step-done .fhcp-step-num {
    background  : var(--fhcp-green);
    border-color: var(--fhcp-green);
    color       : #fff;
    animation   : none;
    box-shadow  : none;
}
@keyframes fhcpNumPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(224,92,44,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(224,92,44,.0); }
}

/* Inner: number / spinner / checkmark */
.fhcp-num-text { line-height: 1; }
.fhcp-num-spin,
.fhcp-num-check {
    display        : none;
    position       : absolute;
    inset          : 0;
    align-items    : center;
    justify-content: center;
}
.fhcp-num-spin svg,
.fhcp-num-check svg { width: 16px; height: 16px; }

.fhcp-step.fhcp-step-active .fhcp-num-text { display: none; }
.fhcp-step.fhcp-step-active .fhcp-num-spin { display: flex; }
.fhcp-step.fhcp-step-done   .fhcp-num-text { display: none; }
.fhcp-step.fhcp-step-done   .fhcp-num-check { display: flex; }

/* Spinner arc rotation */
.fhcp-num-spin circle {
    transform-box   : fill-box;
    transform-origin: center;
    animation       : fhcpArcSpin .75s linear infinite;
    stroke          : currentColor;
}
@keyframes fhcpArcSpin { to { transform: rotate(360deg); } }

/* Checkmark draw-on */
.fhcp-check-tick {
    stroke-dasharray : 22;
    stroke-dashoffset: 22;
    stroke           : currentColor;
    transition       : stroke-dashoffset .38s ease .05s;
}
.fhcp-step.fhcp-step-done .fhcp-check-tick { stroke-dashoffset: 0; }

/* ─ Step label ─────────────────────────────────────────────── */
.fhcp-step-label {
    flex       : 1;
    font-size  : .875rem;
    color      : var(--fhcp-text);
    font-weight: 500;
    line-height: 1.3;
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : 4px;
    transition : font-weight .2s;
}
.fhcp-step.fhcp-step-active .fhcp-step-label { font-weight: 700; }

/* AI animated dots – visible only on step 4 while active */
.fhcp-ai-dots { display: none; align-items: center; gap: 3px; }
[data-step="4"].fhcp-step-active .fhcp-ai-dots { display: inline-flex; }
.fhcp-ai-dots span {
    display      : block;
    width        : 4px;
    height       : 4px;
    border-radius: 50%;
    background   : var(--fhcp-accent);
    animation    : fhcpDotBounce 1.2s infinite ease-in-out;
}
.fhcp-ai-dots span:nth-child(2) { animation-delay: .2s; }
.fhcp-ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes fhcpDotBounce {
    0%, 80%, 100% { transform: scale(.55); opacity: .4; }
    40%           { transform: scale(1);   opacity: 1;  }
}

/* ETA text (right side) */
.fhcp-step-eta {
    font-size  : .75rem;
    color      : var(--fhcp-muted);
    flex-shrink: 0;
}

/* ── Modal result / review screen ───────────────────────────── */
.fhcp-modal-result {
    padding   : 4px 28px 32px;
    text-align: center;
}

/* Review screen */
.fhcp-review { text-align: center; }

/* Compact header when result is showing (title/subtitle hidden, icon stays) */
.fhcp-modal-box.fhcp-result-mode .fhcp-modal-header {
    padding-bottom: 4px;
}

@keyframes fhcpResultPop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.fhcp-review h4 {
    margin     : 0 0 8px;
    font-size  : 1.05rem;
    font-weight: 700;
    color      : #1c2b4b;
}
.fhcp-review p { margin: 0 0 8px; font-size: .875rem; color: var(--fhcp-text); }
.fhcp-review-intro {
    font-size  : .82rem;
    color      : var(--fhcp-muted);
    line-height: 1.55;
    margin     : 0 0 14px;
}

/* Filled field pill badges */
.fhcp-filled-list {
    list-style     : none;
    padding        : 0;
    margin         : 0 0 6px;
    display        : flex;
    flex-wrap      : wrap;
    gap            : 6px;
    justify-content: center;
}
.fhcp-filled-list li {
    background   : #e8f5e9;
    color        : #2d7a36;
    font-size    : .75rem;
    font-weight  : 600;
    padding      : 4px 10px;
    border-radius: 14px;
}

/* Unmatched warning box */
.fhcp-unmatched {
    text-align   : left;
    background   : #fff8e6;
    border       : 1px solid #ffe2a8;
    border-radius: 8px;
    padding      : 10px 12px;
    margin       : 12px 0 0;
    margin-bottom: 12px;
}
.fhcp-unmatched p {
    margin     : 0 0 6px;
    font-size  : .8rem;
    color      : #856404;
    font-weight: 600;
}
.fhcp-unmatched ul {
    margin      : 0;
    padding-left: 18px;
    font-size   : .8rem;
    color       : #5b4a1f;
}

/* Not-detected fields */
.fhcp-not-detected {
    text-align   : left;
    background   : var(--fhcp-surface);
    border       : 1px solid var(--fhcp-border);
    border-radius: 8px;
    padding      : 10px 12px;
    margin       : 10px 0 0;
    margin-bottom: 10px;
}
.fhcp-not-detected p {
    margin     : 0 0 8px;
    font-size  : .78rem;
    color      : var(--fhcp-muted);
    font-weight: 600;
}
.fhcp-not-detected-list {
    display  : flex;
    flex-wrap: wrap;
    gap      : 5px;
}
.fhcp-not-detected-list span {
    background   : #f3f4f6;
    color        : #9aa3b2;
    font-size    : .72rem;
    font-weight  : 500;
    padding      : 3px 9px;
    border-radius: 12px;
}

/* AI disclaimer */
.fhcp-result-disclaimer {
    display      : flex;
    align-items  : flex-start;
    gap          : 7px;
    background   : #fff8f0;
    border       : 1px solid #f5d0b0;
    border-radius: 8px;
    padding      : 10px 13px;
    margin       : 12px 0 0;
    font-size    : .78rem;
    color        : #7a4210;
    text-align   : left;
    line-height  : 1.5;
}
.fhcp-result-disclaimer svg {
    width     : 13px;
    height    : 13px;
    flex-shrink: 0;
    margin-top : 1px;
    stroke     : #c0702a;
}

/* Action buttons row */
.fhcp-review-actions {
    display        : flex;
    gap            : 10px;
    justify-content: center;
    flex-wrap      : wrap;
    margin-top     : 20px;
}

/* Highlighted (auto-filled) form fields */
.fhcp-filled,
.fhcp-filled + .select2-container .select2-selection,
#wp-freelancer_des-wrap.fhcp-filled {
    box-shadow   : 0 0 0 2px rgba(255,193,7,.55) !important;
    border-radius: 6px;
    transition   : box-shadow .3s;
}

/* ── Banner ─────────────────────────────────────────────────── */
#fhcp-banner {
    display    : flex;
    align-items: center;
    gap        : 10px;
    background : #e8f5e9;
    border     : 1.5px solid #a5d6a7;
    border-radius: 8px;
    padding    : 12px 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size  : .875rem;
    color      : #2e7d32;
}
.fhcp-banner-icon { font-size: 1.1rem; flex-shrink: 0; }
.fhcp-banner-msg  { flex: 1; }
.fhcp-banner-dismiss {
    background   : transparent;
    border       : 1.5px solid #a5d6a7;
    border-radius: 5px;
    color        : #2e7d32;
    font-size    : .8rem;
    padding      : 3px 10px;
    cursor       : pointer;
    flex-shrink  : 0;
    font-weight  : 600;
}
.fhcp-banner-dismiss:hover { background: #c8e6c9; }

/* ── Toast ──────────────────────────────────────────────────── */
.fhcp-toast {
    position     : fixed;
    bottom       : 24px;
    left         : 50%;
    transform    : translateX(-50%) translateY(20px);
    opacity      : 0;
    background   : #333;
    color        : #fff;
    padding      : 12px 24px;
    border-radius: 8px;
    font-size    : .9rem;
    z-index      : 100000;
    box-shadow   : 0 4px 16px rgba(0,0,0,.25);
    white-space  : nowrap;
    transition   : opacity .3s, transform .3s;
    pointer-events: none;
}
.fhcp-toast.fhcp-toast-visible {
    opacity  : 1;
    transform: translateX(-50%) translateY(0);
}
.fhcp-toast-success { background: #2e7d32; }
.fhcp-toast-error   { background: var(--fhcp-red); }
.fhcp-toast-warning { background: #f57c00; }

/* ── Per-tab publish row ────────────────────────────────────── */
.fhcp-tab-pub-wrap      { margin-top: 28px; }
.fhcp-tab-pub-divider   { border: none; border-top: 1px solid var(--fhcp-border); margin: 0 0 18px; }
.fhcp-tab-pub-row       { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fhcp-tab-publish       { min-width: 140px; }
.fhcp-pub-msg {
    font-size   : .875rem;
    font-weight : 600;
    display     : inline-flex;
    align-items : center;
}
.fhcp-msg-ok  { color: var(--fhcp-green); }
.fhcp-msg-err { color: var(--fhcp-red); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .fhcp-uploader-inner { flex-direction: column; align-items: flex-start; }
    .fhcp-modal-box { border-radius: 12px; }
    .fhcp-steps, .fhcp-modal-header, .fhcp-modal-result { padding-left: 20px; padding-right: 20px; }
}