/* ============================================================================
   REGISTRATION FORM CSS
   Organized by HTML structure hierarchy
   ============================================================================ */

/* ============================================================================
   1. CONTAINER & BASE LAYOUT
   ============================================================================ */

#jcd-registration-form-container {
  background-color: #F5F5F5;
}

#jcd-registration-form-container #form_auth2 {
  margin-top: 0;
}

/* ============================================================================
   2. FORM HEADER
   ============================================================================ */

.jcd-form-header {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  width: 100%;
}

/* Header Icon */
.jcd-header-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jcd-header-icon svg {
  width: 48px;
  height: 48px;
}

/* Header Text */
.jcd-header-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.jcd-header-title {
  margin: 0;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.96px;
}

.jcd-header-subtitle p {
  margin: 0;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.32px;
}

/* ============================================================================
   3. PROGRESS BAR
   ============================================================================ */

.jcd-progress-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 24px;
}

.jcd-progress-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.32px;
  color: #000000;
  text-align: right;
  margin: 0;
  width: 100%;
}

.jcd-progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
}

.jcd-progress-track {
  position: absolute;
  width: 100%;
  height: 6px;
  background: #FFF;
  border-radius: 3px;
}

.jcd-progress-fill {
  position: absolute;
  height: 6px;
  background: #F00;
  border-radius: 3px;
  width: 50%;
  transition: width 0.3s ease-in-out;
}

.jcd-progress-fill[data-progress="50"] {
  width: 50%;
}

.jcd-progress-fill[data-progress="100"] {
  width: 100%;
}

/* ============================================================================
   4. FORM STEPS
   ============================================================================ */

.jcd-form-step {
  width: 100%;
}

.jcd-step-active {
  display: block;
}

/* ============================================================================
   5. FORM FIELDS - STEP 1 (Basic Information)
   ============================================================================ */

/* Field Group Structure */
.jcd-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  width: 100%;
}

/* Field Labels */
.jcd-field-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.32px;
  color: #000000;
  display: flex;
  gap: 4px;
  align-items: baseline;
  margin: 0;
}

.jcd-required-asterisk {
  color: #FF0000;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: normal;
}

/* Input Wrapper & Icon */
.jcd-input-wrapper {
  position: relative;
  width: 100%;
}

.jcd-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 1;
}

/* Form Inputs */
#form_auth2 input.jcd-form-input,
#form_auth2 select.jcd-form-select {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #E5E5E6;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: #000000;
  outline: none;
  transition: border-color 0.2s ease;
}

#form_auth2 input.jcd-form-input.jcd-input-with-icon {
  padding-left: 42px;
}

#form_auth2 input.jcd-form-input::placeholder {
  color: #7E7F83;
}

#form_auth2 input.jcd-form-input:focus,
#form_auth2 select.jcd-form-select:focus {
  border-color: #DC2E14;
}

#form_auth2 input.jcd-form-input[name="fio"] {
  padding-left: 14px;
  padding-right: 14px;
}

/* Field Helper Text (Error Messages) */
.jcd-field-helper {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  color: #DC2E14;
  margin: 0;
  display: none;
  margin-top: 4px;
}

.jcd-field-helper:not(:empty) {
  display: block;
}

/* ============================================================================
   6. FORM FIELDS - STEP 2 (Additional Information)
   ============================================================================ */

/* Phone & Country Row Layout */
.jcd-field-row {
  display: flex;
  flex-direction: column;
  column-gap: 18px;
  width: 100%;
  margin-bottom: 18px;
}

.jcd-field-half {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* --- WhatsApp Checkbox --- */
.jcd-whatsapp-group {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 18px;
  order: 2;
}

input[type=checkbox].jcd-whatsapp-checkbox {
  margin: 0;
  width: 15px;
  height: 15px;
  aspect-ratio: 1/1;
  border-radius: 4px;
  background: #D9D9D9;
}

.jcd-field-row .jcd-field-half:first-child {
  order: 1;
}

.jcd-field-row .jcd-field-half:last-child {
  order: 3;
}

.jcd-whatsapp-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin: 0;
}

