/**
 * GWL External Link Alert Styles v2.0
 * * Custom styling for the gaming site overlay.
 */

/* The Dark Background Overlay */
.gwl-external-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Slightly darker for gaming feel */
  z-index: 99999; /* High z-index to stay above BuddyPress elements */
  justify-content: center;
  align-items: center;
  animation: gwlFadeIn 0.3s ease;
}

@keyframes gwlFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The Modal Box */
.gwl-overlay-content {
  background-color: #ffffff; /* White background for the message box */
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 600px;
  animation: gwlSlideIn 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@keyframes gwlSlideIn {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 1. Title Bar: #555555 background, Black text at 150% */
.gwl-overlay-header {
  background-color: #98cb00;
  padding: 15px 20px;
  border-bottom: 1px solid #000000;
}

.gwl-overlay-header h3 {
  margin: 0;
  color: #000000; /* Black text as requested */
  font-size: 1.5em; /* 150% of normal text */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 2. Message Body: 20px Dark Grey text */
.gwl-overlay-body {
  padding: 30px 25px;
  color: #333333; /* Dark grey */
  font-size: 20px; 
  line-height: 1.4;
}

/* 3. Destination Box: Light grey bg, #98cb00 left bar */
.gwl-destination-url {
  background-color: #eeeeee; /* Light grey background */
  padding: 15px;
  border-radius: 2px;
  border-left: 6px solid #98cb00; /* The green bar on the left */
  margin-top: 20px;
  word-break: break-all;
  font-family: 'Courier New', Courier, monospace;
}

/* "Destination" label: Black */
.gwl-destination-url strong {
  color: #000000;
  display: block;
  margin-bottom: 5px;
}

/* The URL: Dark Grey */
#gwl-external-url {
  color: #444444; 
  font-weight: 600;
}

/* Footer & Buttons */
.gwl-overlay-footer {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
}

.gwl-btn {
  padding: 12px 25px;
  border: none;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  text-transform: uppercase;
}

.gwl-btn:hover {
  opacity: 0.9;
}

/* Proceed: #98cb00 with white text */
.gwl-proceed-btn {
  background-color: #98cb00;
  color: #ffffff;
}

/* Cancel: Light grey with darker grey text */
.gwl-cancel-btn {
  background-color: #dddddd;
  color: #555555;
}

/* Mobile adjustments */
@media (max-width: 500px) {
  .gwl-overlay-footer {
    flex-direction: column;
  }
  .gwl-btn {
    width: 100%;
  }
}