/* Reset and base styling */
#emf-form, 
#emf-form * {
  font-family: 'Georgia', 'Times New Roman', serif !important;
  font-weight: 300 !important;
  color: #333 !important;
  box-sizing: border-box;
}

/* Transparent background */
#emf-form,
#emf-form div,
#emf-form table,
#emf-form td,
#emf-form tr {
  background-color: transparent !important;
  background: none !important;
}

/* Form container */
#emf-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Headings */
#emf-form h1 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 400 !important;
}

#emf-form h2 {
  font-size: 20px;
  margin: 25px 0 15px;
  font-weight: 400 !important;
}

#emf-form h3 {
  font-size: 18px;
  margin: 20px 0 10px;
  font-weight: 400 !important;
}

/* Logo container */
#emf-form .logo-container {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

#emf-form .logo {
  font-weight: 600 !important;
  font-size: 18px;
  margin-right: 10px;
}

#emf-form .company-name {
  font-size: 16px;
  letter-spacing: 1px;
}

/* Horizontal rule */
#emf-form hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 25px 0;
}

/* Form instructions */
#emf-form .form-instructions {
  font-style: italic;
  margin: 15px 0;
}

/* Grid container */
#emf-form .form-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

/* Field groups */
#emf-form .form-field-group {
  margin-bottom: 15px;
}

#emf-form .full-width {
  grid-column: 1 / -1;
}

/* Labels - ENHANCED to be larger than inputs */
#emf-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 400 !important;
  font-size: 1.1em !important; /* Make labels larger */
}

/* Required field indicator */
#emf-form .asterisk {
  color: #333;
}

/* Input fields */
#emf-form input[type="text"],
#emf-form input[type="email"],
#emf-form input[type="tel"],
#emf-form input[type="number"],
#emf-form input[type="password"],
#emf-form textarea,
#emf-form select {
  width: 100%;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  font-size: 0.9em !important; /* Make inputs smaller than labels */
  font-weight: 300 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.3s ease;
  display: grid;
}

/* Focus states */
#emf-form input:focus,
#emf-form textarea:focus,
#emf-form select:focus {
  border-bottom: 1px solid #000 !important;
  box-shadow: none !important;
}

/* Name fields styling */
#emf-form .name-fields {
  display: flex;
  gap: 10px;
}

#emf-form .name-field {
  flex: 1;
  position: relative;
}

/* Field labels underneath inputs */
#emf-form .field-label {
  display: block;
  font-size: 0.8em;
  color: #666 !important;
  margin-top: 4px;
  text-align: center;
}

/* Date fields */
#emf-form .date-fields {
  display: flex;
  align-items: center;
  gap: 5px;
}

#emf-form .date-field {
  width: 70px;
  position: relative;
}

#emf-form .date-separator {
  font-size: 1.2em;
  padding: 0 2px;
}

/* Calendar button */
#emf-form .calendar-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0 5px;
}

/* Phone fields */
#emf-form .phone-fields {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

#emf-form .phone-field:nth-child(1) {
  width: 40px;
}

#emf-form .phone-field:nth-child(3) {
  width: 40px;
}

#emf-form .phone-field:nth-child(5) {
  width: 40px;
}

#emf-form .phone-separator {
  font-size: 1.2em;
  padding: 0 2px;
}

/* Address fields */
#emf-form .address-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

#emf-form .address-field.full-width {
  grid-column: 1 / -1;
}

#emf-form .address-note {
  font-size: 0.9em;
  font-style: italic;
  margin-top: 10px;
  color: #666 !important;
}

/* Select styling */
#emf-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  padding-right: 25px !important;
}

/* Checkbox and radio styling */
#emf-form .checkbox-field,
#emf-form .radio-field {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

#emf-form input[type="checkbox"],
#emf-form input[type="radio"] {
  margin-right: 10px;
  margin-top: 3px;
}

#emf-form .checkbox-label,
#emf-form .radio-label {
  display: inline;
  margin-bottom: 0;
}

/* Radio group */
#emf-form .radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Textarea */
#emf-form textarea {
  min-height: 100px;
  resize: vertical;
}

/* Field notes */
#emf-form .field-note {
  font-size: 0.9em;
  font-style: italic;
  margin-top: 10px;
  color: #666 !important;
}

/* Credit card section */
#emf-form .card-details {
  display: flex;
  gap: 30px;
  margin-top: 15px;
}

#emf-form .expiration,
#emf-form .cvv {
  position: relative;
}

#emf-form .exp-fields {
  display: flex;
  align-items: center;
  gap: 5px;
}

#emf-form .exp-field {
  width: 50px;
  position: relative;
}

#emf-form .exp-separator {
  font-size: 1.2em;
  padding: 0 2px;
}

#emf-form .cvv input {
  width: 70px;
}

#emf-form .cvv-help {
  font-size: 0.8em;
  text-decoration: underline;
  margin-left: 10px;
  cursor: pointer;
}

#emf-form .security-notice {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 0.9em;
  color: #666 !important;
}

#emf-form .lock-icon {
  margin-right: 5px;
}

/* Authorization section */
#emf-form .authorization-section {
  margin-top: 30px;
}

#emf-form .authorization-text {
  margin-left: 25px;
  font-size: 0.95em;
  line-height: 1.4;
}

/* reCAPTCHA container */
#emf-form .recaptcha-container {
  margin: 30px 0;
  border: 1px solid #d3d3d3;
  width: fit-content;
  display: flex;
}

