/*
 * Job Application Form
 * Fonts, text colours, headings, inputs and buttons come from the active theme.
 * Accent colour: the theme's palette (theme.json) when it has one, otherwise the link colour.
 */
.jaf-form-wrapper,
.jaf-modal {
    --jaf-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-cyan-blue, #0073aa)));
    --jaf-border: rgba(128, 128, 128, 0.35);
    --jaf-ok: #2e9e4f;
    --jaf-bad: #d63638;
    --jaf-radius: 8px;
}

/* ----- Form box ----- */
.jaf-form-wrapper { box-sizing:border-box; border:1px solid var(--jaf-border); border-radius:var(--jaf-radius); padding:25px; max-width:700px; margin:30px auto; font:inherit; color:inherit; }
.jaf-form-wrapper *, .jaf-form-wrapper *::before, .jaf-form-wrapper *::after { box-sizing:border-box; }
.jaf-form-wrapper h2 { text-align:center; margin-top:0; }
.jaf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.jaf-form-grid-full { grid-column: span 2; }
.jaf-form-wrapper label { display:block; margin-bottom:5px; font-weight:600; }

/* Inputs keep the theme's look; only width and font are forced so the grid lines up. */
.jaf-form-wrapper input[type="text"],
.jaf-form-wrapper input[type="tel"],
.jaf-form-wrapper input[type="email"],
.jaf-form-wrapper select { width:100%; max-width:100%; font:inherit; }
.jaf-form-wrapper input.jaf-valid, .jaf-form-wrapper select.jaf-valid { border-color:var(--jaf-ok); }
.jaf-form-wrapper input.jaf-valid { padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e9e4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; }
.jaf-form-wrapper input.jaf-invalid, .jaf-form-wrapper select.jaf-invalid { border-color:var(--jaf-bad); }

.jaf-hint { margin:4px 0 0; font-size:0.85em; opacity:0.75; }
.jaf-hint.jaf-hint-ok { color:var(--jaf-ok); opacity:1; }
.jaf-hint.jaf-hint-bad { color:var(--jaf-bad); opacity:1; }
.jaf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.jaf-alert { padding:15px; border-radius:var(--jaf-radius); margin-bottom:20px; font-weight:600; display:flex; align-items:center; gap:10px; }
.jaf-alert-error { background:rgba(214, 54, 56, 0.1); color:var(--jaf-bad); border:1px solid rgba(214, 54, 56, 0.35); }


