:root{
  --bg-from:#000000;
  --bg-to:#0e5771;
  --cta:#0EC4FF;
  --card:#101318;
  --card-border:#232833;
  --chip:#0b2531;
  --text:#EAF3F7;
  --muted:#8FA3AD;
  --pill:#0a1f29;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2);
}
*{box-sizing:border-box}
/* Fix: CSS display rules override the HTML hidden attribute — this restores correct behaviour */
[hidden]{display:none !important;}
body{
  margin:0;
  font-family:'Montserrat', sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 700px at 60% -20%, var(--bg-to) 0%, #062634 35%, var(--bg-from) 70%) fixed, #000;
}
.container{width:min(1100px, 92vw); margin:0 auto;}

/* Header */
.topbar{display:flex; align-items:center; gap:12px; padding:18px 0;}
/* mix-blend-mode:screen keeps light logo elements visible on dark bg.
   If your logo still appears as a white box, replace crooton-logo.png
   with a version exported with a transparent (not white) background. */
.logo{height:32px; mix-blend-mode:screen;}
.tag{font-size:12px; color:#cfd8dc; background:#0a0a0a; border:1px solid #1f232b; padding:6px 10px; border-radius:999px}

/* Hero */
.hero{position:relative; margin-top:8px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, rgba(14,87,113,.65), rgba(2,12,16,.9)); border:1px solid #153a49; box-shadow: var(--shadow);}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; padding:40px clamp(20px, 4vw, 48px); align-items:center;}
.hero h1{font-size: clamp(28px, 4vw + 10px, 46px); margin:0 0 14px 0;}
.hero p{max-width:55ch; color:var(--muted); margin:0 0 22px 0}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-img{width:100%; max-width:380px; aspect-ratio:1/1; background:url('images/Hero.png') center/contain no-repeat transparent;}
.search-row{display:flex; gap:12px; align-items:center}
.search{flex:1; display:flex; align-items:center; gap:10px; background:#021318; border:1px solid #163545; padding:12px 14px; border-radius:999px;}
.search input{flex:1; background:transparent; border:0; outline:0; color:var(--text); font:500 14px/1 'Montserrat', sans-serif}

/* CTA button (shared) */
.cta{border:0; border-radius:999px; padding:12px 20px; font:700 14px/1 'Montserrat',sans-serif; background: radial-gradient(100% 100% at 70% 10%, #53dbff 0, var(--cta) 45%, #0da0d1 100%); color:#001018; cursor:pointer; transition:opacity .2s;}
.cta:hover{opacity:.88;}
.cta-full{width:100%; padding:14px; font-size:15px;}

/* Job list */
h2.section{margin:28px 0 14px 0; font-size:20px}
.list{display:grid; gap:14px;}
.card{background:linear-gradient(180deg, rgba(10,14,19,.9), rgba(10,14,19,.85)); border:1px solid var(--card-border); border-radius:14px; padding:16px 18px; transition: all .25s ease;}
.card:hover{transform: translateY(-4px) scale(1.01); box-shadow: 0 0 18px rgba(14,196,255,.6), 0 12px 20px rgba(0,0,0,.3); border-color: var(--cta);}
.card h3{margin:0 0 8px 0; font-size:14px;}
.meta{display:flex; flex-wrap:wrap; gap:10px; color:#8FA3AD; font-size:12px}
.chips{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.chip{font-size:11px; color:#B9D4DE; background:#0b2531; border:1px solid #183947; padding:6px 10px; border-radius:9px}

/* Card footer: salary + apply button */
.card-footer{display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:12px; flex-wrap:wrap;}
.salary{font-weight:800; font-size:12px; color:#dff6ff; background:linear-gradient(180deg, #0a1f29, #07151c); border:1px solid #163545; padding:10px 14px; border-radius:999px; white-space:nowrap;}
.apply-btn{border:1px solid var(--cta); border-radius:999px; padding:8px 18px; font:600 12px/1 'Montserrat',sans-serif; background:transparent; color:var(--cta); cursor:pointer; transition: all .2s ease; white-space:nowrap;}
.apply-btn:hover{background:var(--cta); color:#001018;}

/* Footer */
footer{margin-top:48px; border-top:1px solid #1a2330; padding:22px 0 28px;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-copy{font-size:12px; color:var(--muted);}
.footer-links{display:flex; gap:20px;}
.footer-links a{font-size:12px; color:var(--muted); text-decoration:none; transition:color .2s;}
.footer-links a:hover{color:var(--cta);}

/* Modal overlay */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:100;
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}

/* Modal panel */
.modal{
  background:linear-gradient(160deg,#0d1419,#0a0e12);
  border:1px solid #1e2c38;
  border-radius:18px;
  padding:28px;
  width:100%; max-width:500px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.modal-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:16px;}
.modal-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 4px 0;}
.modal-header h2{margin:0; font-size:16px; line-height:1.35; font-weight:700;}
.modal-close{background:none; border:1px solid #2a3a46; color:var(--muted); border-radius:999px; width:32px; height:32px; font-size:15px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; font-family:inherit;}
.modal-close:hover{border-color:var(--cta); color:var(--cta);}

/* Form fields */
.form-row{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
.form-row label{font-size:12px; font-weight:600; color:var(--text);}
.form-row input,
.form-row textarea{
  background:#020d12;
  border:1px solid #1e2c38;
  border-radius:10px;
  padding:11px 14px;
  color:var(--text);
  font:500 13px/1.4 'Montserrat',sans-serif;
  outline:none;
  transition:border-color .2s;
  resize:vertical;
}
.form-row input::placeholder,
.form-row textarea::placeholder{color:#3d5566;}
.form-row input:focus,
.form-row textarea:focus{border-color:var(--cta);}
.form-row input.error,
.form-row textarea.error{border-color:#ff4d6a;}
.form-error{font-size:11px; color:#ff4d6a; display:none;}
.form-row.has-error .form-error{display:block;}
.req{color:var(--cta);}
.optional{color:var(--muted); font-weight:400;}
.form-note{font-size:11px; color:var(--muted); margin:0 0 16px 0;}

/* Job detail panel */
.detail-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.detail-pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#B9D4DE; background:#0b2531; border:1px solid #183947; padding:6px 12px; border-radius:999px; white-space:nowrap;}
.detail-pill::before{font-size:13px; line-height:1;}
.detail-pill-company::before{content:'🏢';}
.detail-pill-location::before{content:'📍';}
.detail-pill-type::before{content:'💼';}
/* Salary — standalone prominent badge */
.detail-salary-wrap{margin:0 0 20px;}
.detail-salary-badge{display:block; font-size:20px; font-weight:800; color:var(--cta); background:linear-gradient(135deg,rgba(14,196,255,.12),rgba(14,196,255,.05)); border:1px solid rgba(14,196,255,.35); padding:16px 20px; border-radius:14px; text-align:center; letter-spacing:-.01em;}
/* Section headings */
.detail-section-label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:18px 0 10px; padding-top:16px; border-top:1px solid #1a2530;}
/* Description scroll area */
.detail-description{font-size:13px; color:#a8bdc7; line-height:1.8; max-height:260px; overflow-y:auto; padding-right:6px; white-space:pre-wrap; word-break:break-word;}
.detail-description::-webkit-scrollbar{width:4px;}
.detail-description::-webkit-scrollbar-track{background:transparent;}
.detail-description::-webkit-scrollbar-thumb{background:#1e2c38; border-radius:4px;}
#panelDetails .cta-full{margin-top:24px;}

/* Clickable card */
.card{cursor:pointer;}

/* Back button */
.modal-back{background:none; border:none; color:var(--muted); font:600 12px/1 'Montserrat',sans-serif; cursor:pointer; padding:0 0 16px 0; display:flex; align-items:center; gap:6px; transition:color .2s;}
.modal-back:hover{color:var(--cta);}

/* Side-by-side first / last name */
.name-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

/* File upload */
.form-label-text{font-size:12px; font-weight:600; color:var(--text); display:block; margin-bottom:5px;}
.file-upload-label{
  display:flex; align-items:center; gap:10px;
  background:#020d12; border:1px dashed #2a3d4d; border-radius:10px;
  padding:12px 14px; cursor:pointer; transition:border-color .2s;
  font:500 12px/1.4 'Montserrat',sans-serif; color:#4a6070;
}
.file-upload-label:hover{border-color:var(--cta); color:var(--text);}
.file-upload-label.has-file{border-color:#1e6b4a; color:#6ee7b7;}
.file-upload-label.error{border-color:#ff4d6a;}
#cvError.visible{display:block;}
.file-upload-label input[type="file"]{display:none;}
.file-upload-icon{font-size:16px; flex-shrink:0;}
#fileNameDisplay{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Consent checkboxes */
.consents{display:flex; flex-direction:column; gap:4px; margin-bottom:14px;}
.consent-row{
  display:grid; grid-template-columns:20px 1fr; gap:10px;
  align-items:flex-start; cursor:pointer; padding:8px 0; user-select:none;
}
.consent-row input[type="checkbox"]{display:none;}
.checkbox-custom{
  width:18px; height:18px; border-radius:5px; flex-shrink:0; margin-top:1px;
  border:1.5px solid #2a3a46; background:#020d12;
  transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.consent-row input[type="checkbox"]:checked + .checkbox-custom{
  background:var(--cta); border-color:var(--cta);
}
.consent-row input[type="checkbox"]:checked + .checkbox-custom::after{
  content:'✓'; font-size:11px; font-weight:800; color:#001018; line-height:1;
}
.consent-row.error .checkbox-custom{border-color:#ff4d6a;}
.checkbox-text{font-size:12px; color:var(--muted); line-height:1.5;}
.consent-row:hover .checkbox-custom{border-color:var(--cta);}
.consent-error{font-size:11px; color:#ff4d6a; display:none; padding-left:28px;}
.consent-error.visible{display:block;}

/* Success state */
.apply-success{display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 0 4px;}
.success-icon{width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#0e5771,#0EC4FF); display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; margin-bottom:16px;}
.apply-success h3{margin:0 0 8px 0; font-size:18px;}
.apply-success p{color:var(--muted); margin:0 0 22px 0; font-size:13px; max-width:30ch;}

/* Jobs status (error / empty state) */
.jobs-status{padding:14px 0;}
.status-msg{color:var(--muted); font-size:14px; margin:0;}
.status-error{color:#ff8095;}

/* Submit-level error shown above the button */
.submit-error{font-size:12px; color:#ff8095; margin:0 0 10px 0; text-align:center;}

/* Skeleton loading cards */
.card.skeleton{pointer-events:none;}
.sk-line{border-radius:6px; background:linear-gradient(90deg, #0d1a22 25%, #163040 50%, #0d1a22 75%); background-size:200% 100%; animation:shimmer 1.4s infinite;}
.sk-title{height:14px; width:55%; margin-bottom:14px;}
.sk-meta{height:11px; width:80%; margin-bottom:14px;}
.sk-chips{height:11px; width:40%;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; padding:36px 18px 28px; text-align:center}
  .hero-img{max-width:260px; margin:0 auto;}
  .footer-inner{flex-direction:column; align-items:center; text-align:center;}
}
@media (max-width: 500px){
  .card-footer{flex-direction:column; align-items:flex-start;}
  .apply-btn{width:100%; text-align:center; padding:10px;}
}