#emf-form .g-recaptcha {
  display: flex;
  width: 300px;
  height: 74px;
  background-color: #f9f9f9 !important;
  padding: 15px;
}

#emf-form .recaptcha-checkbox {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

#emf-form .recaptcha-logo {
  font-size: 12px;
  color: #555 !important;
  text-align: center;
}

#emf-form .recaptcha-terms {
  font-size: 10px;
  color: #555 !important;
  text-align: center;
}

/* Submit button */
#emf-form .submit-button-container {
  margin-top: 30px;
}

#emf-form .submit-button {
  background-color: transparent !important;
  border: 1px solid #333 !important;
  color: #333 !important;
  padding: 8px 25px !important;
  font-size: 1em !important;
  font-weight: 300 !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

#emf-form .submit-button:hover {
  background-color: #333 !important;
  color: white !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #emf-form .name-fields,
  #emf-form .address-fields {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  #emf-form .card-details {
    flex-direction: column;
    gap: 15px;
  }
}

/* Cardholder fields */
#emf-form .cardholder-fields {
  display: flex;
  gap: 15px;
}

#emf-form .cardholder-fields .name-field {
  flex: 1;
}

/* ------------------------ */
/* CUSTOM ADDITIONS BELOW! */
/* ------------------------ */

/* Grouping Legal Name + Date of Birth */
#emf-form .field-legal-name,
#emf-form .field-dob {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

#emf-form .field-dob {
  margin-left: 4%;
}

/* Grouping Email + Phone */
#emf-form .field-email,
#emf-form .field-phone {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

#emf-form .field-phone {
  margin-left: 4%;
}

/* ------------------------ */
/* DUPLICATE FIELD REMOVAL */
/* ------------------------ */

/* Find and hide all Email fields except the first one */
#emf-form label:nth-of-type(n+2)[for*="email"],
#emf-form label:nth-of-type(n+2):contains("Email") {
  display: none !important;
}

/* Hide inputs that follow hidden labels */
#emf-form label[style*="display: none"] + input,
#emf-form label[style*="display:none"] + input {
  display: none !important;
}

/* Target Email field's siblings */
#emf-form label[for*="email"] ~ label[for*="email"],
#emf-form input[type="email"] ~ input[type="email"],
#emf-form div:has(> label[for*="email"]) ~ div:has(> label[for*="email"]) {
  display: none !important;
}

/* Target Phone field's siblings */
#emf-form label[for*="phone"] ~ label[for*="phone"],
#emf-form input[type="tel"] ~ input[type="tel"],
#emf-form div:has(> label[for*="phone"]) ~ div:has(> label[for*="phone"]) {
  display: none !important;
}

/* Direct selector for duplicate Email */
#emf-form label + input[type="email"] + label:contains("Email"),
#emf-form label + input[type="email"] + label:contains("Email") + input[type="email"] {
  display: none !important;
}

/* Direct selector for duplicate Phone */
#emf-form label + div.phone-fields + label:contains("Phone"),
#emf-form label + div.phone-fields + label:contains("Phone") + div.phone-fields {
  display: none !important;
}

/* Fallback approach: hide fields by position */
#emf-form *:nth-of-type(3):contains("Email"),
#emf-form *:nth-of-type(4):contains("Email"),
#emf-form *:nth-of-type(7):contains("Phone"),
#emf-form *:nth-of-type(8):contains("Phone") {
  display: none !important;
}

/* Special case for exactly the structure in screenshot */
#emf-form label:contains("Email") + input + label:contains("Email"),
#emf-form label:contains("Email") + input + label:contains("Email") + input,
#emf-form label:contains("Phone") + div + label:contains("Phone"),
#emf-form label:contains("Phone") + div + label:contains("Phone") + div {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* Hide subsequent elements after first ones */
#emf-form label[for*="email"] ~ label[for*="email"],
#emf-form label[for*="email"] ~ label:contains("Email"),
#emf-form label[for*="phone"] ~ label[for*="phone"],
#emf-form label[for*="phone"] ~ label:contains("Phone") {
  display: none !important;
}

/* -------------------------------- */
/* DUPLICATE FIELD REMOVAL - TARGETED */
/* -------------------------------- */

/* Target the second Email label and input */
#emf-form label[for*="email"] + input[type="email"] + label,
#emf-form label[for*="email"] + input[type="email"] + label + input {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Target the second Phone label and its phone fields */
#emf-form label[for*="phone"] ~ label[for*="phone"],
#emf-form label[for*="phone"] ~ label[for*="phone"] ~ div,
#emf-form label[for*="phone"] ~ label[for*="phone"] ~ input {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* Alternative method using nth-of-type selectors */
#emf-form label:nth-of-type(5),  /* This targets the second Email label */
#emf-form label:nth-of-type(5) + input,
#emf-form label:nth-of-type(7),  /* This targets the second Phone label */
#emf-form label:nth-of-type(7) ~ div,
#emf-form label:nth-of-type(7) ~ input {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

/* Extra insurance - if the form is regenerated and structure changes */
#emf-form input[type="email"]:nth-of-type(2),
#emf-form input[type="tel"]:nth-of-type(2),
#emf-form div.phone-fields:nth-of-type(2) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}

/* For forms where duplicate fields appear inside containing elements */
#emf-form .form-field-group:has(input[type="email"]):nth-of-type(n+3),
#emf-form .form-field-group:has(.phone-fields):nth-of-type(n+4) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
}