/* ===== Existing Styles ===== */

/* The grid container */
.daily-digs-boosts-grid {
  display: grid;
  grid-gap: 16px;
  /* By default, we’ll allow multiple columns on larger screens */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: 600px;
  margin: 0 auto;
}

/* 2 columns on mobile */
@media (max-width: 768px) {
  .daily-digs-boosts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Individual boost cards */
.boost-card {
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
  background: #fff;
  padding: 8px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.boost-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.boost-card.expired-boost {
  opacity: 0.7; /* visually indicate expired if you wish */
}

/* The image at the top of each card */
.boost-image img {
  width: 100%;
  max-height: auto;
  display: block;
}

/* Surprise Image Specific */
.boost-image .surprise-image {
  /* Any specific styles for surprise images can go here */
}

/* Card title text (centered) */
.boost-name {
  text-align: center;
  font-weight: bold;
  margin-top: 8px;
  color: #333333;
}

/* Pill area for locked/unlocked/expired statuses */
.boost-pill {
  margin: 8px 0;
}

.boost-status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8em;
  color: #fff;
}

.boost-status-pill.locked {
  background: #f00; /* red for locked */
}

.boost-status-pill.unlocked {
  background: #080; /* green for unlocked */
}

.boost-status-pill.expired {
  background: #888; /* gray for expired */
}

/* Show how many answers have been submitted, etc. */
.boost-submissions-text {
  margin: 8px 0;
  font-size: 0.9em;
  color: #555;
}

/* ===== Modal Overlay & Content ===== */
.daily-digs-modal-overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: none; /* will be shown via JS */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.daily-digs-modal-content {
  background: #fff;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  border-radius: 8px;
  position: relative;
  text-align: center;
}

/* Close button in the modal */
.daily-digs-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 1.5em;
  color: #333;
  text-decoration: none;
}

/* The modal’s boost title (centered) */
.boost-title {
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 700;
}

/* Modal image: max height of 75px */
.boost-modal-content img {
  max-height: 75px;
  width: auto; 
  display: block;
  margin: 0 auto; /* center horizontally if desired */
  margin-bottom: 16px;
}

/* Pill styling for the “Required Answers to Unlock” text in the modal */
.boost-modal-content > p {
  background: white;
  color: #3C1C8F;
  border: solid 1px;
  border-color: #dadada;
  border-radius: 16px;
  padding: 4px 8px;
  margin-right: 6px;
}

/* Descriptions */
.boost-description {
	font-family: 'Montserrat', Helvetica, sans-serif;
}

/* Instructions area and claim button */
.boost-instructions {
  margin-top: 16px;
  font-family: 'Montserrat', Helvetica, sans-serif;
}

.boost-claim-button .button {
  display: inline-block;
  background: #3C1C8F;
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-family: 'Montserrat', Helvetica, sans-serif;
  /* Full width button */
  width: 100%;
  text-align: center;
}

/* ===== New Styles for "Is Surprise?" Functionality ===== */

/* Increased padding and box-shadow for better aesthetics */
.boost-card {
  padding: 16px; /* Increased from 8px */
}

.boost-card.expired-boost {
  /* No additional styles needed as per requirements */
}

/* Adjusted .boost-status-pill for better visibility */
.boost-status-pill.locked {
  background: #e74c3c; /* Changed to a slightly different red */
}

.boost-status-pill.unlocked {
  background: #27ae60; /* Changed to a brighter green */
}

.boost-status-pill.expired {
  background: #95a5a6; /* Changed to a lighter gray */
}

/* Modal Enhancements */

/* Close button hover effect */
.daily-digs-modal-close:hover {
  color: #e74c3c; /* Red color on hover */
}

/* Boost Title within modal */
.boost-title {
  font-size: 1.5em; /* Increased font size */
}

/* Required Answers Pill in Modal */
.boost-modal-content > p {
  background: #ffffff; /* Ensuring white background */
  color: #3C1C8F;
  border: solid 1px #dadada;
  border-radius: 16px;
  padding: 8px 16px; /* Increased padding */
  margin: 0 auto 20px auto; /* Centered with bottom margin */
  display: inline-block;
}

/* Boost Description within modal */
.boost-description {
  margin-bottom: 20px; /* Added bottom margin */
}

/* Instructions area within modal */
.boost-instructions {
  margin-top: 20px; /* Increased top margin */
}

/* Claim Boost Button Enhancements */
.boost-claim-button .button {
  padding: 12px 24px; /* Increased padding */
  transition: background 0.3s ease; /* Smooth hover transition */
}

.boost-claim-button .button:hover {
  background: #2a0a6d; /* Darker purple on hover */
}

/* ===== New Styles for Surprise Boosts ===== */

/* Surprise Image Styling */
.boost-image .surprise-image {
  /* Add any specific styles for Surprise Images here */
  /* For example, adding a border or specific dimensions */
  border-radius: 4px;
}

/* Surprise Title Styling */
.boost-name {
  /* No additional styles needed; handles both Boost Name and Surprise Title */
}

/* Ensure Surprise Title in Modal is styled similarly */
.boost-modal-content .boost-title {
  /* Inherited from existing .boost-title styles */
}

/* Optional: Styling for Surprise Description if needed */
.boost-modal-content .boost-description {
  /* Additional styles can be added here */
}

/* Optional: Adjustments for Surprise-specific elements within the modal */
.boost-modal-content .boost-instructions {
  /* Already handled in existing styles */
}