/* Mobile-first styles */
input[type=checkbox].jcd-whatsapp-checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  background: #D9D9D9;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=checkbox].jcd-whatsapp-checkbox:focus {
  outline: none;
}

input[type=checkbox].jcd-whatsapp-checkbox:checked {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

.jcd-whatsapp-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.24px;
  color: #4F4F4F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 272px;
}

/* --- Phone Field with intl-tel-input --- */
.jcd-phone-input {
  width: 100% !important;
  padding-left: 98px !important;
}

.iti {
  width: 100%;
  display: block;
}

.iti__flag-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 0;
}

.iti__selected-flag {
  padding: 0 8px 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  border-right: 1px solid #D9D9D9;
  background: #FFFFFF;
  border-radius: 6px 0 0 6px;
}

.iti__selected-country .iti__selected-dial-code {
  margin-top: 1px;
  margin-left: 8px;
  color: #0A0000;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.32px;
}

.iti__arrow {
  display: none !important;
}

.iti__selected-flag::after {
  content: '';
  width: 18px;
  height: 18px;
  margin-left: 4px;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M14.0326 6.15752C13.9629 6.08722 13.8799 6.03143 13.7885 5.99335C13.6971 5.95527 13.5991 5.93567 13.5001 5.93567C13.4011 5.93567 13.3031 5.95527 13.2117 5.99335C13.1203 6.03143 13.0373 6.08722 12.9676 6.15752L9.53261 9.59251C9.46288 9.66281 9.37993 9.7186 9.28854 9.75668C9.19714 9.79475 9.09912 9.81436 9.00011 9.81436C8.9011 9.81436 8.80307 9.79475 8.71167 9.75668C8.62028 9.7186 8.53733 9.66281 8.46761 9.59251L5.03261 6.15752C4.96288 6.08722 4.87993 6.03143 4.78854 5.99335C4.69714 5.95527 4.59912 5.93567 4.50011 5.93567C4.4011 5.93567 4.30307 5.95527 4.21167 5.99335C4.12028 6.03143 4.03733 6.08722 3.96761 6.15752C3.82792 6.29804 3.74951 6.48813 3.74951 6.68627C3.74951 6.8844 3.82792 7.07449 3.96761 7.21501L7.41011 10.6575C7.83198 11.0789 8.40385 11.3155 9.00011 11.3155C9.59636 11.3155 10.1682 11.0789 10.5901 10.6575L14.0326 7.21501C14.1723 7.07449 14.2507 6.8844 14.2507 6.68627C14.2507 6.48813 14.1723 6.29804 14.0326 6.15752Z" fill="%23374957"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.iti__selected-country-primary {
  padding: 8px;
  border-radius: 6px;
  border-right: 1px solid #D9D9D9;
}

.iti__selected-country-primary .iti__flag,
.iti__selected-flag .iti__flag {
  width: 16px !important;
  height: 12px !important;
  transform: scale(0.8);
  transform-origin: left center;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .iti__selected-country-primary .iti__flag,
  .iti__selected-flag .iti__flag {
    background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/img/flags@2x.png') !important;
  }
}

