/* 
  Formulário Fale Conosco V2 - Croma Oncologia
  Layout em duas colunas com renderização via PHP 
*/

.fale-conosco-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem 0;
}

.fale-conosco-text {
  flex: 1;
  min-width: 300px;
}

.fale-conosco-form-wrapper {
  flex: 1;
  min-width: 300px;
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  height: fit-content;
}

@media only screen and (max-width: 767px) {
  .fale-conosco-form-wrapper {
    padding: 1.5rem;
  }
}

.form-step {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}

.form-step.active {
  display: block;
}

.form-step h3 {
  color: #0C4047; /* Tom de verde escuro Croma */
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.form-options {
  margin-bottom: 1.5rem;
}

.form-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-bottom: 0.2rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-option:hover {
  border-color: #0C4047;
  background-color: #f7fafa;
}

.form-option input[type="radio"] {
  margin-right: 1rem;
  width: 18px;
  height: 18px;
  accent-color: #0C4047;
}

.form-option label {
  cursor: pointer;
  font-size: 1rem;
  color: #374151;
  font-weight: 500;
  flex: 1;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: #374151;
}

.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fff;
  cursor: pointer;
  color: #3A767D;
}

.form-group select:focus {
  outline: none;
  border-color: #0C4047;
  box-shadow: 0 0 0 3px rgba(0, 74, 69, 0.1);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  align-items: center;
}

.btn-prosseguir {
  width: 100%;
  background: #0C4047;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-prosseguir:hover {
  background: #00332f;
}

.btn-voltar {
  background: transparent;
  color: #0c4047;
  border: 1px solid #0c4047;
  padding: 0.8rem 1.5rem;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-voltar:hover {
  background: #0c4047;
  color: #fff;
  transition: all 0.2s ease;
}

.input-selected {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.form-group label[for="unidade-select"] {
  color: #C1BFB9;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 185.714% */
}

.page-fale-conosco #body-content .input-selected p {
  color: #0C4047;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  margin-left: 10px;
}

.form-iframe-container {
    width: 100%;
}

.form-iframe-container iframe {
  width: 100%;
  height: 1320px;
  border-radius: 8px;
}

.page-fale-conosco #body-content #contact-enjoy, .page-fale-conosco #body-content #contact-enjoy a {
  color: #0C4047;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 26px;
letter-spacing: normal;
}

/* Animação */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsividade */
@media (max-width: 992px) {
  .fale-conosco-container {
    flex-direction: column;
  }
}


/* ---------- Wrapper Formulário ---------- */
.croma-form {
  border-radius: 14px;
  color: #0f1e26;
  margin-top: 30px;
}
.croma-form a { text-decoration: none; }

