.elementor-20800 .elementor-element.elementor-element-97bee18{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:-3%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-20800 .elementor-element.elementor-element-97bee18:not(.elementor-motion-effects-element-type-background), .elementor-20800 .elementor-element.elementor-element-97bee18 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-20800 .elementor-element.elementor-element-eca9416{text-align:center;}.elementor-20800 .elementor-element.elementor-element-eca9416 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:50px;color:var( --e-global-color-dc4184a );}.elementor-20800 .elementor-element.elementor-element-1c6fb27d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:4%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:4%;--padding-left:0%;--padding-right:0%;}.elementor-20800 .elementor-element.elementor-element-1c6fb27d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-20800 .elementor-element.elementor-element-50fb2029{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;border-style:none;--border-style:none;--border-radius:8px 8px 8px 8px;box-shadow:5px 5px 10px 10px rgba(235.89624481201173, 235.89624481201173, 235.89624481201173, 0.5);--padding-top:4%;--padding-bottom:4%;--padding-left:4%;--padding-right:4%;}.elementor-20800 .elementor-element.elementor-element-3693703{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 0% 0% 0%;}@media(max-width:1024px){.elementor-20800 .elementor-element.elementor-element-97bee18{--margin-top:-4%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-20800 .elementor-element.elementor-element-eca9416 .elementor-heading-title{font-size:44px;}.elementor-20800 .elementor-element.elementor-element-1c6fb27d{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;}}@media(max-width:767px){.elementor-20800 .elementor-element.elementor-element-97bee18{--margin-top:-8%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-20800 .elementor-element.elementor-element-eca9416 .elementor-heading-title{font-size:36px;line-height:1.5em;}.elementor-20800 .elementor-element.elementor-element-1c6fb27d{--margin-top:12%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}}@media(min-width:768px){.elementor-20800 .elementor-element.elementor-element-50fb2029{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-20800 .elementor-element.elementor-element-50fb2029{--width:100%;}}@media(min-width:2560px){.elementor-20800 .elementor-element.elementor-element-97bee18{--min-height:380px;}.elementor-20800 .elementor-element.elementor-element-1c6fb27d{--margin-top:2%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-20800 .elementor-element.elementor-element-50fb2029{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS *//* --- Existing CF7 form styles --- */
/* Row layout */
.cf7-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 4px;
  transition: all 0.3s ease;
}

/* Columns */
.cf7-col {
  flex: 1;
  min-width: 250px;
  box-sizing: border-box;
}

/* Label styling */
.cf7-col label {
  font-weight: 500;
  font-size: 15px;
  display: block;
  color: #333;
}

/* Inputs */
.cf7-col input,
.cf7-col textarea,
.cf7-col select,
.cf7-col .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 14px;
}

/* Focus effect */
.cf7-col input:focus,
.cf7-col textarea:focus,
.cf7-col select:focus {
  outline: none;
  border-color: #556b2f;
}

/* Textarea */
.cf7-col textarea {
  resize: vertical;
}

/* Fix date input */
.cf7-col input[type="date"] {
  width: 100%;
  display: block;
}

/* Radio buttons container */
/* Make CF7 radio buttons inline */
.wpcf7-radio {
  display: flex;
  gap: 25px; /* space between options */
  align-items: center;
padding:6px 12px !important;
}

/* Radio button inside label */
.wpcf7-radio label {
  display: flex;
  align-items: center;
  gap: 8px; /* space between button and text */
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

/* Style the actual radio button */
.wpcf7-radio input[type="radio"] {
  accent-color: #556b2f; /* your theme color */
  cursor: pointer;
  width: 16px;
  height: 16px;

}

/* Radio button */
.cf7-col input[type="radio"] {
  accent-color: #556b2f;
  cursor: pointer;
}


.interview{
    display: flex;
    align-items: left;
    justify-content: left;
}



/* SAFE ROW (Yes/No table style section) */
.safe-row {
  display: flex;
    background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;

}

.safe-row p {
  line-height:1.5em;
  width: 80%;
  margin: 0;
  padding: 15px;
  border-right: 1px solid #ccc;
}

.safe-row .wpcf7-form-control {
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.safe-row .wpcf7-list-item {
  margin: 0;
}

/* Submit button */
div.cf7-submit input[type="submit"] {
  background-color: #556b2f !important;
  color: #ffffff !important;
  padding: 12px 30px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-size: 15px;
  transition: all 0.3s ease;
}

div.cf7-submit input[type="submit"]:hover {
  background-color: #445722 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .cf7-row {
    flex-direction: column;
  }

  .safe-row {
    flex-direction: column;
  }

  .safe-row p,
  .safe-row .wpcf7-form-control {
    width: 100%;
  }
}

.general-note{
    background-color: #F3E7C7; /* light beige */
  color: #7A4E00 !important; /* dark brown text */
  border: 1px solid #E0CFA3 !important; /* soft border */
  border-left: 4px solid #C89B3C !important; /* accent line */
  padding: 12px 16px !important;
  font-size: 14px;
  border-radius: 2px !important;
  font-family: Arial, sans-serif;
}

/* --- NEW STYLES: Safeguarding Children Section / Inline Radios --- */
/* Section title for Safeguarding */

.safeguarding-note{
    color: #CC0000;
    font-size: 14px;
    background: #FFF0F0 !important;
     border-style: solid !important; 
  border-width: 1px 0px 1px 2px !important;
    padding:1% !important;
}

.safeguarding-request{
    font-size: 14px;
    font-style: italic;
}

.form-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0 15px;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}

.safe-last{
    margin-top: 1%;
}
/* Safe row improved layout */
.safe-row {
  flex-direction: column; /* override only for Safeguarding content to stack correctly */
    background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  margin-top: 2%;
  padding: 15px;
}

/* Question text */
.safe-row p {
  margin-bottom: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8em;
  border: none; /* remove border inside section */
  width: 100%; /* full width */
  padding: 0; /* remove extra padding */
}

/* Inline radio buttons inside Safe Row */
.safe-row .radio-inline {
  display: flex;
  gap: 25px; /* space between options */
  align-items: center;
  flex-wrap: wrap; /* wrap on small screens */
}

/* Each radio option */
.safe-row .radio-inline .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

/* Radio button style inside safe row */
.safe-row .radio-inline .wpcf7-list-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #556b2f;
  cursor: pointer;
}

/* Textarea for details */
.safe-row textarea.wpcf7-form-control {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
}

/* Mobile responsiveness for radio inline */
@media (max-width: 480px) {
  .safe-row .radio-inline {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* Declaration, DBS, and Data Protection styling */
.declaration-box,
.dbs-box,
.data-protection-box {
   background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

/* Headings */
.declaration-box h5,
.data-protection-box h6 {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}



/* Inline radios for DBS section */
.dbs-box .radio-inline {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dbs-box .radio-inline .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.dbs-box .radio-inline .wpcf7-list-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #556b2f;
  cursor: pointer;
}

/* Textareas for DBS section */
.dbs-box .textarea-wrapper textarea.wpcf7-form-control {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .dbs-box .radio-inline {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Health Questionnaire matches Safeguarding style */
.health-box {
   background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px;
  margin-bottom: 20px;
}

.health-box h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}

.health-box p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
}

.health-box .health-question {
  margin-bottom: 15px;
}

.health-box .radio-inline {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.health-box .radio-inline .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.health-box .radio-inline .wpcf7-list-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #556b2f;
  cursor: pointer;
}

.health-box .textarea-wrapper textarea.wpcf7-form-control,
.health-box .textarea-wrapper input.wpcf7-form-control {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
}

@media (max-width: 768px) {
  .health-box .radio-inline {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* Equal Opportunities box style matches Safeguarding/Health */
.equal-opps-box {
   background: #fff;
  border: 1px solid #e6e8ec !important;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 20px;
  margin-bottom: 20px;
}

.equal-opps-box h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #eee;
  padding-bottom: 6px;
}

.equal-opps-box h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.equal-opps-box p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* Inline checkboxes */
.equal-opps-box .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 6px;
}

.equal-opps-box .wpcf7-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
}

/* Inputs and textareas consistent */
.equal-opps-box input.wpcf7-form-control,
.equal-opps-box textarea.wpcf7-form-control {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  box-sizing: border-box;
}



/* Responsive */
/* ===== FORCE RADIO FULL WIDTH ON MOBILE ===== */
@media (max-width: 768px) {


  /* Target CF7 radio wrapper spans */
  .equal-opps-box .wpcf7-radio .wpcf7-list-item {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 8px 10px;
 
  transition: 0.2s;
  }

  /* Fix label alignment */
  .equal-opps-box .wpcf7-radio .wpcf7-list-item label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* Make radio clickable full width */
  .equal-opps-box .wpcf7-radio .wpcf7-list-item-label {
    width: 100%;
  }

  /* Ensure parent is stacked */
  .equal-opps-box .wpcf7-radio {
    display: block !important;
  }
}
.table-scroll{
width:100%;
overflow-x:auto;
}

/*new*/
/* ============================= */
/* EMPLOYMENT CARD DESIGN        */
/* ============================= */

.emp-history{
    font-size:16px;
    text-decoration: underline;
    font-weight:600;
}
/* Hide table headers */
.employment-table thead {
  display: none;
}

/* Card style for each row */
.employment-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
  transition: all 0.25s ease;
}

/* Hover effect */
.employment-table tbody tr:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  border-color: #d6dbe1;
}

/* Make "Reason for leaving" full width */
.employment-table td[data-label="Reason"] {
  flex: 100%; /* spans full card width */
}

/* td as field */
.employment-table td {
  border: none;
  flex: 1 1 calc(50% - 12px);
  padding: 0;
  position: relative;
}

/* td labels from TH using nth-child */
.employment-table td:nth-child(1):before {
  content: "Name and address of Employer";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.employment-table td:nth-child(2):before {
  content: "Job Title";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.employment-table td:nth-child(3):before {
  content: "Date from";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.employment-table td:nth-child(4):before {
  content: "Date to";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.employment-table td:nth-child(5):before {
  content: "Salary";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.employment-table td:nth-child(6):before {
  content: "Reason for leaving";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

/* Inputs styling */
.employment-table input,
.employment-table textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.employment-table input:focus,
.employment-table textarea:focus {
  outline: none;
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Remove button */
.remove-row {
  background:#dc3545;
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  transition:background 0.2s ease;
  text-align: left;
}

.remove-row:hover {
  background:#c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Add button */
.add-row {
  background: #556b2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align:right;
}

.add-row:hover {
  background: #465926;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Action row full width */
.employment-table td:last-child {
  flex: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

/* Mobile */
@media (max-width:768px) {
  .employment-table tbody tr {
    flex-direction: column;
  }

  .employment-table td {
    flex: 100%;
  }

  .employment-table td:last-child {
    justify-content: flex-start;
  }
}

/* Employment actions button spacing */
.employment-actions {
  margin-top: 10px;
  text-align: right;
}


/* ============================= */
/* EMPLOYMENT TABLE RESPONSIVE   */
/* ============================= */

@media (max-width:768px){

.employment-table thead{
display:none;
}

.employment-table,
.employment-table tbody,
.employment-table tr,
.employment-table td{
display:block;
width:100%;
}

.employment-table tr{
margin-bottom:20px;
border:1px solid #ddd;
background:#f9f9f9;
border-radius:6px;
padding:10px;
}

.employment-table td{
border:none;
border-bottom:1px solid #eee;
position:relative;
padding:12px 10px 12px 45%;
text-align:left;
}

.employment-table td:last-child{
border-bottom:none;
}

/* column labels */
.employment-table td:before{
content:attr(data-label);
position:absolute;
left:10px;
top:12px;
font-weight:600;
font-size:13px;
color:#333;
width:40%;
}

/* inputs full width */
.employment-table input,
.employment-table textarea{
width:100%;
}

/* buttons full width */
.add-row,
.remove-row{
width:100%;
margin-top:8px;
}

.employment-actions{
display:flex;
flex-direction:column;
gap:8px;
}

}

/* ============================= */
/* Education TABLE    */
/* ============================= */


/* Hide table headers */
.education-table thead {
  display: none;
  margin-top: 40px;
}

/* Card style for each row */
.education-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
}

/* td as field */
.education-table td {
  border: none;
  flex: 1 1 calc(50% - 12px);
  padding: 0;
  position: relative;
}

/* td labels from TH */
.education-table td:nth-child(1):before {
  content: "Name and address of School/College/University";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.education-table td:nth-child(2):before {
  content: "Subject or qualification gained";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.education-table td:nth-child(3):before {
  content: "Date from";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.education-table td:nth-child(4):before {
  content: "Date to";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

/* Inputs styling */
.education-table input,
.education-table textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.education-table input:focus,
.education-table textarea:focus {
  outline: none;
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Remove button */
.remove-education {
background:#dc3545;
color:white;
border:none;
padding:6px 14px;
border-radius:4px;
cursor:pointer;
font-size:13px;
transition:background 0.2s ease;
text-align: left;
}

.remove-education:hover {
    background:#c82333;
    transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Add button */
.add-education {
  background: #556b2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align:right;
}

.add-education:hover {
  background: #465926;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.education-actions{
margin-top:10px;
text-align: right;
}

/* Action row full width */
.education-table td:last-child {
  flex: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Mobile */
@media (max-width:768px) {
  .education-table tbody tr {
    flex-direction: column;
  }

  .education-table td {
    flex: 100%;
  }

  .education-table td:last-child {
    justify-content: flex-start;
  }
}
.emp-info{
    font-size:12px;
    font-weight: 900;
    width:20%;
}

.emp-detail{
    font-size:14px;
    line-height:1.8;
    margin: 0;
    padding: 0;
}

/*New*/
/* ============================= */
/* RELEVANT TRAINING CARD DESIGN */
/* ============================= */

/* Hide table headers */
.relevant-table thead {
  display: none;
}

/* Card style for each row */
.relevant-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
  transition: all 0.25s ease;
}

/* Hover effect */
.relevant-table tbody tr:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  border-color: #d6dbe1;
}

/* td as field */
.relevant-table td {
  border: none;
  flex: 1 1 calc(50% - 12px);
  padding: 0;
  position: relative;
}

/* td labels from TH using nth-child */
.relevant-table td:nth-child(1):before {
  content: "Training Provider / Institution";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.relevant-table td:nth-child(2):before {
  content: "Course / Qualification Gained";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.relevant-table td:nth-child(3):before {
  content: "Date from";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.relevant-table td:nth-child(4):before {
  content: "Date to";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}


/* Inputs styling */
.relevant-table input,
.relevant-table textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.relevant-table input:focus,
.relevant-table textarea:focus {
  outline: none;
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Remove button */
.remove-relevant {
  background:#dc3545;
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  transition:background 0.2s ease;
  text-align: left;
}

.remove-relevant:hover {
  background:#c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Add button */
.add-relevant {
  background: #556b2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align:right;
}

.add-relevant:hover {
  background: #465926;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Action row full width */
.relevant-table td:last-child {
  flex: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Mobile */
@media (max-width:768px) {
  .relevant-table tbody tr {
    flex-direction: column;
  }

  .relevant-table td {
    flex: 100%;
  }

  .relevant-table td:last-child {
    justify-content: flex-start;
  }
}

/* Add button container spacing */
.relevant-actions {
  margin-top: 10px;
  text-align: right;
}

/*New*/

/* ============================= */
/* OTHER EXPERIENCE / TENURE CARD DESIGN */
/* ============================= */

/* Hide table headers */
.other-experience-table thead {
  display: none;
}

/* Card style for each row */
.other-experience-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
  margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
  transition: all 0.25s ease;
}

/* Hover effect */
.other-experience-table tbody tr:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  border-color: #d6dbe1;
}

/* td as field */
.other-experience-table td {
  border: none;
  flex: 1 1 calc(50% - 12px);
  padding: 0;
  position: relative;
}

/* td labels from TH using nth-child */
.other-experience-table td:nth-child(1):before {
  content: "Date from";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.other-experience-table td:nth-child(2):before {
  content: "Date to";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.other-experience-table td:nth-child(3):before {
  content: "Explanation";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

/* Make Explanation field full width */
.other-experience-table td[data-label="Explanation"] {
  flex: 100%; /* take full width of the card */
}

/* Make the textarea fill the td */
.other-experience-table td[data-label="Explanation"] textarea {
  width: 100%;
  box-sizing: border-box; /* ensures padding is included */
}
/* Inputs styling */
.other-experience-table input,
.other-experience-table textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.other-experience-table input:focus,
.other-experience-table textarea:focus {
  outline: none;
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}


/* Last td (Action) aligned to right */
.other-experience-table td:last-child {
  flex: 100%; /* full width */
  display: flex;
  justify-content: flex-start; /* push button to the right */
  margin-top: 10px;
}

/* Remove button */
.remove-other-experience {
  background:#dc3545;
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  transition:background 0.2s ease;
  text-align: left;
}

.remove-other-experience:hover {
  background:#c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Add button */
.add-other-experience {
  background: #556b2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align:right;
}

.add-other-experience:hover {
  background: #465926;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Action row full width */
.other-experience-table td:last-child {
  flex: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Mobile */
@media (max-width:768px) {
  .other-experience-table tbody tr {
    flex-direction: column;
  }

  .other-experience-table td {
    flex: 100%;
  }

  .other-experience-table td:last-child {
    justify-content: flex-start;
  }
}

/* Add button container spacing */
.other-experience-actions {
  margin-top: 10px;
  text-align: right;
}

/*New*/
/* ============================= */
/* REFERENCE DETAILS CARD DESIGN */
/* ============================= */

/* Hide table headers */
.reference-table thead {
  display: none;
}

/* Card style for each row */
.reference-table tbody tr {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  padding: 22px;
      margin-top: 2%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  position: relative;
  transition: all 0.25s ease;
}

/* Hover effect */
.reference-table tbody tr:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  border-color: #d6dbe1;
}

/* td as field */
.reference-table td {
  border: none;
  flex: 1 1 calc(50% - 12px);
  padding: 0;
  position: relative;
}

/* Label above checkbox like other fields */
.reference-table td:nth-child(1)::before {
  content: "Current Employer";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

/* Container for checkbox + text */
.reference-table td:nth-child(1) .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 6px; /* space between checkbox and text */
  padding: 10px 12px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  background: #ffffff;
    flex: 1 1 calc(50% - 12px);
/* only wrap checkbox + text */
}

/* Hover effect like other inputs */
.reference-table td:nth-child(1) .wpcf7-list-item:hover {
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Checkbox itself */
.reference-table td:nth-child(1) input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Checkbox label inline */
.reference-table td:nth-child(1) span {
  font-size: 14px;
  line-height: 16px;
}
/* td labels from TH using nth-child */
.reference-table td:nth-child(1):before {
  content: "Current Employer";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(2):before {
  content: "Organisation name and address";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(3):before {
  content: "Name";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(4):before {
  content: "Job Title";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(5):before {
  content: "Tel No.";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(6):before {
  content: "Fax No.";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(7):before {
  content: "Email Address";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(8):before {
  content: "Capacity in which you know them";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

.reference-table td:nth-child(9):before {
  content: "Can we apply for this reference now";
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3a3a3a;
}

/* RADIO FIELD CONTAINER (same as other inputs) */
.reference-table td:nth-child(9) .wpcf7-form-control {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* Hover effect like other inputs */
.reference-table td:nth-child(9) .wpcf7-form-control:hover {
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Radio buttons normal size */
.reference-table td:nth-child(9) input[type="radio"] {
  width: auto;
  margin-right: 4px;
}

/* Remove default spacing from CF7 items */
.reference-table td:nth-child(9) .wpcf7-list-item {
  margin: 0;
}



.reference-table td:nth-child(9){
  flex: 1 1 100%;
}

/* Inputs styling */
.reference-table input,
.reference-table textarea,
.reference-table [type="checkbox"],
.reference-table [type="radio"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9dee4;
  border-radius: 7px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.reference-table input:focus,
.reference-table textarea:focus {
  outline: none;
  border-color: #556b2f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85,107,47,0.12);
}

/* Remove button */
.remove-reference {
  background:#dc3545;
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  transition:background 0.2s ease;
  text-align: left;
}

.remove-reference:hover {
  background:#c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Add button */
.add-reference {
  background: #556b2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align:right;
}

.add-reference:hover {
  background: #465926;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Action row full width */
.reference-table td:last-child {
  flex: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

/* Mobile */
@media (max-width:768px) {
  .reference-table tbody tr {
    flex-direction: column;
  }

  .reference-table td {
    flex: 100%;
  }

  .reference-table td:last-child {
    justify-content: flex-start;
  }
}

/* Add button container spacing */
.reference-actions {
  margin-top: 10px;
  text-align: right;
}/* End custom CSS */