.iti__selected-country-primary::after {
  content: '';
  width: 18px;
  height: 18px;
  margin-left: 4px;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M14.0326 6.15752C13.9629 6.08722 13.8799 6.03143 13.7885 5.99335C13.6971 5.95527 13.5991 5.93567 13.5001 5.93567C13.4011 5.93567 13.3031 5.95527 13.2117 5.99335C13.1203 6.03143 13.0373 6.08722 12.9676 6.15752L9.53261 9.59251C9.46288 9.66281 9.37993 9.7186 9.28854 9.75668C9.19714 9.79475 9.09912 9.81436 9.00011 9.81436C8.9011 9.81436 8.80307 9.79475 8.71167 9.75668C8.62028 9.7186 8.53733 9.66281 8.46761 9.59251L5.03261 6.15752C4.96288 6.08722 4.87993 6.03143 4.78854 5.99335C4.69714 5.95527 4.59912 5.93567 4.50011 5.93567C4.4011 5.93567 4.30307 5.95527 4.21167 5.99335C4.12028 6.03143 4.03733 6.08722 3.96761 6.15752C3.82792 6.29804 3.74951 6.48813 3.74951 6.68627C3.74951 6.8844 3.82792 7.07449 3.96761 7.21501L7.41011 10.6575C7.83198 11.0789 8.40385 11.3155 9.00011 11.3155C9.59636 11.3155 10.1682 11.0789 10.5901 10.6575L14.0326 7.21501C14.1723 7.07449 14.2507 6.8844 14.2507 6.68627C14.2507 6.48813 14.1723 6.29804 14.0326 6.15752Z" fill="%23374957"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
}

.iti.jcd-dropdown-open .iti__selected-flag::after,
.iti.iti--open .iti__selected-flag::after,
.iti__selected-country[aria-expanded="true"] .iti__selected-flag::after,
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary::after {
  transform: rotate(180deg);
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background: #FAFAFA;
}

/* intl-tel-input Dropdown */
.iti__dropdown-content {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  max-height: 250px;
  font-family: 'Roboto', sans-serif;
  border: 1px solid #E5E5E6;
  margin-top: 4px;
  overflow: hidden;
}

/* Mobile inline dropdown positioning */
@media only screen and (max-width: 767px) {
  .iti__dropdown-content {
    position: absolute;
    width: 100%;
    max-height: 250px;
    z-index: 1000;
  }
  
  /* Ensure trigger button matches mobile input height */
  .iti__selected-flag {
    height: 48px;
    display: flex;
    align-items: center;
  }
}

.iti__country-list {
  max-height: 178px !important;
}

.iti__country {
  padding: 10px 14px;
  border-bottom: 1px solid #F0F0F0;
}

.iti__country:last-child {
  border-bottom: none;
}

.iti__country:hover {
  background: #F5F5F5;
}

.iti__country.iti__highlight {
  background: #FFF5F5;
}

.iti__country-name {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #000000;
}

.iti__dial-code {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #7E7F83;
}

/* --- Country Dropdown --- */
.jcd-country-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.jcd-country-selected {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 0;
  background: #FFFFFF;
  border: 1px solid #E5E5E6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.jcd-country-selected:hover {
  border-color: #DC2E14;
}

.jcd-country-selected.active {
  border-color: #DC2E14;
}

.jcd-country-flag-box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  border-right: 1px solid #D9D9D9;
  height: 100%;
  justify-content: center;
}

.jcd-country-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.jcd-country-selected.active .jcd-country-arrow {
  transform: rotate(180deg);
}

.jcd-country-name {
  flex: 1;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #7E7F83;
  padding-left: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jcd-country-flag {
  display: inline-block;
  vertical-align: middle;
}

.jcd-country-flag.iti__flag {
  background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/img/flags.png');
  background-repeat: no-repeat;
  width: 16px !important;
  height: 12px !important;
  transform: scale(0.8);
  transform-origin: left center;
  display: inline-block;
  vertical-align: middle;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .jcd-country-flag.iti__flag {
    background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/img/flags@2x.png') !important;
  }
}

/* Country Dropdown List */
.jcd-country-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E5E5E6;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 250px;
}

.jcd-country-search {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid #E5E5E6;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  outline: none;
  flex-shrink: 0;
}

.jcd-country-search:focus {
  background: #F9F9F9;
}

.jcd-country-options {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 178px;
}

.jcd-country-option {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #000000;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #F0F0F0;
}

.jcd-country-option:last-child {
  border-bottom: none;
}

.jcd-country-option:hover {
  background: #FFF5F5;
}

.jcd-country-option.jcd-highlight {
  background: #FFF5F5;
}

