/* 1. Global Reset & Typography */
body {
  margin: 0;
  padding: 20px; /* Optional: adds breathing room inside the iframe */
  font-family: "Raleway", Arial, sans-serif; /* From custom.css */
  font-size: 14px;
  line-height: 30px;
  color: #666666;
  background-color: #ffffff;
}

/* 2. Labels & Spacing */
.Inputfield > label,
label.control-label {
  display: block;
  margin-bottom: 5px;
  color: #898989; /* From custom.css labels */
  font-family: "Raleway", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: normal;
}

.Inputfield > label sup {
  color: #0088cc; /* Bootstrap primary blue */
  padding-left: 2px;
}

.Inputfield {
  margin-bottom: 20px; /* Matches .control-group spacing */
}

/* 3. Inputs & Textareas */
input[type="text"],
input[type="email"],
textarea {
  display: block;
  width: 100%;
  max-width: 460px; /* Equivalent to .span4 or .span8 in context */
  height: auto;
  min-height: 30px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  /* vertical-align: middle; */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition:
    border linear 0.2s,
    box-shadow linear 0.2s;
  -moz-transition:
    border linear 0.2s,
    box-shadow linear 0.2s;
  -o-transition:
    border linear 0.2s,
    box-shadow linear 0.2s;
  transition:
    border linear 0.2s,
    box-shadow linear 0.2s;
  box-sizing: border-box;
}

textarea {
  min-height: 120px; /* Replicating rows="4" */
}

/* Input Focus State (Light Blue Glow) */
input:focus,
textarea:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  -webkit-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}

/* 4. The "Send Message" Button */
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

button[type="submit"]:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

/* 5. Placeholder Styling */
::-webkit-input-placeholder {
  color: #999999;
}
:-moz-placeholder {
  color: #999999;
}
::-moz-placeholder {
  color: #999999;
}
:-ms-input-placeholder {
  color: #999999;
}

/* Target FormBuilder's success container and standard alert classes */
.FormBuilderSuccess,
.alert-success {
  padding: 20px;
  margin-bottom: 20px;
  background-color: #ceefbe; /* From custom.css Success Alert */
  border: 1px solid #72ad55; /* From custom.css Success Alert */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; /* From bootstrap.css .alert */
  color: #488a28; /* From custom.css Alert text color */
  font-family: "Raleway", Arial, sans-serif; /* From custom.css body font */
}

/* Style the "Thank you!" heading */
.FormBuilderSuccess h2,
.FormBuilderSuccess h3,
.alert-success h2 {
  color: #488a28; /* From custom.css alert h2 color */
  font-size: 18px; /* Matches custom.css h2 size */
  font-weight: bold;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

/* Style the message text */
.FormBuilderSuccess p,
.alert-success p {
  color: #488a28; /* From custom.css alert p color */
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 21px; /* From custom.css standard p line-height */
}

/* Container for the error list at the top */
.FormBuilderErrors {
  margin-bottom: 20px;
}

/* 1. General Error Summary with Icon */
.FormBuilderErrors .alert-error.error {
  margin-bottom: 10px;
  background-color: #f6d4d4; /* From custom.css */
  border: 1px solid #d47676; /* From custom.css */
  color: #ae3f3f; /* From custom.css */
  font-family: "Raleway", Arial, sans-serif; /* From custom.css */

  /* Icon implementation */
  background-image: url("../img/warning-icons.png");
  background-repeat: no-repeat;
  background-position: 12px -65px; /* Specific coordinate for the red error icon */

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; /* From bootstrap.css */

  padding: 15px 15px 15px 52px; /* Increased left padding for icon breathing room */
  line-height: 24px; /* Forces the text to vertical center */

  /* Ensure the container behaves like your site's standard alerts */
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* 2. Field-Specific Error Message (Inline) */
.input-error.error {
  display: block;
  margin-top: -5px;
  margin-bottom: 10px;
  color: #b94a48; /* Bootstrap 2.2.1 error red */
  font-size: 13px;
  font-style: italic;
  font-family: "Raleway", Arial, sans-serif;
}

/* 3. Highlighted Input State */
.InputfieldStateError input,
.InputfieldStateError textarea {
  border-color: #b94a48;
  color: #b94a48;
}

.InputfieldStateError input:focus,
.InputfieldStateError textarea:focus {
  border-color: #953b39; /* Darker red on focus */
  -webkit-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 6px #d59392;
  -moz-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 6px #d59392;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 6px #d59392;
}