/* === Контактная форма на главной === */

.custom-contact-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 4px !important;
}

.custom-contact-form select,
.custom-contact-form input[type="text"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
  width: 100% !important;
  padding: 12px 24px !important;
  height: 47px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #F8F8F8 !important;
  border: none !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin: 8px !important;
}

.custom-contact-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: rgba(255, 255, 255, 0.05) url('data:image/svg+xml;utf8,<svg fill="%23CACACA" height="10" width="18" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L10 10 L20 0 Z"/></svg>') no-repeat right 24px center !important;
  background-size: 18px 10px !important;
  padding: 12px 24px !important;
  padding-right: 50px !important;
  height: 47px !important;
  width: 100% !important;
  max-width: 520px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #F8F8F8 !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

input[type="file"].custom-file-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 160px;
  height: 60px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #fff;
  text-align: center;
  padding: 0;
  cursor: pointer;
  transition: border 0.3s ease;
}

input[type="file"].custom-file-input:hover {
  border-color: rgba(255, 255, 255, 0.4);
}


/* Убираем ::after для всех полей */
.custom-contact-form .wpcf7-form-control-wrap::after {
  content: none !important;
}


/* Скрываем оригинальную кнопку */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Стили кастомной кнопки через label */
.custom-file-upload {
  display: inline-block!important;
  background: none!important;
  color: #fff!important;
  font-family: 'Poppins', sans-serif!important;
  font-size: 16px!important;
  padding: 12px 24px!important;
  border-radius: 140px!important;
  cursor: pointer!important;
  transition: background 0.3s ease;
}

.custom-file-upload:hover {
  background: none;
}

.file-upload-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* или center — по желанию */
  gap: 6px;
}

.file-upload-wrapper input[type="file"] {
  width: auto;
}


.custom-contact-form textarea {
  height: 90px !important;
  resize: none !important;
}

.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
  color: #F8F8F8 !important;
  opacity: 0.7 !important;
}

/* Кнопка */
.custom-contact-form input[type="submit"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 126px !important;
  gap: 10px !important;
  
  height: 51px !important;
  background: #F95D32 !important;
  border-radius: 140px !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 12px !important;
}

/* 1. Глобальный стиль фокуса для всех полей */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #737373 !important;
}
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #737373 !important;
}

/* 2. Стиль текста в области Drag & Drop */
/* Заменяем цвет заголовка и текста "or" */
.wpcf7-form .ddfu-wrapper h3,
.wpcf7-form .ddfu-wrapper span {
    color: #737373 !important;
    font-size: 1.25rem; /* вместо h3 используем размер как h4 */
}
.wpcf7-form .ddfu-wrapper span {
    margin: 0.5rem 0;
}

.codedropz-upload-inner {
    color: #737373 !important;
    font-size: 1.25rem; /* вместо h3 используем размер как h4 */
}


/* Настройте селектор под ваш плагин, например .ddfu-wrapper */
.wpcf7-form h3 {
    color: #737373;
    font-size: 1.25rem; /* вместо h3 используем размер как h4 */
}
/* Если область загрузки использует свой класс, добавьте:
.ddfu-wrapper h3 {
    color: #737373;
    font-size: 1.25rem;
}
*/

/* 3. Стиль ошибки CF7 */
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
    border: none !important;
    background: transparent !important;
    color: #F95D32 !important;
}

.wpcf7-response-output{
    border: none !important;
    background: transparent !important;
    color: #F95D32 !important;
    margin: 1px !important;
}

.wpcf7-not-valid-tip{
    color: #F95D32 !important;
    margin: 1px !important;
}

/* ======================================================================
   Стили для формы <form class="visitcard-form">
   (приведены с учётом удаления правил для input[type="file"])
   ====================================================================== */

/* Контейнер формы: выравниваем по левому краю, уменьшаем gap */
.visitcard-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 4px !important;
}

/* Скрываем лейблы */
.visitcard-form label {
  display: none !important;
}

/* Поля: обычные инпуты и textarea */
.visitcard-form select,
.visitcard-form input[type="text"],
.visitcard-form input[type="tel"],
.visitcard-form textarea {
  width: 100% !important;
  padding: 12px 24px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #F8F8F8 !important;
  border: none !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.visitcard-form textarea {
  height: 90px !important;
  resize: none !important;
}

/* Селект «Услуга» с SVG-стрелкой */
.visitcard-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: rgba(255, 255, 255, 0.05) url('data:image/svg+xml;utf8,<svg fill="%23CACACA" height="10" width="18" viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L10 10 L20 0 Z"/></svg>') no-repeat right 24px center !important;
  background-size: 18px 10px !important;
  padding-right: 50px !important;
  height: 47px !important;
  color: #F8F8F8 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Убираем стили для обычного input[type="file"], т.к. он превращается в FilePond */
/*
.visitcard-form input[type="file"] { 
  … 
}
.visitcard-form input[type="file"]:hover { 
  … 
}
*/

/* Фокус на полях */
.visitcard-form input[type="text"]:focus,
.visitcard-form input[type="tel"]:focus,
.visitcard-form select:focus,
.visitcard-form textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #737373 !important;
}

/* Кнопка «Wyślij» */
.visitcard-form button[type="submit"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 126px !important;
  gap: 10px !important;
  width: 280px !important;
  height: 51px !important;
  background: #F95D32 !important;
  border-radius: 140px !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Сообщения об ошибке и успехе */
.visitcard-error {
  color: #F95D32 !important;
  margin-bottom: 12px !important;
}

.visitcard-success {
  color: #00CC00 !important;
  margin-bottom: 12px !important;
}

/* центрируем саму кнопку */
.wpcf7 form input.wpcf7-submit{
  display:block;
  margin:0 auto;            /* по центру */
  position: relative;
  padding-right: 48px;      /* место под спиннер */
}

/* родительский <p> делаем контекстом позиционирования для спиннера */
.wpcf7 form p { position: relative; }

/* спиннер фиксируем поверх кнопки справа, без участия в потоке */
.wpcf7 .wpcf7-spinner{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  width: 20px;
  height: 20px;
  opacity: 0;               /* по умолчанию невидим */
  pointer-events: none;
  transition: opacity .2s;
}

/* показываем спиннер только когда CF7 добавил класс к кнопке */
.wpcf7 .wpcf7-submit.has-spinner + .wpcf7-spinner{
  opacity: 1;
}