/*==================================================
UNNATI LEAD MANAGER
FORM CSS
PART 1
==================================================*/

:root {

  --ulm-primary: #0B5ED7;
  --ulm-primary-dark: #084298;

  --ulm-secondary: #FF8C00;

  --ulm-success: #198754;
  --ulm-danger: #DC3545;

  --ulm-text: #212529;
  --ulm-muted: #6C757D;

  --ulm-border: #DEE2E6;

  --ulm-bg: #FFFFFF;
  --ulm-bg-light: #F8F9FA;

  --ulm-radius: 12px;

  --ulm-shadow:
    0 12px 35px rgba(0, 0, 0, .08);

  --ulm-transition: .30s ease;

  --ulm-font:
    "Inter",
    system-ui,
    sans-serif;

}

/*==================================================
WRAPPER
==================================================*/

.ulm-wrapper {

  width: 100%;

  margin: 60px auto;

  font-family: var(--ulm-font);

}

.ulm-form-container {

  max-width: 1100px;

  margin: auto;

  background: var(--ulm-bg);

  border-radius: 20px;

  box-shadow: var(--ulm-shadow);

  overflow: hidden;

}

/*==================================================
HEADER
==================================================*/

.ulm-form-header {

  background: linear-gradient(135deg,
      var(--ulm-primary),
      #2575fc);

  padding: 45px;

  text-align: center;

  color: #fff;

}

.ulm-form-header h2 {

  margin: 0;

  font-size: 38px;

  font-weight: 700;

  line-height: 1.2;

}

.ulm-form-header p {

  margin: 15px auto 0;

  max-width: 650px;

  font-size: 17px;

  opacity: .92;

}

/*==================================================
FORM
==================================================*/

.ulm-form {

  padding: 45px;

}

/*==================================================
SECTION
==================================================*/

.ulm-section {

  margin-bottom: 45px;

}

.ulm-section:last-child {

  margin-bottom: 0;

}

.ulm-section h3 {

  position: relative;

  margin: 0 0 30px;

  padding-bottom: 15px;

  font-size: 28px;

  font-weight: 700;

  color: var(--ulm-text);

}

.ulm-section h3::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 70px;

  height: 4px;

  border-radius: 50px;

  background: var(--ulm-secondary);

}

/*==================================================
GRID
==================================================*/

.ulm-grid {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 25px;

}

.ulm-col-2 {

  grid-column: 1/-1;

}

/*==================================================
FIELD
==================================================*/

.ulm-field {

  display: flex;

  flex-direction: column;

}

.ulm-field label {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

  color: var(--ulm-text);

  font-weight: 600;

  font-size: 15px;

}

.ulm-field label span {

  color: var(--ulm-danger);

}

/*==================================================
HONEYPOT
==================================================*/

.ulm-honeypot {

  display: none !important;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px) {

  .ulm-form {

    padding: 35px;

  }

  .ulm-grid {

    grid-template-columns: 1fr;

  }

  .ulm-col-2 {

    grid-column: auto;

  }

}

@media(max-width:767px) {

  .ulm-wrapper {

    margin: 30px auto;

  }

  .ulm-form {

    padding: 25px;

  }

  .ulm-form-header {

    padding: 30px 20px;

  }

  .ulm-form-header h2 {

    font-size: 30px;

  }

  .ulm-form-header p {

    font-size: 15px;

  }

  .ulm-section h3 {

    font-size: 24px;

  }

}

/*==================================================
INPUTS
==================================================*/

.ulm-field input,
.ulm-field select,
.ulm-field textarea {

  width: 100%;

  padding: 15px 18px;

  font-size: 16px;

  font-family: inherit;

  color: var(--ulm-text);

  background: #fff;

  border: 1px solid var(--ulm-border);

  border-radius: var(--ulm-radius);

  outline: none;

  transition: all .30s ease;

  appearance: none;

}

.ulm-field textarea {

  resize: vertical;

  min-height: 150px;

  line-height: 1.7;

}

.ulm-field select {

  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 18px center;

  padding-right: 50px;

}

.ulm-field input::placeholder,
.ulm-field textarea::placeholder {

  color: #9CA3AF;

}

/*==================================================
FOCUS
==================================================*/

.ulm-field input:focus,
.ulm-field textarea:focus,
.ulm-field select:focus {

  border-color: var(--ulm-primary);

  box-shadow:

    0 0 0 4px rgba(11, 94, 215, .12);

}

.ulm-field input:hover,
.ulm-field textarea:hover,
.ulm-field select:hover {

  border-color: var(--ulm-primary);

}

/*==================================================
READONLY
==================================================*/

.ulm-field input:disabled,
.ulm-field textarea:disabled,
.ulm-field select:disabled {

  background: #F3F4F6;

  cursor: not-allowed;

  opacity: .75;

}

/*==================================================
ERROR
==================================================*/

.ulm-field.error input,
.ulm-field.error textarea,
.ulm-field.error select {

  border-color: var(--ulm-danger);

  box-shadow:

    0 0 0 4px rgba(220, 53, 69, .12);

}

.ulm-field small {

  display: block;

  margin-top: 8px;

  font-size: 13px;

  color: var(--ulm-danger);

}

/*==================================================
SUBMIT
==================================================*/

.ulm-submit {

  margin-top: 45px;

  text-align: center;

}

