/* Styles for notices when utilization check is enabled */
.woocommerce-message.edbp-utilization-notice {
  border-left-width: 4px;
  border-left-style: solid;
  color: #333;
  /* Darker text for readability */
  background-color: #fff;
  /* Reset base background */
}

/* 1. Fully utilized (Green) */
.woocommerce-message.edbp-fully-utilized {
  background-color: #e6f3e9;
  /* Light Green */
  border-left-color: #5cb85c;
  /* Bootstrap Success Green */
}

/* 2. Not fully utilized (Yellow/Warning) */
.woocommerce-message.edbp-not-fully-utilized {
  display: block;
  background-color: #fffbe6;
  /* Light Yellow */
  border-left-color: #f0ad4e;
  /* Bootstrap Warning Yellow */
}

/* Ensure the content inside the notice is correctly flexed for horizontal layout */
.edbp-utilization-notice > .edbp-notice-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* Allows wrapping on smaller screens */
}

/* Ensure the text spans the available space */
.edbp-utilization-notice > .edbp-notice-content-wrapper > .edbp-message-text {
  flex-grow: 1;
  margin-right: 10px;
  /* Space between text and button */
  min-width: auto;
  /* Minimum width for the text before wrapping */
}

/* Button container: Prevents shrinking, always stays at the end of the line */
.edbp-notice-content-wrapper > div:last-child {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 10px;
}

.edbp-utilization-notice > .edbp-notice-content-wrapper .button {
  background-color: #f0ad4e;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- Responsive: Force Wrap on Small Screens (< 768px) --- */
@media (max-width: 767px) {
  .edbp-utilization-notice > .edbp-notice-content-wrapper {
    flex-wrap: wrap; /* Wrap items onto new lines */
    justify-content: center; /* Center content when wrapped */
    gap: 10px; /* Add vertical space between wrapped elements */
  }

  .edbp-utilization-notice > .edbp-notice-content-wrapper > .edbp-message-text {
    flex-basis: 100%; /* Text takes full width */
    text-align: center;
    margin-right: 0px; /* Remove right margin when stacked */
    margin-bottom: 5px; /* Space above the button */
  }

  /* Button container: Also takes full width and centers the button */
  .edbp-notice-content-wrapper > div:last-child {
    flex-basis: 100%;
    text-align: center;
    margin-left: 0px;
  }

  /* Center the button inside its full-width container */
  .edbp-notice-content-wrapper > div:last-child a.button {
    width: 100%; /* Make the button full width of the container */
    display: block;
  }
}