/* ---------- Cabeçalho ---------- */
.cf7-head {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.cf7-head__subject {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin-bottom: 10px;
}
.radio-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #0d6b66;
  box-shadow: inset 0 0 0 6px #0d6b66; /* bolinha preenchida */
  display: inline-block;
}
.cf7-head__lead { margin: 0; color: #23343c; }
.cf7-head__lead a { color: inherit; border-bottom: 1px solid currentColor; }

/* ---------- Grid ---------- */
.cf7-grid {
  background: #ffffff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 16px;
}
.cf7-field { display: flex; flex-direction: column; gap: 8px; }
.cf7-field--full { grid-column: 1 / -1; }

/* ---------- Inputs ---------- */
.croma-form input[type="text"],
.croma-form input[type="email"],
.croma-form input[type="tel"],
.croma-form textarea {
  width: 100%;
  border: 1px solid #d6e2e2;
  background: #f7fbfb;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.croma-form .file-row .file-row__name {
  width: 80%;
  border: none;
  background: #f7fbfb;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.croma-form .file-row:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1689 1.58691C14.8656 1.59861 14.5657 1.65512 14.2789 1.75461C13.1258 2.14307 12.1366 3.03153 11.1543 4.01461L4.80815 10.3608C4.24431 10.9246 3.80969 11.6123 3.67815 12.4277C3.61121 12.872 3.6504 13.3258 3.79252 13.752C3.93465 14.1783 4.17566 14.5648 4.49584 14.88C4.81804 15.2035 5.21353 15.4445 5.64875 15.5826C6.08397 15.7207 6.54607 15.7517 6.99584 15.6731C7.80969 15.5269 8.49123 15.0908 9.01507 14.5669L15.9858 7.59615C16.07 7.52844 16.1389 7.44377 16.1882 7.34766C16.2374 7.25154 16.2659 7.14614 16.2717 7.03829C16.2775 6.93045 16.2606 6.82259 16.222 6.72173C16.1833 6.62087 16.1239 6.52928 16.0475 6.45291C15.9712 6.37654 15.8796 6.31711 15.7787 6.27849C15.6779 6.23986 15.57 6.22291 15.4622 6.22873C15.3543 6.23455 15.2489 6.26301 15.1528 6.31226C15.0567 6.36152 14.972 6.43046 14.9043 6.51461L7.93277 13.4854C7.602 13.8161 7.14508 14.0846 6.73123 14.1585C6.31738 14.2323 5.96508 14.1854 5.57738 13.7985C5.17354 13.3946 5.13046 13.0554 5.19277 12.6677C5.25507 12.2808 5.49815 11.8338 5.88969 11.4423L12.2358 5.09615C13.1666 4.16615 14.0566 3.45768 14.7597 3.22076C15.4635 2.98461 15.9682 3.03538 16.7789 3.84615C17.3851 4.45153 18.0297 4.99768 18.1974 5.55307C18.282 5.82999 18.282 6.10691 18.1012 6.5623C17.9205 7.01768 17.5282 7.64076 16.7797 8.38922C13.5889 11.5815 11.1397 14.0292 9.80815 15.3608C8.62584 16.5431 7.50892 17.3323 6.51508 17.5477C5.52046 17.7638 4.57661 17.5338 3.342 16.2977C2.10584 15.0615 1.67354 13.8646 1.80354 12.6208C1.93277 11.3761 2.69046 10.0261 4.08738 8.62999C5.77661 6.94076 9.30277 3.7023 9.30277 3.7023C9.38831 3.63781 9.45943 3.55617 9.51159 3.4626C9.56374 3.36903 9.59578 3.2656 9.60565 3.15894C9.61552 3.05227 9.603 2.94472 9.5689 2.84317C9.53479 2.74162 9.47985 2.64831 9.4076 2.56923C9.33535 2.49014 9.24737 2.42702 9.14931 2.3839C9.05125 2.34078 8.94526 2.31862 8.83814 2.31884C8.73101 2.31906 8.62512 2.34165 8.52723 2.38516C8.42934 2.42867 8.34162 2.49215 8.26969 2.57153C8.26969 2.57153 4.73738 5.76922 2.98123 7.52461C1.42508 9.07999 0.445075 10.7523 0.265075 12.4769C0.0850752 14.2 0.783537 15.9038 2.26046 17.3808C3.73738 18.8577 5.33123 19.3885 6.82738 19.0631C8.32354 18.7385 9.61969 17.7131 10.8897 16.4431C12.2212 15.1123 14.6705 12.6638 17.8612 9.47153C18.7074 8.62538 19.2551 7.86922 19.5435 7.14076C19.832 6.41076 19.8435 5.69153 19.6643 5.09691C19.3051 3.90845 18.3412 3.24461 17.8612 2.76538C17.3105 2.21461 16.7012 1.86691 16.082 1.70768C15.7847 1.6253 15.4774 1.58414 15.1689 1.58691Z' fill='%233A767D'/%3E%3C/svg%3E%0A");
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.croma-form textarea { height: 140px; resize: vertical; }
.croma-form input:focus,
.croma-form textarea:focus {
  border-color: #0d6b66;
  box-shadow: 0 0 0 3px rgba(13,107,102,.12);
}

/* ---------- Checkbox ---------- */
.cf7-check input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #0d6b66;
  transform: translateY(3px);
}

/* ---------- Upload ---------- */
.cf7-field--file input[type="file"] {
  /* escondemos o input real e usamos o botão estilizado */
  position: absolute !important;
  left: -9999px;
}
.file-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.file-row__name {
  background: #f7fbfb;
  cursor: default;
}
.file-row__btn {
  width: 100%;
  display: inline-block;
  padding: 12px 14px;
  border-radius: 10px;
  background: #eef7f6;
  color: #0d6b66;
  font-weight: 600;
  border: 1px solid #cfe7e5;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.file-row__btn:hover { filter: brightness(0.98); }

/* ---------- Rodapé / Enviar ---------- */
.cf7-actions {
  padding: 20px 0 0;
  display: flex; justify-content: center;
  position: relative;
}
.cf7-actions .wpcf7-spinner {
  position: absolute;
  top: 33px;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.btn-enviar {
  width: 100%;
  background: #0d6b66; color: #fff; font-weight: 700;
  padding: 14px 36px; border: none; border-radius: 9999px;
  cursor: pointer; font-size: 16px;
  transition: transform .03s ease, filter .2s;
}
.btn-enviar:hover { filter: brightness(1.05); }
.btn-enviar:active { transform: translateY(1px); }

.page-fale-conosco #body-content .croma-form p.cf7-privacy.cf7-field--full {
  color: #0C4047 !important;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.12px;
    text-align: left !important ;
}
.page-fale-conosco #body-content .croma-form p.cf7-privacy.cf7-field--full a {
  color: #5396F9 !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12px;
      text-align: left !important;
}

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .cf7-grid { grid-template-columns: 1fr; }
}