/* Core layout */
.simian-course-search { border: 1px solid #eee; padding: 16px; border-radius: 8px; }
.simian-course-search form { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(200px, 1fr)); align-items: end; }
.simian-course-search label span { display:block; font-weight:600; margin-bottom:6px; }
.simian-course-search select, .simian-course-search input[type="text"], .simian-course-search input[type="email"], .simian-course-search input[type="date"] { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; }
.simian-btn, .simian-btn-submit-booking { padding:10px 16px; border:none; border-radius:8px; cursor:pointer; font-weight:600; background:#0b5cff; color:#fff; }
.simian-btn-outline { padding:10px 16px; border:1px solid #0b5cff; color:#0b5cff; background:#fff; border-radius:8px; cursor:pointer; font-weight:600; }

/* Responsive form */
@media (max-width: 640px) {
  .simian-course-search button[type=submit], .simian-course-search .simian-btn, .select-course { margin-bottom:10px; }
}

@media (max-width: 900px) {
  .simian-course-search form { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 600px) {
  .simian-course-search form { grid-template-columns: 1fr; }
}

/* Results table with responsive wrapper */
.sim-responsive-table { width: 100%; overflow-x: auto; }
table.sim-results { width:100%; border-collapse: collapse; margin-top: 12px; min-width: 720px; }
table.sim-results th, table.sim-results td { border:1px solid #eee; padding:10px; text-align:left; }
table.sim-results th { background:#f8f9fb; }
.sim-eligibility { margin: 10px 0; }

/* Booking form */
.sim-booking-form { border:1px solid #eee; padding:16px; border-radius:8px; margin-top:16px; }
#candidates { margin-top: 16px; }
.candidate-card { border:1px solid #ddd; padding:12px; border-radius:6px; margin-bottom:12px; background:#fafafa; }
.candidate-grid { display:grid; grid-template-columns: 1fr 200px; gap:12px; margin-bottom:8px; }
.remove-candidate { background:#ffdddd; color:#a00; border:1px solid #a00; padding:4px 8px; font-size:13px; border-radius:4px; cursor:pointer; transition:all .2s ease; }
.remove-candidate:hover { background:#cc0000; color:#fff; }
.sim-success { padding:12px; background:#e8fff0; border:1px solid #b6f0c9; border-radius:8px; }

@media (max-width: 600px) {
  .candidate-grid { grid-template-columns: 1fr; }
}

/* Small-screen table labels if you opt to stack rows later
   (we keep the desktop table but ensure scroll; this is optional scaffolding) */
table.sim-results td[data-label]:before { content: attr(data-label) ": "; font-weight:600; display:none; }
@media (max-width: 520px) {
  /* If you ever switch to stacked rows, enable display:block styles here */
}


/* Vertical table on mobile */
@media (max-width: 640px) {
  .sim-responsive-table { overflow-x: visible; }
  table.sim-results { border: 0; min-width: 0; }
  table.sim-results thead { display: none; }
  table.sim-results tr { display: block; border: 1px solid #eee; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
  table.sim-results td { display: grid; grid-template-columns: 140px 1fr; gap: 10px; border: 0; border-bottom: 1px solid #f1f1f1; }
  table.sim-results td:last-child { border-bottom: 0; }
  table.sim-results td::before { content: attr(data-label); font-weight: 600; }
  .sim-eligibility-row td { display: block; border: 0; }
  .eligibility-wrap { padding: 10px; }
}



/* --- v1.4.8: Mobile stacked table label fixes --- */
@media (max-width: 640px) {
  table.sim-results td[data-label]::before {
    display: block !important;
    content: attr(data-label) ": " !important;
    font-weight: 600;
    margin-bottom: 6px;
  }
  /* Left align eligibility + checkbox on mobile */
  .sim-eligibility-row td, .eligibility-wrap, .sim-consent {
    text-align: left !important;
  }
}


/* --- v1.4.8: Candidate form label positioning --- */
.candidate-grid label {
  display: block;
  font-weight: 600;
}
.candidate-grid label input {
  display: block;
  margin-top: 6px;
  width: 100%;
}


/* --- v1.4.9: Eligibility left align on mobile + candidate labels above inputs --- */
@media (max-width: 640px) {
  .sim-eligibility-row td,
  .sim-eligibility-row td *,
  .eligibility-wrap,
  .eligibility-wrap *,
  .sim-consent,
  .sim-consent * {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}
/* Candidate labels above inputs */
.candidate-grid label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.candidate-grid label input {
  display: block;
  margin-top: 6px;
  width: 100%;
}


/* --- v1.4.11: Mobile eligibility row full-width left align --- */
@media (max-width: 640px) {
  .sim-eligibility-row td {
    text-align: left !important;
    padding: 12px !important;
  }
  .eligibility-wrap {
    display: block !important;
    width: 100% !important;
  }
  .eligibility-wrap .eligibility-text {
    display: block;
    padding:20px;
    margin-right:50px;
    margin-bottom: 10px;
    text-align: left !important;
  }
  .sim-consent {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-top: 6px;
  }
  .sim-consent input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
  }
}

/* --- v1.4.11: Ensure candidate labels are above inputs --- */
.candidate-grid label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
.candidate-grid label input {
  display: block;
  width: 100%;
  margin-top: 6px;
}


/* v1.5.4 eligibility mobile layout */
@media (max-width: 640px){
  .sim-eligibility-row td{display:block !important; width:100% !important; text-align:left !important;}
  .eligibility-wrap{display:block !important; width:100% !important;}
  .eligibility-text{display:block !important; margin-bottom:8px;}
  .eligibility-checks{display:block !important;}
  .eligibility-checks .sim-consent{display:block !important;}
}


/* v1.5.6 eligibility layout */
.eligibility-checks .sim-consent{display:block;margin:6px 0}
.eligibility-text{font-size:var(--sim-eligibility-font-size)}
.eligibility-checks .sim-consent:first-of-type{background:var(--sim-eligibility-primary-bg)}
.eligibility-checks .sim-consent:nth-of-type(2){background:var(--sim-eligibility-secondary-bg)}


/* v1.5.7: subtle borders + accents for eligibility UI (CSS-only) */
.eligibility-text{
  border: 1px solid var(--sim-input-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.eligibility-checks{
  border: 1px solid var(--sim-input-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Each checkbox row with a soft left accent + hover feedback */
.eligibility-checks .sim-consent{
  position: relative;
  padding: 10px 12px 10px 14px;
  border: 1px dashed var(--sim-input-border);
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  margin: 8px 10px;
  /* subtle left accent using the primary button color */
  box-shadow: inset 3px 0 0 0 var(--sim-btn-bg);
}

.eligibility-checks .sim-consent:hover{
  border-color: var(--sim-btn-bg);
  box-shadow:
    inset 3px 0 0 0 var(--sim-btn-bg),
    0 1px 3px rgba(0,0,0,.06);
}

/* Keep inputs aligned nicely inside the bordered rows */
.eligibility-checks .sim-consent input[type="checkbox"]{
  margin-right: 8px;
  transform: translateY(1px);
}

/* Mobile stays stacked; large screens also stack as requested */
@media (min-width: 641px){
  .eligibility-checks .sim-consent{ display: block; }
}


/* v1.5.8: strong application of Settings colors (no logic changes) */
.simian-course-search .simian-btn,
.simian-course-search button[type="submit"],
.sim-responsive-table .select-course,
.sim-results .select-course{
  background: var(--sim-btn-bg) !important;
  color: var(--sim-btn-text) !important;
  border: 1px solid var(--sim-btn-bg) !important;
}

.simian-course-search input[type="text"],
.simian-course-search input[type="email"],
.simian-course-search input[type="tel"],
.simian-course-search input[type="date"],
.simian-course-search select,
#simian-booking-form input[type="text"],
#simian-booking-form input[type="email"],
#simian-booking-form input[type="tel"],
#simian-booking-form input[type="date"],
#simian-booking-form select{
  border: 1px solid var(--sim-input-border) !important;
}

.simian-course-search,
.simian-course-search *,
#simian-booking-form,
#simian-booking-form *{
  color: var(--sim-text) !important;
}

.sim-consent input[type="checkbox"],
#simian-booking-form input[type="checkbox"]{
  accent-color: var(--sim-checkbox) !important;
}


/* v1.5.9: enforce eligibility colors + stacked layout */
.eligibility-checks{ background: var(--sim-eligibility-bg) !important; }
.eligibility-text{ background: var(--sim-eligibility-text-bg) !important; font-size: var(--sim-eligibility-font-size) !important; }
.eligibility-checks .sim-consent{ display:block !important; }
.eligibility-checks .sim-consent:first-of-type{ background: var(--sim-eligibility-primary-bg) !important; }
.eligibility-checks .sim-consent:nth-of-type(2){ background: var(--sim-eligibility-secondary-bg) !important; }
.eligibility-checks .sim-consent input[type="checkbox"],
.sim-consent input[type="checkbox"]{ accent-color: var(--sim-checkbox) !important; }


/* v1.6.0: force eligibility colors + stacked rows */
.eligibility-checks{
  display: block !important;
  width: 100% !important;
  background: var(--sim-eligibility-bg) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-top: 8px !important;
}
.eligibility-checks .sim-consent{
  display: block !important;
  margin: 6px 0 !important;
  padding: 8px !important;
  border-radius: 6px !important;
}
.eligibility-checks .sim-consent:first-of-type{
  background: var(--sim-eligibility-primary-bg) !important;
}
.eligibility-checks .sim-consent:nth-of-type(2){
  background: var(--sim-eligibility-secondary-bg) !important;
}
.eligibility-checks .sim-consent input[type="checkbox"],
.sim-consent input[type="checkbox"]{
  accent-color: var(--sim-checkbox) !important;
}


/* v1.6.2: eligibility text/border color enforcement */
.sim-responsive-table tr.sim-eligibility-row td .eligibility-checks .sim-consent:first-of-type{
  color: var(--sim-eligibility-primary-text) !important;
  border: 1px solid var(--sim-eligibility-primary-border) !important;
}
.sim-responsive-table tr.sim-eligibility-row td .eligibility-checks .sim-consent:nth-of-type(2){
  color: var(--sim-eligibility-secondary-text) !important;
  border: 1px solid var(--sim-eligibility-secondary-border) !important;
}



/* v1.6.3: mobile equal buttons + margin, confirmation box */
@media (max-width: 640px){
  #simian-booking-form .add-candidate-btn,
  #simian-booking-form button[type="submit"],
  #simian-booking-form .simian-btn.submit-booking{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  #simian-booking-form .add-candidate-btn{ margin-bottom:10px !important; }
}
.sim-confirm-box{
  border: 1px solid var(--sim-btn-bg) !important;
  border-radius: 12px;
  padding: 18px;
  background: var(--sim-eligibility-secondary-bg) !important;
  color: var(--sim-text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-size: 1rem;
  position: relative;
}
.sim-confirm-box:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--sim-btn-bg);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}



/* v1.6.3: final color reinforcement */
.simian-course-search .simian-btn,
.simian-course-search button[type="submit"],
.sim-responsive-table .select-course,
.sim-results .select-course{ background:var(--sim-btn-bg)!important; color:var(--sim-btn-text)!important; border-color:var(--sim-btn-bg)!important; }
.simian-course-search input[type="text"], .simian-course-search input[type="email"], .simian-course-search input[type="tel"], .simian-course-search input[type="date"], .simian-course-search select,
#simian-booking-form input[type="text"], #simian-booking-form input[type="email"], #simian-booking-form input[type="tel"], #simian-booking-form input[type="date"], #simian-booking-form select{ border-color:var(--sim-input-border)!important; }
.simian-course-search, .simian-course-search *, #simian-booking-form, #simian-booking-form *{ color:var(--sim-text)!important; }
.sim-consent input[type="checkbox"], #simian-booking-form input[type="checkbox"]{ accent-color:var(--sim-checkbox)!important; }



/* Inline validation message for search form */
.scb-msg{
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff3cd;
  color: #7a5d00;
  border: 1px solid #ffe08a;
  border-radius: 6px;
  font-size: 14px;
  display: none;
}