/* ----- Tap pills ----- */
.jaf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.jaf-form-wrapper .jaf-chip { position:relative; flex:1; margin:0; cursor:pointer; font-weight:inherit; }
.jaf-form-wrapper .jaf-chip input { position:absolute; opacity:0; width:1px; height:1px; padding:0; margin:0; border:0; bottom:0; left:50%; }
.jaf-chip span { display:block; text-align:center; white-space:nowrap; padding:10px 12px; border:1px solid var(--jaf-border); border-radius:999px; font-weight:600; transition:background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; }
.jaf-chip:hover span { border-color:var(--jaf-accent); }
.jaf-chip input:focus-visible + span { outline:2px solid var(--jaf-accent); outline-offset:2px; }
.jaf-chip input:checked + span { background:var(--jaf-accent); border-color:var(--jaf-accent); color:#fff; }
.jaf-chip:active span { transform:scale(0.96); }

.jaf-form-wrapper .jaf-consent { display:flex; align-items:flex-start; gap:10px; font-weight:400; font-size:0.95em; line-height:1.5; cursor:pointer; }
.jaf-form-wrapper .jaf-consent input { width:18px; height:18px; flex:none; margin:2px 0 0; }

/* The submit button uses the theme's button style (wp-element-button / button classes); only layout is set here. */
.jaf-step-nav { display:flex; margin-top:15px; }
.jaf-form-wrapper .jaf-step-nav .jaf-submit { flex:1; width:auto; margin:0; cursor:pointer; }


@media (max-width:600px) {
    .jaf-form-wrapper { padding:18px; }
    .jaf-form-grid { grid-template-columns:1fr; }
    .jaf-form-grid-full { grid-column: span 1; }
}

/* ----- WhatsApp channel call-to-action ----- */
.jaf-cta { box-sizing:border-box; display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; padding:14px 16px; margin:0 0 24px; border:1px solid rgba(37, 211, 102, 0.35); background:rgba(37, 211, 102, 0.08); border-radius:12px; font:inherit; color:inherit; line-height:1.45; }
.jaf-cta-icon { display:flex; flex:none; color:#1fa855; }
.jaf-cta-text { flex:1 1 220px; }
.jaf-cta-text strong { display:block; }
/* WhatsApp's own green, so the button is recognisable on any theme. */
.jaf-wa-btn { display:inline-flex; align-items:center; justify-content:center; flex:none; background:#25d366; color:#fff !important; font-weight:700; padding:10px 18px; border-radius:10px; text-decoration:none !important; white-space:nowrap; transition:background 0.15s; }
.jaf-wa-btn:hover { background:#1fb958; }

/* ----- Success popup ----- */
.jaf-modal-overlay { position:fixed; inset:0; z-index:99999; background:rgba(15, 20, 40, 0.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; padding:16px; overflow-y:auto; animation:jafFade 0.25s ease-out; }
.jaf-modal { position:relative; margin:auto; box-sizing:border-box; background:var(--wp--preset--color--base, #fff); color:var(--wp--preset--color--contrast, #1e1e1e); border-radius:20px; padding:36px 28px 22px; max-width:440px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0, 0, 0, 0.3); animation:jafPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.jaf-modal .jaf-modal-close { position:absolute; top:14px; right:14px; width:32px; height:32px; min-height:0; padding:0; margin:0; border:none; border-radius:50%; background:rgba(128, 128, 128, 0.15); box-shadow:none; font-size:20px; line-height:1; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.jaf-modal .jaf-modal-close:hover { background:rgba(128, 128, 128, 0.25); }
.jaf-modal-icon { position:relative; width:68px; height:68px; border-radius:50%; color:var(--jaf-accent); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; animation:jafPop 0.5s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards; }
.jaf-modal-icon::before { content:""; position:absolute; inset:0; border-radius:50%; background:currentColor; opacity:0.12; box-shadow:0 0 0 8px currentColor; }
.jaf-modal-icon svg { position:relative; }
.jaf-modal h3 { margin:0 0 8px; color:inherit; }
.jaf-modal-lead { margin:0 0 22px; opacity:0.8; line-height:1.6; }
.jaf-modal-step { background:rgba(37, 211, 102, 0.08); border:1px solid rgba(37, 211, 102, 0.3); border-radius:14px; padding:18px; text-align:left; }
.jaf-modal-step h4 { margin:0 0 6px; color:inherit; }
.jaf-modal-step p { margin:0 0 14px; opacity:0.8; font-size:0.95em; line-height:1.55; }
/* WhatsApp's own green, so the button is recognisable on any theme. */
.jaf-modal-whatsapp { display:flex; align-items:center; justify-content:center; gap:10px; background:#25d366; color:#fff !important; font-weight:700; padding:14px 18px; border-radius:12px; text-decoration:none !important; box-shadow:0 6px 16px rgba(37, 211, 102, 0.35); transition:background 0.15s, transform 0.15s; }
.jaf-modal-whatsapp:hover { background:#1fb958; transform:translateY(-1px); }
.jaf-modal-related { margin-top:18px; text-align:left; }
.jaf-modal-related h4 { margin:0 0 8px; color:inherit; }
.jaf-modal-related a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; margin-top:8px; border:1px solid var(--jaf-border); border-radius:10px; color:inherit !important; font-weight:600; line-height:1.4; text-decoration:none !important; transition:border-color 0.15s; }
.jaf-modal-related a:hover { border-color:var(--jaf-accent); }
.jaf-modal-related a span { flex:none; color:var(--jaf-accent); font-size:0.9em; }
.jaf-modal .jaf-modal-later { margin:16px 0 0; padding:6px 10px; min-height:0; background:none; border:none; box-shadow:none; color:inherit; opacity:0.7; text-decoration:underline; cursor:pointer; font:inherit; font-size:0.9em; }
.jaf-modal .jaf-modal-later:hover { opacity:1; background:none; }

@keyframes jafFade { from { opacity:0; } to { opacity:1; } }
@keyframes jafPop { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion:reduce) {
    .jaf-modal-overlay, .jaf-modal, .jaf-modal-icon { animation:none; }
}