.ulm-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-width: 230px;

  height: 58px;

  padding: 0 40px;

  border: none;

  border-radius: 60px;

  background: linear-gradient(135deg,
      var(--ulm-primary),
      #2575FC);

  color: #fff;

  font-size: 17px;

  font-weight: 700;

  cursor: pointer;

  transition: all .30s ease;

  box-shadow:

    0 12px 30px rgba(11, 94, 215, .28);

}

.ulm-btn:hover {

  transform: translateY(-3px);

  box-shadow:

    0 18px 40px rgba(11, 94, 215, .35);

}

.ulm-btn:active {

  transform: translateY(0);

}

.ulm-btn:disabled {

  opacity: .75;

  cursor: not-allowed;

  transform: none;

}

/*==================================================
BUTTON TEXT
==================================================*/

.ulm-btn-text {

  display: inline-flex;

  align-items: center;

}

/*==================================================
SPINNER
==================================================*/

.ulm-spinner {

  display: none;

  align-items: center;

  justify-content: center;

}

.ulm-spinner svg {

  width: 22px;

  height: 22px;

  animation: ulmRotate 1s linear infinite;

}

@keyframes ulmRotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:767px) {

  .ulm-btn {

    width: 100%;

    min-width: 100%;

    height: 54px;

    font-size: 16px;

  }

}

/*==================================================
CONSENT
==================================================*/

.ulm-consent {

  margin-top: 10px;

}

.ulm-checkbox {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  cursor: pointer;

  font-size: 15px;

  line-height: 1.7;

  color: var(--ulm-text);

  user-select: none;

}

.ulm-checkbox input {

  display: none;

}

.ulm-checkbox span {

  width: 24px;

  height: 24px;

  min-width: 24px;

  border: 2px solid var(--ulm-primary);

  border-radius: 6px;

  position: relative;

  transition: all .30s ease;

  margin-top: 2px;

  background: #fff;

}

.ulm-checkbox input:checked+span {

  background: var(--ulm-primary);

  border-color: var(--ulm-primary);

}

.ulm-checkbox input:checked+span::after {

  content: "✓";

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 15px;

  font-weight: 700;

}

.ulm-checkbox:hover span {

  border-color: var(--ulm-secondary);

}

/*==================================================
RESPONSE
==================================================*/

.ulm-response {

  margin-bottom: 25px;

}

.ulm-alert {

  padding: 18px 22px;

  border-radius: 12px;

  font-size: 15px;

  font-weight: 600;

  animation: ulmFade .35s ease;

}

.ulm-success {

  background: #E8F8EE;

  color: #198754;

  border-left: 5px solid #198754;

}

.ulm-error {

  background: #FDECEC;

  color: #DC3545;

  border-left: 5px solid #DC3545;

}

@keyframes ulmFade {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/*==================================================
LOADING
==================================================*/

.ulm-form.loading {

  pointer-events: none;

  opacity: .75;

}

.ulm-form.loading .ulm-btn {

  cursor: wait;

}

/*==================================================
AUTOFILL
==================================================*/

.ulm-field input:-webkit-autofill,

.ulm-field textarea:-webkit-autofill,

.ulm-field select:-webkit-autofill {

  -webkit-box-shadow: 0 0 0 1000px #fff inset;

  -webkit-text-fill-color: var(--ulm-text);

  transition: background-color 9999s ease-in-out 0s;

}

/*==================================================
SCROLLBAR
==================================================*/

.ulm-form textarea::-webkit-scrollbar {

  width: 8px;

}

.ulm-form textarea::-webkit-scrollbar-track {

  background: #F1F1F1;

}

.ulm-form textarea::-webkit-scrollbar-thumb {

  background: var(--ulm-primary);

  border-radius: 20px;

}

.ulm-form textarea::-webkit-scrollbar-thumb:hover {

  background: var(--ulm-primary-dark);

}

/*==================================================
ACCESSIBILITY
==================================================*/

.ulm-btn:focus,

.ulm-field input:focus,

.ulm-field textarea:focus,

.ulm-field select:focus,

.ulm-checkbox:focus-within span {

  outline: none;

}

@media(prefers-reduced-motion:reduce) {

  * {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

}

/*==================================================
SMALL DEVICES
==================================================*/

@media(max-width:576px) {

  .ulm-form {

    padding: 20px;

  }

  .ulm-section {

    margin-bottom: 35px;

  }

  .ulm-section h3 {

    font-size: 22px;

    margin-bottom: 20px;

  }

  .ulm-field label {

    font-size: 14px;

  }

  .ulm-field input,

  .ulm-field select,

  .ulm-field textarea {

    font-size: 15px;

    padding: 14px 16px;

  }

  .ulm-checkbox {

    font-size: 14px;

    gap: 12px;

  }

  .ulm-checkbox span {

    width: 22px;

    height: 22px;

    min-width: 22px;

  }

  .ulm-btn {

    height: 52px;

    font-size: 15px;

    border-radius: 12px;

  }

}

/*==================================================
LARGE DESKTOP
==================================================*/

@media(min-width:1400px) {

  .ulm-form-container {

    max-width: 1200px;

  }

}

/*==================================================
PRINT
==================================================*/

@media print {

  .ulm-btn,

  .ulm-response {

    display: none !important;

  }

}