
/* Base */
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #222; }

/* Layout: everything can shrink to screen width */
.jv-wrapper, .jv-form, .jv-apply-form, form,
.jv-form-field, .jv-attachment-uploader, .jv-file-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Inputs and selects fill their container */
.jv-input, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  max-width: 100%;
  font-size: 16px;            /* prevents iOS zoom */
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

#applicationForm {
  max-width: 100%;          /* your existing width */
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Labels */
.jv-form-field-label { display: block; margin: 10px 0 6px; font-weight: 600; }

/* Buttons */
button, .jv-button {
  display: inline-block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: #1565d8;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
button:disabled, .jv-button:disabled { opacity: .6; cursor: default; }

/* Keep submit/save buttons visually consistent */
.jv-submit-section {
  text-align: center;
  margin-top: 24px;
}

.jv-submit-section button,
.jv-submit-section .jv-button {
  width: auto;
  min-width: 160px;
  max-width: 80%;
  display: inline-block;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 10px;
}

/* Keep them centered horizontally */
.jv-submit-section .jv-button + .jv-button {
  margin-left: 10px;
}

/* Make them stack on very small screens */
@media (max-width: 420px) {
  .jv-submit-section .jv-button {
    display: block;
    width: 100%;
    margin: 8px 0;
  }
}



/* Sections/cards spacing */
.jv-apply-section, .card, .jv-attachment-uploader { margin: 12px 0; }
.card { background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); padding: 16px; }

/* Lists */
.jv-file-list { padding-left: 18px; }

/* Status text */
.ok { color: #1b9e4b; font-weight: 600; }
.bad { color: #c62828; font-weight: 600; }

/* Make labels above upload buttons non-click-blocking if you kept `for=` */
label[for="resumeFile"], label[for="coverLetterFile"] { pointer-events: none; }

/* Larger screens center the form nicely */
@media (min-width: 768px) {
  .container, .jv-wrapper, .jv-apply-form form, form {
    max-width: 560px;
    margin: 0 auto;
  }
}

a {
  display: inline-block;
  margin-top: 1.5rem; 
  color: #3779bb;
  text-decoration: none;
}


/* Comfortable tap targets */
.jv-select, .jv-input, select, textarea { min-height: 44px; }

/* Prevent horizontal scroll from legacy fixed widths */
* { max-width: 100%; }

/* Center the bottom action buttons */


/* Button sizing */
.jv-submit-section .jv-button{
  width:auto;
  min-width:170px;
  padding:12px 24px;
}

/* Stack on very small screens */
@media (max-width: 420px){
  .jv-submit-section{
    flex-direction:column;
    max-width:100%;
  }
  .jv-submit-section .jv-button{ width:100%; }

/* Restore upload grid buttons layout */
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }



/* Only center and size the bottom application buttons */
.submit-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.submit-actions .btn {
  width: auto;
  min-width: 170px;
  text-align: center;
}

/* Stack vertically on small screens */
@media (max-width: 480px) {
  .submit-actions { flex-direction: column; }
  .submit-actions .btn { width: 100%; }
}

/* Prevent labels above upload inputs from intercepting clicks */
label[for="resumeFile"], label[for="coverLetterFile"] {
  pointer-events: none;

/* Restore upload grid buttons layout */
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


}

 
 body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Let the form scale to screen width */
.jv-form-field, form, .jv-attachment-uploader {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Inputs and selects fill container */
.jv-input, select, input[type="text"], input[type="file"] {
  width: 100%;
  max-width: 100%;
}

/* Stack buttons nicely */
button, .jv-button {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  margin-top: 6px;
  font-size: 1rem;
}

/* Optional: center content on wider screens */
@media (min-width: 580px) {
  form {
    max-width: 1500px;
    margin: 0 auto;
  }
}

:root{--bg:#0b1220;--card:#0f172a;--muted:#a3b3d9;--text:#e6ecff;
--accent:#7aa2ff;--accent-2:#9bffb7;--border:#1f2a44;--danger:#ff6b6b;--ok:#22c55e;
--card-padding:20px;
 }
 *{box-sizing:border-box}
 body{margin:0;font-family:system-ui,-apple-system,Segoe
 UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1220
 0%,#0b1220 35%,#0d1530 100%);color:var(--text)}
 .wrap{max-width:1100px;margin:0 auto;padding:24px}
 header{display:flex;gap:12px;align-items:center;justify-content:space
between;margin:10px 0 20px}
 h1{margin:0;font-size:clamp(20px,4vw,28px)}
 .card{background:rgba(15,23,42,.7);border:1px solid var(--border);border-radius:18px;padding:var(--card-padding);box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter: blur(6px)}
 /* removed invalid rule:
 filter{blur:}
 */
 /* Simplify visual hierarchy: remove fieldset box borders to avoid "boxes inside boxes"
	 and instead underline the legend so sections remain visually separated. */
 fieldset{border:none;border-radius:0;padding:0;margin:14px 0}
 legend{color:var(--muted);padding:8px 6px 6px 6px;border-bottom:1px dashed var(--border);display:block;margin-bottom:12px}
 .row{display:grid;grid-template-columns:1fr;gap:12px}
 @media(min-width:720px){.row.two{grid-template-columns:repeat(2,
 1fr)}.row.three{grid-template-columns:repeat(3,1fr)}}
 label{display:block;font-weight:600;margin:6px 0}
 .hint{color:var(--muted);font-size:12px}
 input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px
 solid var(--border);background:#0c1a39;color:var(--text)}
input::placeholder,textarea::placeholder{color:#7f8ab2}
.bad-input{outline:2px solid rgba(255,107,107,0.9);box-shadow:0 0 0 3px rgba(255,107,107,0.06);}
/* allow specific rows to stretch full-width to the card border */
.full-bleed{width:calc(100% + (2 * var(--card-padding)));margin-left:calc(var(--card-padding) * -1);margin-right:calc(var(--card-padding) * -1);padding-left:var(--card-padding);padding-right:var(--card-padding);box-sizing:border-box}
 .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
 /* Fixed CSS typos: use proper property names and linear-gradient syntax */
 .btn{appearance:none;border:1px solid var(--border);background:linear-gradient(180deg,#1b2a52,#132040);color:var(--text);padding:12px 16px;border-radius:12px;font-weight:600;cursor:pointer}
 .btn-primary{background:linear-gradient(180deg,#5683ff,#3a64e1);border-color:#2d4fb6}
 .pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#0c1a39;border:1px solid var(--border);color:var(--muted);font-size:12px;margin-top:4px}
 .status{margin-top:12px;font-size:14px}
 .ok{color:var(--ok)} .bad{color:var(--danger)}
 .sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:
 1px;overflow:hidden}
 
 
 

}
