/* 2-Column Grid Layout */
.check-email-grid {
  display: grid;
  grid-template-columns: 40% 58%;
  /* Approx match to design ratio */
  gap: 24px;
  width: 100%;
}

/* Left Column: Form */
.check-email-left {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.check-disposable-email-head {
  font-family: 'Inter_18pt-Bold', sans-serif;
  font-size: 32px;
  color: #000000;
  margin-bottom: 16px;
  margin-top: 0;
}

.form-card {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  /* Add subtle shadow if needed, or keeping flat as per image if it looks flat */
  background: #FFFFFF;
  height: 100%;
  /* Fill height */
}

.disposable-email-disc {
  font-family: 'Inter_28pt-Regular', sans-serif;
  font-size: 16px;
  color: #404040;
  margin-bottom: 12px;
  line-height: 1.5;
}

.check-disposable-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.check-disposable-email-form label {
  display: block;
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-size: 16px;
  color: #252525;
  margin-bottom: 0px;
  /* gap handles this */
}

.check-disposable-email-form input {
  width: 100%;
  height: 50px;
  padding: 0px 16px;
  border: 0.3px solid #737373;
  border-radius: 8px;
  font-family: 'PlusJakartaSans-Regular', sans-serif;
  font-size: 16px;
  color: #101828;
  box-sizing: border-box;
  transition: border-color 0.2s;
  outline: none;
}

.check-disposable-email-form input:focus {
  border-color: #1452CA;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 82, 202, 0.1);
}

/* Neutralize Browser Autofill Background */
.check-disposable-email-form input:-webkit-autofill,
.check-disposable-email-form input:-webkit-autofill:hover,
.check-disposable-email-form input:-webkit-autofill:focus,
.check-disposable-email-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px white inset !important;
  -webkit-text-fill-color: #101828 !important;
  transition: background-color 5000s ease-in-out 0s;
}

.bulk-check-email-btn {
  width: 100%;
  /* Design shows narrower button? Image seems to be full width relative to input or left aligned. 
     Actually image shows blue button "Verify". */
  width: max-content;
  /* Approximate width from image */
  height: 50px;
  background-color: #1452CA;
  color: #FDFDFD;
  border: none;
  outline: none;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 8px;
  font-family: 'Inter_28pt-SemiBold', sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.bulk-check-email-btn:hover {
  background-color: #1040A0;
}


/* Right Column: Results */
.check-email-right {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
}

.disposal-result-main-title {
  font-family: 'Inter_18pt-Bold', sans-serif;
  font-size: 20px;
  color: #252525;
  margin-bottom: 12px;
  line-height: 1.4;
}

.disposal-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-card {
  display: flex;
  align-items: center;
  /* Top align text */
  justify-content: space-between;
  padding: 12px;
  border-radius: 8px;
}

.result-content {
  flex: 1;
  padding-right: 16px;
}

.result-head {
  font-family: 'Inter_28pt-SemiBold', sans-serif;
  font-size: 16px;
  color: #404040;
  /* Dark text */
  margin-bottom: 8px;
}

.result-desc {
  font-family: 'Inter_28pt-Regular', sans-serif;
  font-size: 16px;
  color: #404040;
  /* Lighter text */
  line-height: 1.5;
  margin: 0;
}

.result-boolean {
  font-family: 'Inter_18pt-Bold', sans-serif;
  font-size: 16px;
  color: #404040;
  margin: 0;
}

/* Status Colors */

/* True Status (Green) */
.status-true {
  background-color: #EBFFEB
    /* Light green bg */
}

.status-true .result-boolean {
  color: #027A48;
  /* Dark green text */
  /* If design has black boolean for 'True', check image. 
     Image shows Black/Dark Grey 'True' text actually. 
     Wait, image shows 'True' in Black/Dark Grey on Green BG? 
     Zooming in... The 'True' looks dark grey #101828 ish. 
     Let's use dark grey to match image exactly if needed, 
     but typical pattern is green text. 
     Looking at image_1769207130688.png:
     "True" is Black/Dark grey.
     "False" is Black/Dark grey.
  */
  color: #101828;
}

/* False Status (Red) */
.status-false {
  background-color: #FFEBEB;
  /* Light red bg */
}

.status-false .result-boolean {
  color: #101828;
}


/* Responsive */
@media only screen and (max-width: 1000px) {
  .check-email-grid {
    grid-template-columns: 1fr;
  }

}

@media only screen and (max-width: 650px) {
  .disposal-result-main-title {
    font-size: 14px;
  }

  .check-email-grid {
    gap: 16px !important;
  }

  .check-disposable-email-head {
    font-size: 20px !important;
    margin-bottom: 22px !important;
  }

  .form-card {
    padding: 12px !important;
  }

  .disposable-email-disc {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  .check-disposable-email-form label {
    font-size: 14px !important;
  }

  .check-disposable-email-form input {
    height: 44px !important;
    font-size: 14px !important;
  }

  .result-head {
    font-size: 14px;
  }

  .result-desc {
    font-size: 12px;
  }
}

/* Empty State */
.results-empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 492px;
  /* Desktop Height */
  width: 100%;
}

.empty-state-title {
  font-family: 'Inter_18pt-Bold', sans-serif;
  font-size: 20px;
  color: #101828;
  margin-bottom: 8px;
}

.empty-state-desc {
  font-family: 'Inter_28pt-Regular', sans-serif;
  font-size: 16px;
  color: #667085;
  margin: 0;
}

@media only screen and (max-width: 650px) {
  .results-empty-state {
    height: 376px !important;
    /* Mobile Height */
  }
}