/* Request forms (the free assessment and every service). A light panel on the charcoal page.
   Uses the tokens in styles.css. */
.panel { background: var(--white); color: var(--body); border-radius: 24px; padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); position: relative; }
.panel h2, .panel h3, .panel legend { color: var(--ink); }
.panel a { color: var(--ink); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel-head b { font: 600 1.25rem/1.2 var(--display); color: var(--ink); }
.panel-head span { font-size: .875rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.panel-head span svg { width: 16px; height: 16px; color: var(--teal); }

fieldset { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
fieldset + fieldset { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; }
legend { font: 600 1.375rem/1.2 var(--display); color: var(--ink); padding: 0; margin-bottom: 18px; display: flex; align-items: center; gap: 12px;
  float: left; width: 100%; }           /* float: keeps the legend below the divider instead of on it */
legend + * { clear: both; }
legend .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 .875rem/1 var(--text); color: #16191D; background: var(--teal); }

.field { margin-bottom: 20px; }
.field label, .field .label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.opt { font-weight: 500; color: var(--muted); font-size: .875rem; margin-left: 6px; }
.hint { margin-top: 6px; font-size: .875rem; color: var(--muted); }
.field input[type=text], .field input:not([type]), .field input[type=email], .field input[type=password], .field input[type=url], .field textarea, .field select {
  width: 100%; font: 400 1rem/1.45 var(--text); color: var(--ink); background: var(--white);
  border: 1.5px solid #CFCCC5; border-radius: 12px; padding: .8em .9em; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.6em;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%231F2328' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8em center / 18px no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: #A3A6AB; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* File pickers look like drop zones */
.file { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed #CFCCC5; border-radius: 14px;
  background: #FAFAF8; cursor: pointer; transition: border-color .15s, background-color .15s; }
.file:hover, .file:focus-within { border-color: var(--teal); background: #F3FAF9; }
.file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file .f-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--teal-tint); color: #0F6E6A; display: grid; place-items: center; flex: none; }
.file .f-ico svg { width: 20px; height: 20px; }
.file .f-txt { min-width: 0; font-size: .9375rem; color: var(--body); }
.file .f-txt b { display: block; color: var(--ink); font-weight: 600; }
.file .f-txt span { display: block; font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file.has-file { border-style: solid; border-color: var(--teal); background: #F3FAF9; }
.other { margin-top: 10px; }

/* Choice chips (radio buttons and checkboxes) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.chips input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chips label {
  display: inline-block; margin: 0; font-weight: 500; color: var(--body); cursor: pointer;
  border: 1.5px solid #CFCCC5; border-radius: 999px; padding: .55em 1.05em; font-size: .9375rem;
  transition: border-color .12s, background-color .12s, color .12s;
}
.chips label:hover { border-color: var(--muted); }
.chips input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chips input:focus-visible + label { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Big option cards (plan / what you need) */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.options label { display: block; margin: 0; padding: 16px 16px 16px 48px; border: 1.5px solid #CFCCC5; border-radius: 14px; cursor: pointer; position: relative;
  font-weight: 500; color: var(--body); transition: border-color .15s, background-color .15s; height: 100%; }
.options label::before { content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9B6AF; background: var(--white); }
.options label b { display: block; color: var(--ink); font-weight: 600; }
.options label span { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }
.options input:checked + label { border-color: var(--ink); background: #F7F7F5; }
.options input:checked + label::before { border: 5px solid var(--ink); }
.options input:focus-visible + label { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (max-width: 560px) { .options { grid-template-columns: 1fr; } }

.how { margin-top: 8px; font-size: .9375rem; }
.how summary { cursor: pointer; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.how p { margin-top: 8px; }

.consent { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 8px; }
.check { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; color: var(--body) !important; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }

.bad input, .bad textarea, .bad select, .bad .chips label, .bad .options label, .bad .file { border-color: var(--low); }
.err { margin-top: 6px; font-size: .875rem; color: var(--low); font-weight: 500; }
.form-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #F6E9E5; color: #7E3B2B; font-size: .9375rem; }
.submit { width: 100%; padding: 1.05em 1.4em; font-size: 1.0625rem; margin-top: 6px; }
.submit:disabled { opacity: .7; cursor: progress; }
.after-submit { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

.done { outline: none; text-align: center; padding: 18px 0 6px; }
.done .tick { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #16191D; }
.done .tick svg { width: 32px; height: 32px; }
.done h2 { font-size: clamp(1.75rem, 3.6vw, 2.25rem); }
.done p { margin: 14px auto 0; max-width: 32em; }
.done .btn { margin-top: 10px; }

/* Booking calendar (career-call.html, booking.js): month on the left, that day's times on the right */
.booking { margin-bottom: 8px; }
.cal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; border: 1.5px solid #CFCCC5; border-radius: 16px; padding: 16px; min-height: 300px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font: 600 1.0625rem/1.2 var(--display); color: var(--ink); }
.cal-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); color: var(--ink);
  font: 500 1.25rem/1 var(--text); cursor: pointer; display: grid; place-items: center; }
.cal-nav button:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav button:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-wd { font-size: .75rem; font-weight: 600; color: var(--muted); padding: 4px 0; }
.cal-d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font: 500 .9375rem/1 var(--text); border: 0; padding: 0; max-width: 42px; width: 100%; margin: 0 auto; }
button.cal-d { background: var(--teal-tint); color: #0B6E6A; cursor: pointer; font-weight: 600; transition: background-color .12s, color .12s; }
button.cal-d:hover { background: #CDEBE8; }
button.cal-d.on { background: var(--ink); color: var(--white); }
.cal-d.off { color: #B5B8BD; }
.cal-times { border-left: 1px solid var(--line); padding-left: 18px; min-width: 0; display: flex; flex-direction: column; }
.cal-day { font-weight: 600; color: var(--ink); margin: 6px 0 12px; }
.cal-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; align-content: start; padding: 2px; }
.cal-t { border: 1.5px solid #CFCCC5; background: var(--white); color: var(--ink); border-radius: 10px; padding: .6em .4em; font: 600 .9375rem/1 var(--text); cursor: pointer; transition: border-color .12s, background-color .12s; }
.cal-t:hover { border-color: var(--ink); }
.cal-t.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cal-d:focus-visible, .cal-t:focus-visible, .cal-nav button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cal-tz { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .875rem; color: var(--muted); }
.cal-tz svg { width: 16px; height: 16px; color: var(--teal); }
.cal-tz label { display: inline; margin: 0; font-weight: 500; color: var(--muted); }
.field .cal-tz select { width: auto; padding: .35em 2.2em .35em .7em; font-size: .875rem; border-radius: 8px; background-size: 15px; }
.cal-picked { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--teal-tint); color: #0B4F4C; font-size: .9375rem; display: flex; gap: 10px; align-items: center; }
.cal-picked svg { width: 18px; height: 18px; flex: none; color: #0B6E6A; }
.cal-msg { margin: 12px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--paper); font-size: .9375rem; }
.booking.is-loading .cal { opacity: .55; }
.booking.is-loading .cal-day::after { content: " · loading open times…"; font-weight: 400; color: var(--muted); }
.booking.is-closed .cal, .booking.is-closed .cal-tz { display: none; }
.bad .cal { border-color: var(--low); }
@media (max-width: 640px) {
  .cal { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .cal-times { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .cal-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }
}

/* Payment step, shown after a form is sent */
.done .sum { margin: 22px auto 0; max-width: 26em; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px; }
.done .sum div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.done .sum div:last-child { border-bottom: 0; }
.done .sum dt { color: var(--muted); }
.done .sum dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.done .pay-go { margin-top: 20px; width: 100%; max-width: 26em; }
.pay-soon { margin: 18px auto 0; max-width: 26em; text-align: left; display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--teal-tint); color: #0B4F4C; font-size: .9375rem; }
.pay-soon svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #0B6E6A; }
.pay-soon p { margin: 0 !important; }
.pay-soon b { color: #0B4F4C; }
.secure { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--muted); text-wrap: balance; }
.secure svg { width: 15px; height: 15px; color: var(--teal); vertical-align: -2px; margin-right: 5px; }
.options label b .p { float: right; }
.options.one { grid-template-columns: minmax(0, 1fr); }
.options label b .p { display: inline; float: right; margin: 0 0 0 12px; color: var(--ink); font-size: 1rem; }
.panel [hidden] { display: none !important; }
.panel .btn-dark { color: var(--white); }
.options input:disabled + label { opacity: .45; cursor: not-allowed; }

/* CV design picker (cv-resume.html): a tiny drawing of each design */
.options.designs-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options.three { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.designs-pick label { padding: 14px 14px 14px 44px; }
.designs-pick label::before { top: 14px; left: 14px; }
.cvp { display: grid; gap: 4px; width: 100%; max-width: 150px; aspect-ratio: 8.5 / 7; padding: 9px; margin: 0 0 10px; background: #fff; border: 1px solid #E3E1DC; border-radius: 6px; box-sizing: border-box; align-content: start; }
.cvp b, .cvp s, .cvp u { display: block; height: 4px; border-radius: 2px; background: #cfd3d8; text-decoration: none; }
.cvp b { height: 8px; width: 60%; background: #1F2328; }
.cvp u { height: 3px; width: 45%; background: #14A39E; margin-top: 3px; }
.cvp-classic b { margin: 0 auto; }
.cvp-modern { padding-top: 0; }
.cvp-modern b { width: calc(100% + 18px); margin: 0 -9px 2px; height: 16px; border-radius: 0; background: #14A39E; }
.cvp-modern u { background: #0E7C78; width: 35%; }
.cvp-minimal { gap: 3px; }
.cvp-minimal b { background: #000; width: 50%; height: 6px; }
.cvp-minimal u { background: #000; width: 100%; height: 1px; }
.cvp-executive b { margin: 0 auto; background: #1B2A41; width: 55%; }
.cvp-executive u { background: #1B2A41; width: 100%; height: 2px; }