:root {
  --form-padding: 15px 17px;
  --form-border-radius: 7px;
  --input-bg-color: #fefefe;
  --input-border-color: #ccc;
  --input-text-color: #222;
  --input-focus-color: #0b7392;
  --input-font-size: 16px;
  --button-bg-color: #0b7392;
  --button-text-color: #fff;
  --button-hover-bg-color: #085066;
  --button-focus-bg-color: #085066;
  --checkbox-size: 18px;
  --radio-size: 18px;
  --label-color: #333;
  --label-font-size: 16px;
  --placeholder-color: #888;
  --label-margin: 0px 0px 5px;
  --input-margin: 0px 0px 10px;
}

/* Define CSS variables for dark theme */
.dark-theme {
  --input-bg-color: #333;
  --input-border-color: #444;
  --input-text-color: #ddd;
  --input-focus-color: #0b7392;
  --button-bg-color: #0b7392;
  --button-text-color: #fff;
  --button-hover-bg-color: #085066;
  --button-focus-bg-color: #085066;
  --label-color: #eee;
  --placeholder-color: #999;
}

/* define css variables for cf7 */
.wpcf7-form{
  --label-margin: 0px;
  --input-margin: 6px 0px 15px;
}

.wpcf7-form label{
  --label-margin: 0px 0px 15px;
}
.wpcf7-form label input{
  --input-margin: 6px 0px 0px;
}

.wpcf7-not-valid{
  --input-border-color: rgb(206, 22, 22);
  --input-text-color: rgb(206, 22, 22);
}

.wpcf7-not-valid-tip{
  font-size: var(--input-font-size);
  margin-bottom:10px;
}

.wpcf7 form .wpcf7-response-output{
  margin: var(--input-margin);
  border:none !important;
  font-size: var(--input-font-size);
  padding: 0px;
  color: #00a0d2;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  color:rgb(206, 22, 22);
  border:none !important;
}
.wpcf7-acceptance .wpcf7-list-item{
  margin-left:0em;
}

/* Global Form Styling */
form {
  font-family: "Inter", Arial, sans-serif;
}

/* Label Styling */
label {
  display: block;
  margin: var(--label-margin);
  color: var(--label-color);
  font-size: var(--label-font-size);
  font-weight: bold;
}

label input + span{
  font-weight: normal;
}

/* Input Fields */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="file"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"] {
  padding: var(--form-padding);
  border: 1px solid var(--input-border-color);
  border-radius: var(--form-border-radius);
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  width: 100%;
  box-sizing: border-box;
  margin: var(--input-margin);
  font-size: var(--input-font-size);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus {
  border-color: var(--input-focus-color);
  box-shadow: 0 0 5px var(--input-focus-color);
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

/* Select Dropdown */
select {
  padding: var(--form-padding);
  border: 1px solid var(--input-border-color);
  border-radius: var(--form-border-radius);
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  width: 100%;
  box-sizing: border-box;
  margin: var(--input-margin);
  font-size: var(--input-font-size);
}

select:focus {
  border-color: var(--input-focus-color);
  box-shadow: 0 0 5px var(--input-focus-color);
}

/* Textarea */
textarea {
  padding: var(--form-padding);
  border: 1px solid var(--input-border-color);
  border-radius: var(--form-border-radius);
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  width: 100%;
  box-sizing: border-box;
  margin: var(--input-margin);
  resize: vertical;
  font-size: var(--input-font-size);
}

textarea:focus {
  border-color: var(--input-focus-color);
  box-shadow: 0 0 5px var(--input-focus-color);
}

/* Checkbox */
input[type="checkbox"] {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 3px;
  border:1px solid #888;
}

input[type="checkbox"]:checked {
  background-color: var(--input-focus-color);
  border-color: var(--input-focus-color);
}

/* Radio Button */
input[type="radio"] {
  width: var(--radio-size);
  height: var(--radio-size);
  margin-right: 10px;
  vertical-align: middle;
  border:1px solid #888;
}

input[type="radio"]:checked {
  background-color: var(--input-focus-color);
  border-color: var(--input-focus-color);
}

/* Button */
button,
input[type="submit"],
input[type="reset"] {
  padding: var(--form-padding);
  border: none;
  border-radius: var(--form-border-radius);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  cursor: pointer;
  font-size: var(--input-font-size);
  font-weight: bold;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: var(--button-hover-bg-color);
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
  background-color: var(--button-focus-bg-color);
  box-shadow: 0 0 5px var(--button-focus-bg-color);
}