/* Mr Cooler — Careers: application form + modal. Matches main-site mc-form. */

/* ---- modal shell ---- */
.modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(26,35,50,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal.open { display:flex; }
.modal__card { position:relative; width:100%; max-width:460px; max-height:calc(100vh - 36px); overflow:auto;
  background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px 26px 26px;
  animation:pop .18s ease; }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.modal__close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:none; border-radius:var(--radius-full);
  background:var(--bg-alt); color:var(--text-2); font-size:1.2rem; line-height:1; cursor:pointer; transition:background .15s; }
.modal__close:hover { background:#e4e9f0; }
.modal__eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin:0 0 4px; }
.modal__title { margin:0 0 20px; font-size:1.3rem; font-weight:700; letter-spacing:-.01em; }

/* ---- fields ---- */
.field { margin-bottom:16px; }
label { display:block; margin-bottom:6px; font-size:.875rem; font-weight:600; color:var(--text); }
label .opt { color:var(--text-muted); font-weight:400; }
input, select, textarea { width:100%; font:inherit; color:var(--navy); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; transition:border-color .18s, box-shadow .18s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; min-height:80px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- submit (pill, centered) ---- */
.submit { display:flex; align-items:center; justify-content:center; gap:9px; margin:22px auto 0; min-height:54px; padding:0 28px;
  border:none; border-radius:var(--radius-full); background:var(--accent-strong); color:#fff; font-family:var(--font);
  font-size:1.0625rem; font-weight:700; cursor:pointer; text-decoration:none; transition:background .18s, transform .18s; width:100%; }
.submit:hover { background:var(--accent-strong-hover); transform:translateY(-1px); }
.submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.submit--wa { background:var(--whatsapp); }
.submit--wa:hover { background:var(--whatsapp-hover); }
.wa-ico { width:20px; height:20px; flex:0 0 auto; }
.privacy { font-size:.8rem; color:var(--text-muted); margin:14px 0 0; text-align:center; }
.wa-alt { text-align:center; margin:14px 0 0; font-size:.9rem; color:var(--text-muted); }
.wa-alt a { color:var(--whatsapp); font-weight:700; }

/* ---- custom select (Google-style dropdown) ---- */
.select { position:relative; }
.select__btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font:inherit; text-align:left; color:var(--navy); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; transition:border-color .18s, box-shadow .18s; }
.select__btn:focus-visible, .select.open .select__btn { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.select__chev { flex:0 0 auto; width:18px; height:18px; color:var(--text-muted); transition:transform .2s ease; }
.select.open .select__chev { transform:rotate(180deg); }
.select__menu { position:absolute; z-index:5; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px; list-style:none;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  max-height:264px; overflow:auto; display:none; animation:pop .14s ease; }
.select.open .select__menu { display:block; }
.select__opt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); font-size:.95rem; color:var(--text); cursor:pointer; }
.select__opt:hover, .select__opt.active { background:var(--accent-soft); color:var(--accent-text); }
.select__opt[aria-selected="true"] { font-weight:600; color:var(--accent-text); }
.select__opt .tick { flex:0 0 auto; width:17px; height:17px; opacity:0; }
.select__opt[aria-selected="true"] .tick { opacity:1; }

/* ---- success ---- */
.success { display:none; text-align:center; padding:10px 0 6px; }
.modal__card.is-done form, .modal__card.is-done .wa-alt { display:none; }
.modal__card.is-done .success { display:block; }
.success .check { width:56px; height:56px; margin:0 auto 16px; border-radius:var(--radius-full);
  background:rgba(14,122,52,.10); color:var(--whatsapp); display:grid; place-items:center; font-size:1.6rem; font-weight:700; }
.success h3 { margin:0 0 8px; font-size:1.3rem; }
.success p { margin:0; color:var(--text-2); }