﻿:root {
        --dusk: #9a1e21;
        --dusk-hover: #cb0000;
      }

      body {
        font-family: 'Inter', sans-serif;
        background: #000000;
        min-height: 100vh;
      }

      /* Vacancy Section Layout */
      .vacancy-section {
        padding: 60px 0;
        min-height: calc(100vh - 200px);
      }

      .vacancy-layout {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 60px;
        align-items: start;
      }

      @media (max-width: 991px) {
        .vacancy-layout {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .vacancy-form-col {
          order: 2;
        }
        .vacancy-info-col {
          order: 1;
        }
      }

      /* Compact Form Styles */
      .vacancy-form-col {
        position: sticky;
        top: 30px;
      }

      .compact-form {
        /* background: #ffffff; */
        border-radius: 16px;
        /* padding: 32px 28px; */
        /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); */
      }

      .compact-form h2 {
        font-size: 24px;
        font-weight: 600;
        /* color: #1a1a1a; */
        margin-bottom: 24px;
        text-align: center;
      }

      .compact-form .form-field {
        margin-bottom: 16px;
      }

      .compact-form label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #555;
        margin-bottom: 6px;
      }

      .compact-form .w-input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: #fafafa;
      }

      .compact-form .w-input:focus {
        outline: none;
        border-color: var(--dusk);
        box-shadow: 0 0 0 3px rgba(154, 30, 33, 0.1);
        background: #fff;
      }

      .compact-form .w-input::placeholder {
        color: #aaa;
      }

      #signup-submit-button {
        width: 100%;
        background-color: var(--dusk);
        border: none;
        border-radius: 50px;
        padding: 14px 24px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        margin-top: 20px;
        transition: background-color 0.2s, transform 0.2s;
      }

      #signup-submit-button:hover {
        background-color: var(--dusk-hover);
        transform: translateY(-1px);
      }

      .compact-form .small-text {
        font-size: 11px;
        color: #888;
        text-align: center;
        margin-top: 14px;
        line-height: 1.5;
      }

      .compact-form .small-text a {
        color: var(--dusk);
        text-decoration: none;
      }

      .compact-form .small-text a:hover {
        text-decoration: underline;
      }

      /* Vacancy Info Styles */
      .vacancy-info-col {
        color: #fff;
        padding-right: 20px;
      }

      .vacancy-title {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 8px;
        line-height: 1.2;
        background: linear-gradient(135deg, #fff 0%, #e0c0c0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .vacancy-company {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 32px;
        font-weight: 500;
      }

      .vacancy-intro {
        margin-bottom: 36px;
      }

      .vacancy-intro p {
        font-size: 16px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 16px;
      }

      .vacancy-block {
        margin-bottom: 32px;
      }

      .vacancy-block h3 {
        font-size: 22px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 2px solid rgba(154, 30, 33, 0.5);
      }

      .vacancy-block ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .vacancy-block li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
      }

      .vacancy-block li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background: var(--dusk);
        border-radius: 50%;
      }

      /* Footer Styles */
      .bg-black {
        background: #000000 !important;
      }
      .bg-lt-black {
        background: rgba(23, 23, 23, 0.8) !important;
      }
      .fs-14 {
        font-size: 14px;
      }
      .fs-15 {
        font-size: 15px;
      }
      footer h6 {
        color: #ffffff;
        font-weight: 600;
        margin-bottom: 12px;
      }
      footer ul {
        margin: 0;
        padding: 0;
      }
      footer ul li {
        margin-bottom: 8px;
      }
      footer .text-secondary {
        color: #9ca3af !important;
      }
      footer .text-secondary:hover {
        color: #ffffff !important;
      }
    /* White Bridge form field and button styles */
.lead-form .form-field label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.lead-form .w-input,
.lead-form input[type='text'],
.lead-form input[type='email'],
.lead-form input[type='tel'] {
  width: 100%;
  height: 56px;
  border-radius: 0;
  border: 1px solid #e9ecef;
  background: transparent;
  color: #ffffff;
  padding: 12px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.08s ease;
}

.lead-form .w-input::placeholder,
.lead-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Prevent browser autofill from painting light background on text-like fields */
.lead-form input:-webkit-autofill,
.lead-form input:-webkit-autofill:hover,
.lead-form input:-webkit-autofill:focus,
.lead-form textarea:-webkit-autofill,
.lead-form textarea:-webkit-autofill:hover,
.lead-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
  box-shadow: 0 0 0 1000px #000000 inset !important;
  transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
  -webkit-transition: background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s;
  caret-color: #ffffff;
}

/* Custom experience dropdown */
.custom-select-field {
  position: relative;
}

.custom-select-control {
  position: relative;
}

.custom-select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #b8c0cc;
  border-bottom: 2px solid #b8c0cc;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.custom-select-field.is-open .custom-select-icon {
  transform: translateY(-50%) rotate(-135deg);
}

