/* Basic reset and utility classes */
* {
  box-sizing: border-box;
}
body {
  margin: 20px;
  font-family: sans-serif;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Container for phone prefix dropdown */
.phone-prefix-dropdown {
  position: relative;
  width: 185px;
}

#phoneForm {
  margin-top: 100px;
  text-align: center;
}



/* The toggle button */
.phone-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px; /* spacing between spinner/flag/prefix/arrow */
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 15px;
}
.phone-dropdown-toggle:focus {
  outline: 2px solid #007BFF;
}
.dropdown-arrow {
  margin-left: auto; /* pushes arrow to the far right */
}

.flag {
  border: 1px solid #00000021;
  width: 24px;
  height: 18px;
  object-fit: cover;
}

/* Spinner inside the button */
.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-top-color: #666;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* These are hidden by default and shown via JS */
.selected-flag {
  display: none;
}
.selected-prefix {
  display: none;
}

/* The dropdown content (including search + list) */
.phone-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  display: none; /* toggled in JS */
  max-height: 300px; /* Adjust as necessary */
  overflow-y: auto;
}

/* The search input inside the dropdown */
.phone-dropdown-search {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  font-size: 15px;
}

/* The scrollable list of countries */
.phone-dropdown-list {
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  outline: none;
}

/* Each phone-option <li> */
.phone-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 15px;
}
.phone-option img {
  width: 24px;
  height: 18px;
  object-fit: cover;
}
.phone-option:hover,
.phone-option:focus,
.phone-option.Current {
  background-color: #eee;
}

.phone-option.focused {
  background-color: #e6f7ff;
  color: #000;
}

/* The hidden ISO code input doesn't need styling */
.iso-code-input {
  display: none;
}

/* Flexbox for Phone Number Input */
.phone-number-input {
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Space between prefix and number fields */
}

.phone-prefix-dropdown {
  position: relative;
}

.phone-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between flag, prefix, and arrow */
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.phone-number-field {
  flex: 1; /* Take remaining space */
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}

.submit-button {
  padding: 5px 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}

.submit-button:hover {
  background-color: #0056b3;
}

/* Styled JSON Block */
#result {
  margin-top: 20px;
  font-family: 'Courier New', Courier, monospace;
  background-color: #2d2d2d; /* Dark mode */
  color: #f8f8f2; /* Light text */
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap; /* Preserve formatting */
  overflow-x: auto; /* Horizontal scroll for long JSON */
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Key styling */
#result .json-key {
  color: #66d9ef; /* Blue for keys */
}

/* String value styling */
#result .json-string {
  color: #a6e22e; /* Green for strings */
}

/* Number value styling */
#result .json-number {
  color: #a6e22e; /* Yellow for numbers */
}

/* Timezone value styling */
#result .json-timezone {
  color: #a6e22e; /* Orange for timezones */
}

/* Style for the Line Separator */
.line-separator {
  height: 1px;
  background-color: #dee2e6;
  margin: 4px 0;
  list-style-type: none;
}


/* Media Query for Mobile (Max Width: 768px) */
@media (max-width: 768px) {
  .phone-number-input {
    flex-direction: column; /* Stack elements vertically */
    gap: 10px; /* Reduce gap for mobile */
  }
  #result {
    width: 350px;
  }
}