/* =================================================================
   WP JOB OPENINGS — AGC Theme Overrides
   Targets: single job page + application form
   ================================================================= */

/* ── Page wrapper ────────────────────────────────── */
.awsm-job-single-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-6);
}

/* ── Job content body ────────────────────────────── */
.awsm-job-entry-content {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-10);
}

/* ── Strip plugin's own wrapper styling ──────────── */
.awsm-job-form,
.awsm-job-form-inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Application form — single card ─────────────── */
.awsm-application-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-8);
}

@media (max-width: 600px) {
  .awsm-application-form { padding: var(--space-8) var(--space-6); }
}

/* Hide the inline success/error message — we use a modal instead */
.awsm-application-message { display: none !important; }

/* ── Form heading ────────────────────────────────── */
.awsm-job-form-inner > h3,
.awsm-application-form h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-gold);
  letter-spacing: -.01em;
}

/* ── Field groups ────────────────────────────────── */
.awsm-job-form-group {
  margin-bottom: var(--space-5) !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Labels ──────────────────────────────────────── */
.awsm-job-form-group > label,
.awsm-job-form label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: var(--color-navy) !important;
  margin-bottom: 0 !important;
  display: block;
}

/* Required asterisk */
.awsm-job-form-group label .awsm-job-form-error {
  color: #c0392b;
  font-size: .85em;
  margin-left: 2px;
  font-weight: 400;
}

/* ── All inputs, selects, textareas ──────────────── */
.awsm-job-form-field.awsm-job-form-control,
.awsm-job-form .awsm-job-form-control {
  width: 100% !important;
  padding: .75rem 1rem !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-navy) !important;
  background: var(--color-off-white) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

.awsm-job-form-field.awsm-job-form-control:focus,
.awsm-job-form .awsm-job-form-control:focus {
  border-color: var(--color-gold) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(196,155,32,.15) !important;
}

.awsm-job-form-field.awsm-job-form-control:hover,
.awsm-job-form .awsm-job-form-control:hover {
  border-color: var(--color-gold-light) !important;
}

/* Textarea */
textarea.awsm-job-form-control {
  min-height: 130px !important;
  resize: vertical !important;
}

/* Select arrow */
select.awsm-job-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230B1E3D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

/* ── File inputs ─────────────────────────────────── */
.awsm-job-form-field.awsm-form-file-control,
.awsm-form-file-control {
  padding: 0 !important;
  border: 2px dashed var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-blue-pale) !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  display: block !important;
}

.awsm-form-file-control:hover {
  border-color: var(--color-gold) !important;
  background: rgba(196,155,32,.05) !important;
}

/* The actual <input type="file"> inside */
input[type="file"].awsm-job-form-control {
  padding: .65rem 1rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-muted) !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* Help text under file inputs */
.awsm-job-form-group small {
  font-size: var(--font-size-xs) !important;
  color: var(--color-text-muted) !important;
  display: block;
  margin-top: var(--space-1);
}

/* ── Inline group (radio/checkbox rows) ──────────── */
.awsm-job-inline-group {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
}

.awsm-job-inline-group label {
  font-size: var(--font-size-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
  line-height: 1.5 !important;
  cursor: pointer;
}

.awsm-job-inline-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-gold);
  margin-top: 3px;
  flex-shrink: 0;
}

/* ── Error messages ──────────────────────────────── */
.awsm-job-form-error {
  font-size: var(--font-size-xs) !important;
  color: #b91c1c !important;
  margin-top: var(--space-1) !important;
}

/* ── Success / error banners ─────────────────────── */
.awsm-application-message {
  padding: var(--space-5) var(--space-6) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  margin-bottom: var(--space-6) !important;
}

.awsm-application-message.awsm-success-message {
  background: rgba(39,174,96,.08) !important;
  border: 1px solid rgba(39,174,96,.3) !important;
  color: #1a6b3c !important;
}

.awsm-application-message.awsm-error-message {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #b91c1c !important;
}

/* ── Submit button ───────────────────────────────── */
.awsm-application-submit-btn,
.awsm-job-form input[type="submit"],
.awsm-job-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  padding: .9rem 2.8rem !important;
  background: var(--color-gold) !important;
  color: var(--color-navy) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(196,155,32,.3) !important;
  transition: background .2s, transform .18s, box-shadow .2s !important;
  margin-top: var(--space-4) !important;
}

.awsm-application-submit-btn:hover,
.awsm-job-form input[type="submit"]:hover {
  background: #b38a18 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(196,155,32,.38) !important;
}

.awsm-application-submit-btn:active,
.awsm-job-form input[type="submit"]:active {
  transform: translateY(0) !important;
}

/* ── Section dividers between field groups ───────── */
.awsm-job-form-group + .awsm-job-form-group {
  padding-top: 0;
}

/* Visual separator before file upload section */
.awsm-job-form-group:has(input[type="file"]):first-of-type,
.awsm-job-form-group:nth-child(4) {
  margin-top: var(--space-2);
}

/* ── Role question groups — hidden until JS runs ─── */
.awsm-job-form-group[data-agc-role] {
  display: none;
}

/* ── Specifications row (job meta below title) ───── */
.awsm-job-specifications-container {
  margin-bottom: var(--space-8) !important;
}

.awsm-job-specifications-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.awsm-job-specifications-row li {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: var(--color-blue-pale) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-full) !important;
  padding: .3rem .9rem !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-navy) !important;
  font-weight: 500 !important;
}

/* =================================================================
   AGC SUCCESS MODAL
   ================================================================= */
.agc-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.agc-modal[hidden] { display: none; }

.agc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,22,40,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.agc-modal__box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(10,22,40,.3);
  animation: agcModalIn .35s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes agcModalIn {
  from { opacity:0; transform:scale(.88) translateY(20px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

.agc-modal__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(39,174,96,.1);
  color: #27ae60;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
}

.agc-modal__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
}

.agc-modal__body {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-8);
}

.agc-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.agc-modal__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .85rem 2rem;
  background: #25D366;
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s, transform .18s;
  width: 100%;
  justify-content: center;
}
.agc-modal__whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  color: #fff;
}

.agc-modal__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .85rem 2rem;
  background: #0A66C2;
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s, transform .18s;
  width: 100%;
  justify-content: center;
}
.agc-modal__linkedin:hover {
  background: #004182;
  transform: translateY(-2px);
  color: #fff;
}

.agc-modal__close-btn {
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .6rem 2rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  width: 100%;
  transition: border-color .2s, color .2s;
}
.agc-modal__close-btn:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* ── Hide cover letter + ghost audio file input ── */
.awsm-job-form-group:has(#awsm-applicant-letter) { display: none !important; }
.awsm-job-form-group:has(#agc-audio-intro) { display: none !important; }

/* ── Audio recorder UI ───────────────────────── */
.agc-recorder {
  margin-top: var(--space-3);
}

.agc-recorder__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.agc-recorder__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .65rem 1.4rem;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .18s;
}

.agc-recorder__btn--record {
  background: var(--color-gold);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(196,155,32,.28);
}
.agc-recorder__btn--record:hover { background: #b38a18; transform: translateY(-1px); }

.agc-recorder__btn--stop {
  background: #e53e3e;
  color: #fff;
  animation: agcPulse 1.2s ease-in-out infinite;
}
.agc-recorder__btn--stop:hover { background: #c53030; }

@keyframes agcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(229,62,62,0); }
}

.agc-recorder__timer {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-navy);
  min-width: 3rem;
}

.agc-recorder__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

.agc-recorder__playback {
  margin-top: var(--space-4);
  width: 100%;
  border-radius: var(--radius-md);
}