.custom-select-trigger {
  cursor: pointer !important;
  padding-right: 44px;
  caret-color: transparent;
  background-image: none;
}

.custom-select-trigger[readonly],
.custom-select-trigger:read-only {
  cursor: pointer !important;
}

.custom-select-field.is-open .custom-select-trigger {
  border-color: #e9ecef;
  box-shadow: none;
}

.custom-select-trigger:focus {
  background: transparent !important;
  color: #ffffff !important;
}

.custom-select-trigger::placeholder,
.custom-select-field.is-open .custom-select-trigger::placeholder,
.custom-select-trigger:focus::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.custom-select-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #000000;
  border: 1px solid #e9ecef;
}

.custom-select-option {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(154, 30, 33, 0.75);
  background: transparent;
  color: #ffffff;
  text-align: left;
  padding: 12px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  cursor: pointer !important;
}

.custom-select-option:last-child {
  border-bottom: 0;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  background: rgba(154, 30, 33, 0.18);
  outline: none;
}

.lead-form .w-input:focus,
.lead-form input:focus {
  border-color: #9a1e21;
  box-shadow:
    inset 0 0 0 1000px #000000,
    0 4px 12px rgba(154, 30, 33, 0.15),
    0 0 0 3px rgba(154, 30, 33, 0.1) !important;
  background: transparent !important;
  color: #ffffff;
}

.lead-form input[type='tel']:focus {
  background: transparent;
  color: #ffffff;
}

/* Valid inputs - green border */
.lead-form input.valid,
.lead-form .w-input.valid {
  border-color: #10b981 !important;
}

/* Invalid inputs - red border */
.lead-form input.invalid,
.lead-form .w-input.invalid {
  border-color: #ef4444 !important;
}

.lead-form input.invalid:focus,
.lead-form .w-input.invalid:focus {
  border-color: #ef4444 !important;
  box-shadow:
    inset 0 0 0 1000px #000000,
    0 4px 12px rgba(239, 68, 68, 0.15),
    0 0 0 3px rgba(239, 68, 68, 0.1) !important;
  background: transparent !important;
}

.lead-form input.valid:focus,
.lead-form .w-input.valid:focus {
  border-color: #10b981 !important;
  box-shadow:
    inset 0 0 0 1000px #000000,
    0 4px 12px rgba(16, 185, 129, 0.15),
    0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  background: transparent !important;
}

/* Int-tel-input field background match */
.iti--allow-dropdown input[type='tel'],
.iti--allow-dropdown input[type='text'],
.iti--allow-dropdown input {
  background: transparent !important;
  color: #ffffff !important;
  padding-left: 56px !important;
}
.iti input[type='tel'] {
  color: #ffffff !important;
}
.iti--allow-dropdown input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}
.iti--allow-dropdown input:not(:placeholder-shown) {
  background: transparent !important;
  color: #ffffff !important;
}
.iti input {
  color: #ffffff !important;
}
.iti--allow-dropdown input:focus {
  background: transparent !important;
  color: #ffffff !important;
}
.iti__selected-flag {
  background: transparent !important;
}
.iti--allow-dropdown:has(input:not(:placeholder-shown)) .iti__selected-flag,
.iti--allow-dropdown:has(input:focus) .iti__selected-flag {
  background: transparent !important;
}

.lead-form #signup-submit-button {
  width: 100%;
  height: 56px;
  border-radius: 50px;
  padding: 16px 32px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  border: 0;
  color: #fff;
  background: #9a1e21;
  box-shadow: 0 8px 20px rgba(154, 30, 33, 0.25);
  cursor: pointer;
}

.lead-form #signup-submit-button:hover {
  background: #cb0000;
  box-shadow: 0 12px 28px rgba(154, 30, 33, 0.35);
}

/* Consent text under submit button */
.lead-form .small-text {
  margin-top: 16px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.5;
}

.lead-form .small-text a {
  color: #9a1e21;
  text-decoration: underline;
}
      /* Int Tel Input fix */
      .iti {
        width: 100%;
      }
      /* Phone dropdown readability override */
.iti--container .iti__dropdown-content,
.iti__country-list {
  background: #000000 !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.iti--container .iti__search-input,
.iti__search-input {
  display: none !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(154, 30, 33, 0.8) !important;
}

.iti li,
.iti__country {
  margin: 0 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(154, 30, 33, 0.75) !important;
}

.iti__country:last-child {
  border-bottom: 0 !important;
}

.iti__country-name,
.iti__dial-code {
  color: #ffffff !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
  background-color: rgba(154, 30, 33, 0.2) !important;
  color: #ffffff !important;
}

.iti__country--highlight {
  background-color: rgba(154, 30, 33, 0.3) !important;
  color: #ffffff !important;
}