.jcd-country-option.selected {
  background: #FFF5F5;
  color: #DC2E14;
  font-weight: 500;
}

.jcd-country-option .iti__flag {
  flex-shrink: 0;
  align-self: center;
}

/* --- Honeypot Field --- */
.jcd-honeypot {
  display: none !important;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* --- Required Note --- */
.jcd-required-note {
  color: #4a4a4a;
  font-size: 1.2em;
  font-weight: bold;
}

/* --- Cloudflare Turnstile --- */
.cf-turnstile {
  display: flex;
  margin: 16px 0;
  width: 100%;
}

/* --- Submit & Continue Button --- */
button[type=button].jcd-continue-button,
button[type=submit].jcd-submit-button {
  width: 100%;
  height: 43px;
  background: #DC1C1C;
  border: none;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: none;
}

button[type=button].jcd-continue-button:hover,
button[type=submit].jcd-submit-button:hover {
  background-color: #DC1C1C;
}

button[type=button].jcd-continue-button:disabled,
button[type=submit].jcd-submit-button:disabled {
  background-color: #999999;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

button[type=button].jcd-continue-button {
  margin: -2px 0 20px 0;
}

button[type=submit].jcd-submit-button {
  margin: 0 0 20px 0;
}

/* ============================================================================
   7. SHARED ELEMENTS (Both Steps)
   ============================================================================ */

/* Login Link */
.jcd-login-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.32px;
  color: #000000;
  text-align: center;
  margin: 0 auto;
  width: 247px;
}

.jcd-login-link a {
  color: #000000;
  text-decoration: underline;
  font-weight: 700;
}

.jcd-login-link a:hover {
  color: #DC2E14;
}

/* Back Button (Currently Commented Out in HTML) */
.jcd-back-button {
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  border: 2px solid #DC1C1C;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: #DC1C1C;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 24px;
}

.jcd-back-button:hover {
  background: #FFF5F5;
}

.jcd-back-button:active {
  background: #FFE5E5;
}

/* ============================================================================
   8. RESPONSIVE
   ============================================================================ */

@media only screen and (min-width: 768px) {
  .jcd-form-header {
    margin-bottom: 24px;
  }

  .jcd-header-icon {
    width: 88px;
    height: 88px;
  }

  .jcd-header-icon svg {
    width: 88px;
    height: 88px;
  }

  .jcd-header-subtitle p {
    font-size: 20px;
    line-height: normal;
    letter-spacing: 0.4px;
  }
  
  .jcd-field-group {
    gap: 8px;
  }

  #form_auth2 input.jcd-form-input,
  #form_auth2 select.jcd-form-select {
    height: 56px;
    font-size: 16px;
    letter-spacing: 0.32px;
  }

  .jcd-login-link {
    width: 100%;
  }

  .jcd-field-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 18px;
    width: 100%;
  }

  .jcd-field-half {
    flex: 0 0 calc(50% - 9px);
  }

  .jcd-whatsapp-group {
    flex-basis: 100%;
    order: 4;
    margin-bottom: 0;
  }

  input[type=checkbox].jcd-whatsapp-checkbox {
    width: 18px;
    height: 18px;
  }

  .jcd-whatsapp-text {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.28px;
    max-width: 280px;
  }

  .jcd-country-selected {
    height: 56px;
  }

  .jcd-country-flag.iti__flag,  
  .iti__selected-country-primary .iti__flag,
  .iti__selected-flag .iti__flag {
    width: 20px !important;
    height: 15px !important;
    transform: none;
  }

  .cf-turnstile {
    margin: 18px 0 24px 0;
  }

  button[type=button].jcd-continue-button,
  button[type=submit].jcd-submit-button {
    height: 47px;
  }

  button[type=button].jcd-continue-button {
    margin: 6px 0 24px 0;
  }

  button[type=submit].jcd-submit-button {
    margin: 0 0 24px 0;
  }

  @media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    .jcd-country-flag.iti__flag {
      background-size: 5762px 15px;
    }
  }
}