.tcf-form {
    margin: 0 auto;
    padding: 20px;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.tcf-submit-btn {
    padding: 10px 20px;
    background-color: #4A90E2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
}

.tcf-submit-btn:hover {
    background-color: #3a78c2;
}

.tcf-submit-btn:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
}

.tcf-submit-btn.sending::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-message {
    margin-top: 1rem;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.form-message.success {
    background-color: #10B981;
    color: #fff;
}

.form-message.error {
    background-color: #EF4444;
    color: #fff;
}

/* Скрываем стандартный чекбокс */
.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

/* Состояние при hover */
.custom-checkbox input[type="checkbox"]:hover {
  border-color: #999;
}

/* Состояние при активном клике */
.custom-checkbox input[type="checkbox"]:active {
  transform: scale(0.95);
}

/* Активный чекбокс */
.custom-checkbox input[type="checkbox"]:checked {
  background: #FFCC00;
  border-color: #FFCC00;
}

/* Галочка (через background-image svg) */
.custom-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 9px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.46647 0.284354C9.66017 0.0999513 9.91792 -0.00199392 10.1853 2.95561e-05C10.4528 0.00205303 10.709 0.107887 10.8998 0.2952C11.0907 0.482512 11.2014 0.736652 11.2084 1.00399C11.2155 1.27133 11.1184 1.53097 10.9377 1.7281L5.45147 8.58935C5.35714 8.69096 5.24328 8.77251 5.11671 8.82911C4.99013 8.88571 4.85345 8.9162 4.71482 8.91877C4.57619 8.92134 4.43847 8.89592 4.30989 8.84405C4.18131 8.79217 4.06451 8.7149 3.96647 8.61685L0.328224 4.9786C0.226905 4.88419 0.145639 4.77034 0.0892753 4.64384C0.0329113 4.51734 0.00260357 4.38079 0.00016049 4.24232C-0.00228259 4.10386 0.0231891 3.96632 0.0750555 3.83791C0.126922 3.7095 0.204121 3.59285 0.302047 3.49493C0.399972 3.397 0.516619 3.3198 0.645027 3.26794C0.773436 3.21607 0.910976 3.1906 1.04944 3.19304C1.18791 3.19548 1.32447 3.22579 1.45096 3.28216C1.57746 3.33852 1.69131 3.41978 1.78572 3.5211L4.66497 6.39898L9.44035 0.314604L9.46647 0.284354Z' fill='%23111111'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}