/*--------------------------------------------------------------
# Kentico overrides for SnapFolio
# Load AFTER ~/arabzadehFiles/css/main.css
--------------------------------------------------------------*/

/* Kentico wraps the whole page in <form>; keep it neutral */
body > form {
  margin: 0;
}

/* Gallery: hashtag filters are added by gallery-tags.js, avoid a flash of
   un-filtered buttons on slow connections */
.portfolio .isotope-filters li[data-tag]:not([data-filter]) {
  visibility: hidden;
}

/*--------------------------------------------------------------
# Contact: Kentico On-line form (BizForm) inside .contact-form
--------------------------------------------------------------*/
.contact .contact-form input[type="text"],
.contact .contact-form input[type="email"],
.contact .contact-form textarea {
  display: block;
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%);
  color: var(--default-color);
}

.contact .contact-form input[type="text"]:focus,
.contact .contact-form input[type="email"]:focus,
.contact .contact-form textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--accent-color);
}

.contact .contact-form textarea {
  min-height: 160px;
}

.contact .contact-form input[type="submit"],
.contact .contact-form .FormButton {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 1rem 2rem;
  border-radius: 2rem;
  transition: 0.3s;
  cursor: pointer;
}

.contact .contact-form input[type="submit"]:hover,
.contact .contact-form .FormButton:hover {
  background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%);
}

/* Kentico validation + "thank you" messages */
.contact .contact-form .EditingFormErrorLabel,
.contact .contact-form .ErrorLabel {
  display: block;
  color: #df1529;
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

.contact .contact-form .EditingFormInfoLabel,
.contact .contact-form .InfoLabel {
  display: block;
  color: #fff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
}