/* Agents Page Specific Styles */

/* Country selector dropdown styling */
.country-chooser {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.current-country {
  background: #333 !important;
  color: white !important;
  border: 1px solid #555 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
  display: flex;
  align-items: center;
  height: 50px; /* Fixed height to prevent jumping */
  box-sizing: border-box; /* Include padding and border in height calculation */
}

.current-country:hover {
  background: #444 !important;
}

.country-selector {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: #2a2a2a !important;
  border: 1px solid #555 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  margin-top: 2px !important;
  max-height: 300px;
  overflow-y: auto;
}

.country-selections {
  background: #2a2a2a !important;
  color: white !important;
  position: static !important; /* Override absolute positioning from site.css */
  min-height: 160px !important; /* Force minimum height */
  background-color: #1a1a1a !important; /* Keep dark background from site.css */
  z-index: auto !important;
  overflow-y: auto !important; /* Restore scrollbar */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  max-height: 280px !important; /* Allow scrolling if needed */
}

.country-selections .caption {
  background: #1a1a1a !important;
  color: #ccc !important;
  border-bottom: 1px solid #444 !important;
  font-size: 0.9em !important;
  background-color: #2e0101 !important; /* Keep dark red background from site.css */
  color: white !important;
  padding: 12px 16px !important;
}

#country-list {
  max-height: 180px !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  background: #2a2a2a !important;
}

/* Custom scrollbar for country list */
#country-list::-webkit-scrollbar {
  width: 8px !important;
}

#country-list::-webkit-scrollbar-track {
  background: #1a1a1a !important;
}

#country-list::-webkit-scrollbar-thumb {
  background: #555 !important;
  border-radius: 4px !important;
}

#country-list::-webkit-scrollbar-thumb:hover {
  background: #666 !important;
}

.a-country {
  padding: 12px 16px !important;
  cursor: pointer !important;
  color: white !important;
  background: #2a2a2a !important;
  border-bottom: 1px solid #333 !important;
  transition: background-color 0.2s !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  background-color: #1f1f1f !important; /* Keep dark background from site.css */
  line-height: 1.2; /* Consistent line height */
  min-height: 44px; /* Ensure consistent row height */
}

.a-country:hover {
  background: #3a3a3a !important;
  color: #fff !important;
  background-color: #2c2c2c !important; /* Dark hover from site.css */
}

.a-country:last-child {
  border-bottom: none !important;
}

/* Flag styling */
.fi {
  width: 1.2em !important;
  height: 0.9em !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.flag {
  margin-right: 8px;
}

/* Ensure dropdown shows properly */
.country-selector[style*="display: block"] {
  display: block !important;
}

/* Override any conflicting site.css rules */
.agents-page .country-chooser,
.agents-page .country-chooser * {
  box-sizing: border-box !important;
}

/* Agent cards styling */
.agent-card {
  background: #333 !important;
  color: white !important;
  border: 1px solid #555 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 8px 0 !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.agent-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  background: #3a3a3a !important;
}

.agent-name {
  font-size: 1.2em !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
  color: #fff !important;
}

.agent-contact {
  margin: 4px 0 !important;
  color: #ccc !important;
}

.agent-contact i {
  margin-right: 8px !important;
  width: 16px !important;
  text-align: center !important;
}

/* Page layout styling */
/* Ensure full viewport height coverage and beyond */
html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.agents-page {
  min-height: 100vh;
  /* Remove the flex layout that was causing issues with long content */
  /* The black background will now extend naturally with content */
}

/* Override the max-width constraint on primary-content for full background coverage */
body.agents-page .primary-content {
  max-width: none !important; /* Override the 740px limit */
  width: 100% !important;
  background-color: inherit; /* Ensure it inherits the black background */
}

/* Ensure all primary-content children are properly contained but centered */
body.agents-page .primary-content > * {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Override the max-width constraint on footer for full background coverage */
body.agents-page .footer {
  max-width: none !important; /* Override the 740px limit */
  width: 100% !important;
  background-color: inherit; /* Ensure it inherits the black background */
}

/* Ensure all footer content is properly contained */
body.agents-page .footer > * {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Ensure agents container can grow as needed */
body.agents-page .agents-container {
  min-height: auto; /* Let it grow naturally */
}

.level-item {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.level-item:hover {
  background: rgba(0,0,0,0.1);
}

/* Override the existing site.css styles with more specific selectors */
body.agents-page .country-chooser .country-selector {
  position: absolute !important; /* Override site.css relative positioning */
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin: 0 !important; /* Override site.css margin */
}