/* Meet the IRO Page Styles */

.gradient-custom {
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='69.282' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23f6f8fbff'/><path d='M13.333-3.849v23.094M6.667-15.396l20 11.547M13.333-19.245l20 11.547M20 0v23.094m20-34.641l-6.667 3.849-6.666 3.849L20 0M0-11.547l6.667 3.849 6.666 3.849L20 0m0-23.094l20 11.547v23.094L20 23.094l-6.667-3.849-6.666-3.849L0 11.547v-23.094l6.667-3.849 6.666-3.849zM40-3.769L20 7.698m20-3.849l-16.253 9.384L20 15.396M6.667-7.698v23.094m6.666 50.037v23.094M6.667 53.886l20 11.547M13.333 50.037l20 11.547M20 69.282v23.094m20-34.641l-6.667 3.849-6.666 3.849L20 69.282M0 57.735l6.667 3.849 6.666 3.849L20 69.282m0-23.094l20 11.547v23.094L20 92.376l-6.667-3.849-6.666-3.849L0 80.829V57.735l6.667-3.849 6.666-3.849zm20 19.325L20 76.98m20-3.849L20 84.678M6.667 61.584v23.094m26.666-53.886v23.094m-6.666-34.641l20 11.547M33.333 15.396l20 11.547M40 34.641v23.094m20-34.641l-6.667 3.849-6.666 3.849L40 34.641M20 23.094l6.667 3.849 6.666 3.849L40 34.641m0-23.094l20 11.547v23.094L40 57.735l-6.667-3.849-6.666-3.849L20 46.188V23.094l6.667-3.849 6.666-3.849zm20 19.325L40 42.339m20-3.849L40 50.037M26.667 26.943v23.094M-6.667 30.792v23.094m-6.666-34.641l20 11.547M-6.667 15.396l20 11.547M0 34.641v23.094m20-34.641l-6.667 3.849-6.666 3.849L0 34.641m-20-11.547l6.667 3.849 6.666 3.849L0 34.641m0-23.094l20 11.547v23.094L0 57.735l-6.667-3.849-6.666-3.849L-20 46.188V23.094l6.667-3.849 6.666-3.849zm20 19.325L0 42.339m20-3.849L0 50.037m-13.333-23.094v23.094'  stroke-width='1' stroke='%23ecececff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  min-height: 100vh;
}

.card-registration {
  border: none;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

.shadow-2-strong {
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.form-outline {
  position: relative;
  margin-bottom: 1rem;
}

.form-outline .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 10px 4px 10px;
  font-size: 14px;
  background: transparent;
  transition: all 0.3s ease;
}

.form-outline .form-control:focus {
  border-color: #f29200;
  box-shadow: 0 0 0 0.2rem rgba(242, 146, 0, 0.25);
  outline: none;
}

.form-outline .form-label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 4px;
}

.form-outline .form-control:focus + .form-label,
.form-outline .form-control:not(:placeholder-shown) + .form-label {
  top: 0;
  font-size: 11px;
  color: #f29200;
  font-weight: 500;
}

.form-control-lg {
  min-height: 45px;
  font-size: 14px;
}

.form-check-input:checked {
  background-color: #f29200;
  border-color: #f29200;
}

.form-check-input:focus {
  border-color: #f29200;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(242, 146, 0, 0.25);
}

.btn-primary {
  background: linear-gradient(135deg, #f29200 0%, #e67e00 100%);
  border: none;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #e67e00 0%, #cc6600 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(242, 146, 0, 0.4);
}

.btn-lg {
  padding: 12px 30px;
  font-size: 16px;
}

/* Card styling */
.card {
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.card-body {
  padding: 1.5rem;
}

/* Custom styling for intl-tel-input */
.iti {
  width: 100%;
  position: relative;
}

.iti__country-list {
  z-index: 1050;
}

.iti__selected-flag {
  border: none;
  background: transparent;
  padding: 12px 10px 4px 10px;
  height: 45px;
}

.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: transparent;
}

.iti__selected-flag:focus {
  outline: none;
}

/* Ensure the input field maintains proper styling */
.iti input[type=tel] {
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 12px 10px 4px 60px !important;
  font-size: 14px !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  min-height: 45px !important;
}

.iti input[type=tel]:focus {
  border-color: #f29200 !important;
  box-shadow: 0 0 0 0.2rem rgba(242, 146, 0, 0.25) !important;
  outline: none !important;
}

/* Adjust the form-outline for phone number field */
.form-outline:has(.iti) .form-label {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.3s ease;
  background: white;
  padding: 0 4px;
}

.form-outline:has(.iti input:focus) .form-label,
.form-outline:has(.iti input:not(:placeholder-shown)) .form-label {
  top: 0;
  left: 10px;
  font-size: 11px;
  color: #f29200;
  font-weight: 500;
}

/* Fallback for browsers that don't support :has() */
.phone-field-focused .form-label,
.phone-field-filled .form-label {
  top: 0 !important;
  left: 10px !important;
  font-size: 11px !important;
  color: #f29200 !important;
  font-weight: 500 !important;
}

.phone-field-empty .form-label {
  left: 60px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gradient-custom {
    padding: 20px 0;
  }

  .card-body {
    padding: 1rem;
  }

  .form-control-lg {
    min-height: 40px;
    font-size: 13px;
  }

  .form-outline .form-label {
    font-size: 13px;
  }

  .form-outline .form-control:focus + .form-label,
  .form-outline .form-control:not(:placeholder-shown) + .form-label {
    font-size: 10px;
  }
}

/* Animation for form elements */
.form-outline .form-control:focus {
  animation: focusIn 0.3s ease;
}

@keyframes focusIn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Custom styling for the registration form title */
h3.mb-4 {
  color: #333;
  font-weight: 600;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem !important;
}

/* Gender radio buttons styling */
.form-check-inline .form-check-input {
  margin-right: 0.5rem;
}

.form-check-inline .form-check-label {
  font-size: 14px;
  color: #495057;
  margin-right: 1rem;
}

/* Birthday datepicker styling */
.datepicker input {
  cursor: pointer;
}

/* Submit button container */
.mt-4.pt-2 {
  text-align: center;
  margin-top: 2rem !important;
}