/*
 * SG Contact Form
 * Joomla 5.x
 */

.sgcf-module {
  box-sizing: border-box;
}

.sgcf-module *,
.sgcf-module *::before,
.sgcf-module *::after {
  box-sizing: border-box;
}

.sgcf-success-notice {
  width: 100%;
  padding: 16px 0 4px;
  font-size: 16px;
  line-height: 1.5;
  color: #19733a;
}

.sgcf-success-notice[hidden] {
  display: none !important;
}

.sgcf-modal[hidden] {
  display: none !important;
}

.sgcf-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 20px;
}

.sgcf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}

.sgcf-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.sgcf-close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.sgcf-title {
  margin: 0 42px 24px 0;
  font-size: calc(18px + 11 * (100vw - 320px) / 1600);
  line-height: 1.2;
}

.sgcf-form-wrapper {
  width: 100%;
}

/*
 * This class is always added to the <form> element.
 * It remains active even if a custom form class is specified in Joomla admin.
 */
.modal__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
  align-items: center;
}

.sgcf-form {
  width: 100%;
}

.sgcf-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
}

.sgcf-field label {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}

.sgcf-field input,
.sgcf-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #c9cdd3;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sgcf-field textarea {
  min-height: 120px;
  resize: vertical;
}

.sgcf-field input::placeholder,
.sgcf-field textarea::placeholder {
  color: #8a8f98;
  opacity: 1;
}

.sgcf-field input:hover,
.sgcf-field textarea:hover {
  border-color: #9ba2ac;
}

.sgcf-field input:focus,
.sgcf-field textarea:focus {
  border-color: #1d5fd1;
  box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.14);
}

.sgcf-trigger,
.sgcf-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  padding: 11px 18px;
  background: #1d5fd1;
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.sgcf-trigger:hover,
.sgcf-submit:hover {
  opacity: 0.9;
}

.sgcf-trigger:active,
.sgcf-submit:active {
  transform: translateY(1px);
}

.sgcf-trigger:focus-visible,
.sgcf-submit:focus-visible,
.sgcf-close:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: 3px;
}

.sgcf-submit {
  align-self: flex-start;
}

.sgcf-submit:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.sgcf-status {
  min-height: 1.4em;
  font-size: 14px;
  line-height: 1.4;
}

.sgcf-status:empty {
  min-height: 0;
}

.sgcf-status--success {
  color: #19733a;
}

.sgcf-status--error {
  color: #b42318;
}

.sgcf-honeypot {
  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;
  white-space: nowrap !important;
  border: 0 !important;
}

html.sgcf-modal-open,
html.sgcf-modal-open body {
  overflow: hidden;
}
@media (max-width: 998px) {
  .sgcf-module {
    margin-top: 1rem;
  }
}
@media (max-width: 600px) {
  .sgcf-modal {
    align-items: flex-start;
    padding: 12px;
  }

  .sgcf-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    margin-top: 12px;
    border-radius: 10px;
  }

  .sgcf-title {
    margin-bottom: 30px;
    font-size: calc(18px + 11 * (100vw - 320px) / 1600);
  }

  .modal__form {
    gap: 14px;
  }

  .sgcf-submit {
    width: 100%;
  }
}

.button__fill span {
  color: #fff;
}

.button__fill:hover span {
  color: #00416a;
}