/* This file is reserved for overriding and extending the template styles. */


/* Remove all borders, background, and outlines from PhoneInput */
.PhoneInput {
    border: none !important;
    box-shadow: none !important;
    background-color: #F8F8F8 !important;
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  /* Make the whole thing look like a form-control */
  .PhoneInput input {
    @apply form-control; /* If using Tailwind with forms plugin */
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    outline: none !important;
    width: 100%;
    height: auto;
  }
  
  /* Style the country selector (flag dropdown) like a form-control */
  .PhoneInputCountry {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-right: 8px;
    
    outline: none !important;
    display: flex;
  }

  .PhoneInputCountryIcon--border {
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
  }
  
  
  /* Optional: You can even hide the dropdown arrow if not needed */
  .PhoneInputCountrySelectArrow {
    display: none !important;
  }
  
  /* Remove focus styles */
  .PhoneInput--focus,
  .PhoneInputCountry:focus,
  .PhoneInput input:focus {
    box-shadow: none !important;
    border: none !important;
  }
  
  /* CSS variable overrides */
  :root {
    --PhoneInputCountryFlag-borderColor: transparent;
    --PhoneInputCountrySelectArrow-color: transparent;
    --PhoneInputCountrySelectArrow-opacity: 0;
    --PhoneInput-color--focus: transparent;
  }