/** Shopify CDN: Minification failed

Line 388:29 Expected identifier but found "#b49de1"
Line 1694:12 Unexpected "*"

**/
/**
 * Doomlings GenCon Scavenger Hunt - Optimized Styles
 * File path: assets/dgsh-styles.css
 * Cleaned up duplicates and removed staff verification styles
 */

/* ==========================================================================
   BASE STYLES & RESET  .button {
  background-color: var(--primary-color, #purple); 
  color: var(--purple);
}
#981b99;  #EFE7FF
   ========================================================================== */
:root {
 --purple: #981C98;
 --pink-background: #EFE7FF; 
 --purple-dark: #230950;
 --purple-medium: #755BA2;
}

.dgsh-phone-number,
.dgsh-progress-text,
.dgsh-progress-count,
.dgsh-reward-description2,
.dgsh-leaderboard-row,
.dgsh-instruction-content h3,
.dgsh-instruction-content p,
.dgsh-schedule-text,
.dgsh-auth-required-content p,
.dgsh-instruction-content p  {  color: var(--purple-dark)}

.dgsh-auth-benefits h3,
.dgsh-auth-benefits li:before {color: var(--purple)}


.dgsh-section-title,
.dgsh-auth-benefits h3, 
.dgsh-auth-required-content h2,
.dgsh-modal-title,
.dgsh-username {
  font-family: 'Poppins', sans-serif;
  color: var(--purple);
  text-transform: uppercase;
  font-size: 32px;
  line-height: 40px;
  border-bottom: 2px solid var(--pink-background);
  margin-bottom: 20px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.3px;
}
.dgsh-username {margin-bottom: 0 !important;}
.dgsh-auth-required-content h2{  font-size: 32px;
  line-height: 40px;  font-weight: 700;}

.dgsh-reward-name,
.dgsh-unlocked-reward-name2 {
  text-transform: uppercase;
  color: var(--purple);
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .dgsh-section-title,
  .dgsh-auth-benefits h3 {
     font-size: 20px;
     text-align: center;
  }
 .dgsh-auth-required-content h2 {  font-size: 28px; text-align: center;}
 .dgsh-reward-name,
.dgsh-unlocked-reward-name2 {font-size: 16px;}
}

.dgsh-redeem-single-btn,
.dgsh-redeem-all-btn,
.dgsh-verify-reward,
.dgsh-phone-save-btn,
.dgsh-btn
{
  background: linear-gradient(to right, #f7b32b, #e8921b);
  color: white;
  font-weight: bold;
  font-size: 18px;
  border: 0;
  padding: 14px 40px;
  border-radius: 999px; 
  cursor: pointer;
  transition: background 0.3s ease; box-shadow: none;
}
.dgsh-redeem-single-btn:hover,
.dgsh-redeem-all-btn:hover,
.dgsh-verify-reward:hover,
.dgsh-phone-save-btn:hover,
.dgsh-btn:hover
 {
  background: linear-gradient(to right, #e8921b, #f7b32b); color: #fff; box-shadow: none;
}

.dgsh-container * {
  box-sizing: border-box;
}

.dgsh-container {
    font-family: 'Lato', sans-serif;

  line-height: 1.5;
  
  margin: 0 auto;
  padding: 20px 0;
  max-width: 1200px;
}

/* ==========================================================================
   TYPOGRAPHY BIG HEADING 981b99  SMALL 755ba4
   ========================================================================== */
 
.dgsh-title {
  font-family: 'Poppins', sans-serif;
  color: var(--purple);
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  text-align: center;
}
h3.dgsh-title {  font-family: 'Poppins', sans-serif;
  color: var(--purple);
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;}



/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.dgsh-hidden {
  display: none !important;
}

/* Base button styles */
.dgsh-btn-base {
  display: inline-block;
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  color: #230a51;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: auto;
}

.dgsh-btn-base:hover {
  transform: translateY(-1px);
}

.dgsh-btn-base:active {
  transform: translateY(0);
}

.dgsh-btn-base:disabled {
  background-color: #230a51;
  cursor: not-allowed;
  transform: none;
}

/* Button variants */
.dgsh-btn-primary {
  background-color: #e08b22;
  color: white;
}

.dgsh-btn-primary:hover {
  background-color: #0069d9;
}

.dgsh-btn-success {
  background-color: #e08b22;
  color: white;
}

.dgsh-btn-success:hover {
  background-color: #2a0d48;
}

.dgsh-btn-secondary {
  background-color: #230a51;
  color: white;
}

.dgsh-btn-secondary:hover {
  background-color: #5a6268;
}

.dgsh-btn-danger {
  background-color: #dc3545;
  color: white;
}

.dgsh-btn-danger:hover {
  background-color: #c82333;
}

/* State classes */
.dgsh-loading {
  text-align: center;
  padding: 20px;
  color: #230a51;
  font-style: italic;
  position: relative;
}

.dgsh-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loading-shimmer 1.5s infinite;
}

.dgsh-empty {
  color: #230a51;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 30px 20px;
  border-radius: 6px;
  text-align: center;
  font-style: italic;
  position: relative;
}

.dgsh-empty::before {
  content: '📊';
  display: block;
  font-size: 48px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.dgsh-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  position: relative;
}

.dgsh-error::before {
  content: '⚠️';
  display: block;
  font-size: 32px;
  margin-bottom: 10px;
}

/* Loading animations */
@keyframes loading-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes dgsh-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dgsh-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

/* ==========================================================================
   DISCORD BANNER
   ========================================================================== */

.dgsh-discord-banner {
  background-color: #000;
  color: white;
  padding: 2px 0;
  text-align: center;
  margin-bottom: 20px; margin-top: -8px;
}

.dgsh-discord-banner a {
  color: white;
}

/* ==========================================================================
   USER INFO SECTION
   ========================================================================== */

.dgsh-user-info { display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  padding: 24px; 
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.dgsh-user-welcome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    flex-direction: column;
}

/*.dgsh-username {font-family: 'Poppins', sans-serif;
  font-weight: 600; text-transform: uppercase;
  color: var(--purple) ; font-size: 24px;
}*/

.dgsh-login-status {
  font-size: 14px; color: var(--purple-medium);
  
}

.dgsh-anonymous-status {
  color: #856404;
}

.dgsh-auth-buttons {
  display: flex;
  gap: 10px; width: 100%;
}


.dgsh-login-btn,
.dgsh-register-btn{ width:90%; }
.dgsh-register-btn {
  background-color: #76639a;
  color: white;
}

.dgsh-register-btn:hover {
  background-color: #76639a;
  transform: translateY(-1px);
}

/* Phone number section */
.dgsh-phone-section {
  margin-top: 10px;display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dgsh-phone-label {
  display: block;
  font-size: 14px;color:var(--purple-medium);
 
  margin-bottom: 8px;
}

.dgsh-phone-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dgsh-phone-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e4d5ff; #b49de1;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.2s; background-color: #f9f8fe;
}

.dgsh-phone-input:focus {
  border-color: #b49de1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}


.dgsh-phone-status {
  margin-top: 8px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: none;
}

.dgsh-phone-status.success {
  display: block;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dgsh-phone-status.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ==========================================================================
   HEADER & DESCRIPTION
   ========================================================================== */

.dgsh-header {
  margin-bottom: 30px;
  text-align: center;
}

.dgsh-description {
  max-width: 700px;
  margin: 0 auto;
  font-size: 16px;
  color: #230a51;
}

/* ==========================================================================
   PROGRESS SECTION
   ========================================================================== */

.dgsh-progress-container {
  margin-bottom: 40px;
  /*padding: 0 5px;*/
}

.dgsh-progress-bar {
  height: 20px;
  background-color: var(--pink-background);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.dgsh-progress-fill {
  height: 100%;
  background-color: #971c97;
  transition: width 0.3s ease;
}

.dgsh-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #230a51;
}

.dgsh-next-reward-progress {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #17a2b8;
}

.dgsh-next-reward-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 500;
}

.dgsh-next-reward-bar {
  height: 10px;
  background-color: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
}

.dgsh-next-reward-fill {
  height: 100%;
  background-color: #17a2b8;
  transition: width 0.3s ease;
}

.dgsh-next-reward-complete {
  text-align: center;
  color: #971c97;
  font-weight: 600;
}

/* Character spots */
.dgsh-character-spots {
  margin-top: 20px;
  padding: 15px;
  background-color: var(--pink-background);
  border-radius: 8px;
  
}
 
.dgsh-character-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /*grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));*/
  gap: 8px;
  
  margin: 0 auto;
}

.dgsh-character-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.dgsh-spot-locked {
  background-color: #fff;border: 1px solid #e9ecef;
  /*opacity: 0.5;
  filter: grayscale(1);*/
}

.dgsh-spot-unlocked {
  background-color: #971c97;
 color: #fff;
  /*transform: scale(1.05);
  animation: dgsh-unlock-pulse 0.6s ease-out;*/
}

.dgsh-character-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.dgsh-character-number {
  font-size: 18px;
  font-weight: 800;
  color: #230a51;
}

.dgsh-spot-unlocked .dgsh-character-number {
  color: #fff;
}

/*@keyframes dgsh-unlock-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.10); }
  100% { transform: scale(1.05); }
}*/

/* ==========================================================================
   REWARDS SECTION
   ========================================================================== */

.dgsh-rewards-container {
  margin-bottom: 40px;
  padding: 0 5px;
}

/*.dgsh-rewards-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}*/
.dgsh-rewards-list {
    display: flex;
    flex-wrap: wrap;  
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}
.dgsh-rewards-list > * {
    flex: 0 0 calc((100% - 40px) / 3); 
    max-width: calc((100% - 40px) / 3);
}

@media (max-width: 768px) {
    .dgsh-rewards-list > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.dgsh-reward-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: var(--pink-background);
}

.dgsh-reward-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.dgsh-reward-image {
  position: relative;
  height: 200px;
  background-color: #f8f9fa;
  overflow: hidden;
}

.dgsh-reward-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s;
}

.dgsh-locked .dgsh-reward-img {
  filter: grayscale(1) brightness(0.8);
}

.dgsh-reward-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.dgsh-locked .dgsh-reward-status {
  background-color: #230a51;
}

.dgsh-unlocked .dgsh-reward-status {
  background-color: #971c97;
}

.dgsh-redeemed .dgsh-reward-status {
  background-color: #971c97;
}

.dgsh-reward-details {
  padding: 15px;
}

.dgsh-verify-reward {
  display: inline-block;
  padding: 8px 16px;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s; box-shadow: none;
}


.dgsh-locked .dgsh-verify-reward {
  display: none;
}

/* ==========================================================================
   REDEMPTION SECTION
   ========================================================================== */

.dgsh-redemption-section {
  margin-bottom: 40px;
  /*padding: 20px;*/
  background-color: #fff;
  border-radius: 8px;
  /*border: 1px solid #e9ecef;*/
}

.dgsh-redemption-title {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.dgsh-unlocked-rewards {
  position: relative;
  margin-bottom: 15px; 
}

.dgsh-unlocked-reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px; position: relative;
  margin-bottom: 10px;
  background-color: var(--pink-background);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dgsh-unlocked-reward-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgsh-unlocked-reward-name { text-transform: uppercase;font-family: 'Poppins', sans-serif;

  font-weight: 800;
}

.dgsh-reward-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.dgsh-status-unlocked {
  background-color: #e6f7ff;
  color: #1890ff;
}

.dgsh-status-redeemed {
  background-color: var(--purple);
  color: #fff;
}

.dgsh-redeem-all-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dgsh-redeem-all-btn {
  padding: 10px 20px;

  color: white;
  border: none;


  cursor: pointer;
  transition: background-color 0.2s; box-shadow: none;
}

/*.dgsh-redeem-all-btn:hover {
  background-color: #2a0d48; color: white;
}*/

.dgsh-redeem-single-btn {
  padding: 6px 12px;
  
  color: white;
  border: none;

  cursor: pointer; box-shadow: none;
  transition: background-color 0.2s;
}

/*.dgsh-redeem-single-btn:hover {
  background-color: #2a0d48;color: white;
}*/

.dgsh-redemption-instructions {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #e6f7ff;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
  font-size: 15px;
}

/* ==========================================================================
   LEADERBOARD SECTION
   ========================================================================== */

.dgsh-leaderboard-container { position: relative; padding: 0 5px;
  
}

.dgsh-leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.dgsh-leaderboard-refresh-outer { text-align:center; }
button.dgsh-leaderboard-refresh { margin-bottom:20px; }



.dgsh-leaderboard-list {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  max-height: 450px; /* Added: Fixed height for scrolling */
  overflow-y: auto; /* Changed: Enable vertical scrolling */
  padding: 20px;
  background-color: var(--pink-background);
}



.dgsh-leaderboard-header {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  background-color: var(--purple); color: #fff;
  padding: 12px 15px; border-radius: 10px;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
}

.dgsh-leaderboard-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  padding: 12px 15px;
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.2s;
}

.dgsh-leaderboard-row:last-child {
  border-bottom: none;
}

.dgsh-leaderboard-row:hover {
  background-color: #f8f9fa;
}

.dgsh-current-user {
  background-color: #e6f7ff;
  font-weight: 500;
}

.dgsh-leaderboard-rank {
  font-weight: 600;
}

.dgsh-leaderboard-count {
  text-align: right;
}

.dgsh-leaderboard-loading {
  padding: 40px 20px;
  text-align: center;
  color: #230a51;
}

.dgsh-loading-dots {
  display: inline-block;
  margin-bottom: 15px;
}

.dgsh-loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #007bff;
  margin: 0 2px;
  animation: dgsh-loading-bounce 1.4s ease-in-out infinite both;
}

.dgsh-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.dgsh-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dgsh-loading-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.dgsh-leaderboard-error {
  padding: 30px;
  text-align: center;
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  margin: 20px;
}

.dgsh-leaderboard-error h4 {
  margin-top: 0;
  color: #721c24;
}

.dgsh-leaderboard-retry {
  padding: 8px 16px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 10px;
}

.dgsh-leaderboard-retry:hover {
  background-color: #c82333;
}

.dgsh-no-leaderboard h4 {
  margin-top: 0;
  color: #495057;
  font-size: 20px;
}

.dgsh-leaderboard-tip {
  margin-top: 15px;
  padding: 10px;
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
  border-radius: 4px;
  font-size: 14px;
  color: #0050b3;
}

/* ==========================================================================
   INSTRUCTIONS SECTION
   ========================================================================== */

.dgsh-instructions-container {
  margin-bottom: 40px; padding: 0 5px;
}

.dgsh-instructions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dgsh-instruction-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 30px;
  background-color: var(--pink-background);
  border-radius: 8px;
  transition: transform 0.2s;
}

.dgsh-instruction-item:hover {
  transform: translateY(-3px);
}

.dgsh-instruction-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: var(--purple);
  color: white;
  border-radius: 50%;
  font-weight: 600;
  margin-right: 15px;
  flex-shrink: 0;
}

.dgsh-instruction-content h3 {
  margin: 0 0 8px;
  font-size: 20px;

}

.dgsh-instruction-content p {
  margin: 0;
}

/* ==========================================================================
   MODAL STYLES
   ========================================================================== */

.dgsh-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.dgsh-modal-active {
  opacity: 1;
  visibility: visible;
}

.dgsh-modal-wrapper {
  position: relative;
  width: 90%;
  max-width: 500px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  padding: 30px;
  overflow: auto;
  max-height: 90vh;
}

.dgsh-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--purple);
box-shadow: none;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s;
  min-width: 10px;
  padding: 20px;
}

.dgsh-modal-close:hover {
  color: white;
  background-color: var(--purple-dark);
}

.dgsh-modal-title {
  margin: 0 0 25px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--purple);
}

/* Modal content styles */
.dgsh-redemption-modal,
.dgsh-qr-modal {
  text-align: center;
}

.dgsh-redemption-content {
  text-align: left;
}

.dgsh-modal-code {
  margin-bottom: 25px;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.dgsh-code-display {
  display: inline-block;
  font-family: monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 20px;
  margin: 10px 0;
  background-color: #fff;
  border: 2px solid #eaeaea;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  color: #230a51;
}

.dgsh-qr-container {
  margin: 20px auto;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  max-width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dgsh-qr-container svg {
  max-width: 100%;
  height: auto;
}

.dgsh-modal-instructions { 
  font-size: 16px;
  line-height: 1.5;
  color: var(--purple-dark);
  margin-top: 20px;
  background-color: var(--pink-background);
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid var(--pink-background);
}

/* Unredeemed rewards list */
.dgsh-unredeemed-rewards-list {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.dgsh-unredeemed-rewards-list h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.dgsh-unredeemed-rewards-list ul {
  margin: 0;
  padding-left: 20px;
}

.dgsh-unredeemed-rewards-list li {
  margin-bottom: 5px;
}

.dgsh-no-unredeemed {
  color: #230a51;
  font-style: italic;
  text-align: center;
}

/* Staff section in redemption modal */
.dgsh-staff-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.dgsh-staff-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.dgsh-staff-code-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .dgsh-staff-code-container {flex-direction: column;}
}
.dgsh-staff-code-input {
  flex-grow: 1;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.2s;
}

.dgsh-staff-code-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.dgsh-verify-button {
  padding: 10px 15px;
 background-color: var(--purple);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap; box-shadow: none;
}
.dgsh-verify-button:hover {background-color: var(--purple-dark); color: white;}

.dgsh-verify-button:disabled {
  background-color: #230a51;
  cursor: not-allowed;
}

.dgsh-verification-result {
  margin-top: 15px;
}

.dgsh-result-success,
.dgsh-result-error {
  padding: 12px 15px;
  border-radius: 4px;
  font-weight: 500;
}

.dgsh-result-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dgsh-result-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Tier-specific styles */
.dgsh-tier1.dgsh-redemption-modal .dgsh-modal-title {
  color: #971c97;
}

.dgsh-tier3.dgsh-redemption-modal .dgsh-modal-title {
  color: #007bff;
}

.dgsh-tier6.dgsh-redemption-modal .dgsh-modal-title {
  color: #6f42c1;
}

.dgsh-tier12.dgsh-redemption-modal .dgsh-modal-title {
  color: #dc3545;
}

.dgsh-tier3 .dgsh-code-display {
  background-color: #f0f7ff;
  border-color: #b3d7ff;
  color: #0056b3;
}

.dgsh-tier3 .dgsh-qr-container {
  background-color: #f8f9fa;
  border: 2px solid #b3d7ff;
}

.dgsh-tier3 .dgsh-modal-instructions {
  background-color: #e6f9ff;
  border-left-color: #0056b3;
}

/* Modal animation */
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.dgsh-modal-active .dgsh-modal-wrapper {
  animation: modalFadeIn 0.3s forwards;
}

/* ==========================================================================
   MESSAGE SYSTEM
   ========================================================================== */

.dgsh-messages-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  max-width: 400px;
}

.dgsh-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 14px;
  border-left: 4px solid;
  position: relative;
  animation: slideIn 0.3s ease;
}

.dgsh-message-success {
  background-color: #d4edda;
  color: #155724;
  border-left-color: #971c97;
  border: 1px solid #c3e6cb;
}

.dgsh-message-error {
  background-color: #f8d7da;
  color: #721c24;
  border-left-color: #dc3545;
  border: 1px solid #f5c6cb;
}

.dgsh-message-warning {
  background-color: #fff3cd;
  color: #856404;
  border-left-color: #ffc107;
  border: 1px solid #ffeaa7;
}

.dgsh-message-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-left-color: #17a2b8;
  border: 1px solid #bee5eb;
}

.dgsh-message-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  color: inherit;
  opacity: 0.7;
  width: auto;
  min-width: auto;
  border: 0;
  box-shadow: none !important;
  background-color: none;
}

.dgsh-message-close:hover {
  opacity: 1;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ==========================================================================
   CUSTOM AUTHENTICATION MODAL
   ========================================================================== */

.dgsh-auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dgsh-auth-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.dgsh-auth-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 450px;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.dgsh-auth-modal-overlay.active .dgsh-auth-modal {
  transform: translateY(0);
}

.dgsh-auth-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 1px solid #eee;
}

.dgsh-auth-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #230a51;
}

.dgsh-auth-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.dgsh-auth-close:hover {
  background-color: #f5f5f5;
  color: #230a51;
}

.dgsh-auth-modal-body {
  padding: 30px;
}

/* Tab navigation */
.dgsh-auth-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.dgsh-auth-tab {
  flex: 1;
  padding: 12px 20px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #230a51;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.dgsh-auth-tab.active {
  color: #007bff;
  border-bottom-color: #007bff;
}

.dgsh-auth-tab:hover {
  color: #007bff;
}

/* Auth forms */
.dgsh-auth-form {
  display: none;
}

.dgsh-auth-form.active {
  display: block;
}

.dgsh-auth-form-inner {
  width: 100%;
}

.dgsh-auth-field {
  margin-bottom: 20px;
}

.dgsh-auth-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.dgsh-auth-field input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.dgsh-auth-field input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.dgsh-auth-submit {
  width: 100%;
  padding: 14px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  margin-top: 10px;
}

.dgsh-auth-submit:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.dgsh-auth-submit:active {
  transform: translateY(0);
}

.dgsh-auth-submit:disabled {
  background-color: #230a51;
  cursor: not-allowed;
  transform: none;
}

/* Auth help text */
.dgsh-auth-help-text {
  margin-bottom: 20px;
  color: #230a51;
  font-size: 14px;
  line-height: 1.5;
}

/* Auth loading state */
.dgsh-auth-loading {
  text-align: center;
  padding: 40px 20px;
  color: #230a51;
}

.dgsh-auth-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: dgsh-spin 1s linear infinite;
  margin: 0 auto 15px;
}

/* Auth messages */
.dgsh-auth-message {
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
}

.dgsh-auth-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dgsh-auth-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.dgsh-auth-message.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  body * {
    visibility: hidden !important;
  }
  
  #print-template,
  #print-template * {
    visibility: visible !important;
  }
  
  #print-template {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  @page {
    size: A4;
    margin: 0.5in;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .dgsh-print-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .dgsh-print-item {
    padding: 15px !important;
    border: 2px solid #230a51 !important;
    border-radius: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    text-align: center !important;
    background: white !important;
    margin-bottom: 0 !important;
  }
  
  .dgsh-print-item img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .dgsh-print-item h2 {
    font-size: 18px !important;
    margin-bottom: 5px !important;
    color: #230a51 !important;
  }
  
  .dgsh-print-item h3 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    color: #230a51 !important;
  }
  
  .dgsh-print-item p {
    font-size: 12px !important;
    margin: 5px 0 !important;
    color: #555 !important;
  }
  
  .page-header,
  .page-footer,
  .site-header,
  .site-footer,
  .navigation,
  .breadcrumb,
  header,
  footer,
  nav {
    display: none !important;
  }
  
  .dgsh-print-item:nth-child(4n) {
    page-break-after: always !important;
  }
  
  @media print and (max-width: 8in) {
    .dgsh-print-grid {
      grid-template-columns: 1fr !important;
    }
    
    .dgsh-print-item {
      margin-bottom: 20px !important;
    }
  }
}

#print-template {
  display: none;
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: -1;
}

.printing #print-template {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: 9999 !important;
}

@media print {
  .shopify-section,
  .announcement-bar,
  .header,
  .footer,
  .cart-drawer,
  .search-modal,
  .newsletter-popup,
  [data-section-type],
  .template-*:not(.template-page) {
    display: none !important;
  }
  
  html,
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .dgsh-redemption-title { text-align:center; }
  .dgsh-container {
    padding: 15px 10px;
  }
  
  .dgsh-title {
    font-size: 24px;
  }
  .dgsh-phone-saved { text-align:center; }


  .dgsh-user-info {
    flex-direction: column;
    justify-content: center; padding: 20px 10px; 
  }
  .dgsh-progress-container,
  .dgsh-rewards-container,
  .dgsh-user-info {margin-bottom: 15px;}

  .dgsh-user-welcome {
    flex-direction: column;
  }
  
  .dgsh-phone-input-group {
    flex-direction: column;
    width: 100%;
  }
  
  .dgsh-phone-save-btn {
    width: 100%;
  }
  .dgsh-auth-buttons {
    flex-direction: column;
    width: 100%;
  } 
  .dgsh-character-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .dgsh-character-icon {
    font-size: 20px;
  } 
  
  .dgsh-character-number {
    font-size: 22px;
  }
  .dgsh-rewards-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .dgsh-leaderboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dgsh-modal-wrapper {
    width: 95%;
    padding: 20px;
  }
  .dgsh-code-display {
    font-size: 16px;
    padding: 10px 15px;
  }
  .dgsh-modal-title {
    font-size: 20px;
    margin-bottom: 0; 
  }
  .dgsh-auth-modal {
    width: 95%;
    margin: 20px;
  }
  
  .dgsh-auth-modal-header {
    padding: 20px 20px 15px;
  }
  
  .dgsh-auth-modal-body {
    padding: 20px;
  }
  
  .dgsh-auth-tab {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  .dgsh-auth-field input {
    padding: 10px 14px;
  }
  
  .dgsh-auth-submit {
    padding: 12px 18px;
  }
  
  /* Messages responsive */
  .dgsh-messages-container {
    top: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }
  
  .dgsh-message {
    padding: 10px 12px;
    font-size: 13px;
  }
}


/**
 * Admin Dashboard Missing Styles Fix
 * Add this CSS to dgsh-admin-styles.css or include in dgsh-admin-dashboard.liquid
 */

/* ==========================================================================
   GRAND PRIZE DRAWING ENTRIES SECTION
   ========================================================================== */

.dgsh-admin-drawing-export {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  position: relative;
  overflow: hidden;
}

.dgsh-admin-drawing-export::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #007bff 0%, #971c97 50%, #ffc107 100%);
}

.dgsh-admin-drawing-export .dgsh-admin-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 8px;
}

.dgsh-admin-drawing-export .dgsh-admin-section-title::before {
  content: '🏆';
  font-size: 32px;
}

.dgsh-admin-drawing-description {
  color: #230a51;
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 800px;
}

/* Enhanced Stats Grid */
.dgsh-admin-drawing-stats {
  margin-bottom: 30px;
}

.dgsh-admin-drawing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.dgsh-admin-stat-item {
  background: white;
  padding: 25px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dgsh-admin-stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stat-color, #007bff);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.dgsh-admin-stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.dgsh-admin-stat-item:hover::before {
  transform: scaleX(1);
}

.dgsh-admin-stat-item:nth-child(1) { --stat-color: #007bff; }
.dgsh-admin-stat-item:nth-child(2) { --stat-color: #971c97; }
.dgsh-admin-stat-item:nth-child(3) { --stat-color: #ffc107; }

.dgsh-admin-stat-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--stat-color, #007bff);
  margin-bottom: 8px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dgsh-admin-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: #230a51;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Enhanced Action Buttons */
.dgsh-admin-drawing-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.dgsh-admin-export-drawing-btn,
.dgsh-admin-refresh-drawing-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dgsh-admin-export-drawing-btn {
  background: linear-gradient(135deg, #971c97 0%, #20c997 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.dgsh-admin-export-drawing-btn::before {
  content: '📊';
  font-size: 16px;
}

.dgsh-admin-refresh-drawing-btn {
  background: linear-gradient(135deg, #230a51 0%, #495057 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.dgsh-admin-refresh-drawing-btn::before {
  content: '🔄';
  font-size: 16px;
}

.dgsh-admin-export-drawing-btn:hover,
.dgsh-admin-refresh-drawing-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.dgsh-admin-export-drawing-btn:active,
.dgsh-admin-refresh-drawing-btn:active {
  transform: translateY(0);
}

/* Enhanced Preview Section */
.dgsh-admin-drawing-preview {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.dgsh-admin-drawing-preview h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgsh-admin-drawing-preview h3::before {
  content: '👁️';
  font-size: 20px;
}

/* Enhanced Table Styling */
.dgsh-admin-drawing-list .dgsh-admin-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e9ecef;
  width: 100%;
  border-collapse: collapse;
}

.dgsh-admin-drawing-list .dgsh-admin-table thead {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.dgsh-admin-drawing-list .dgsh-admin-table th {
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 15px 12px;
  border-bottom: 2px solid #dee2e6;
  text-align: left;
}

.dgsh-admin-drawing-list .dgsh-admin-table td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f4;
}

.dgsh-admin-drawing-list .dgsh-admin-table tbody tr:hover {
  background-color: #f8f9fa;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.dgsh-admin-drawing-list .dgsh-admin-table tbody tr:nth-child(even) {
  background-color: #fdfdfd;
}

/* ==========================================================================
   HUNT SCHEDULE MANAGEMENT SECTION
   ========================================================================== */

.dgsh-admin-schedule-management {
  margin-bottom: 40px;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  position: relative;
  overflow: hidden;
}

.dgsh-admin-schedule-management::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #17a2b8 0%, #007bff 50%, #6f42c1 100%);
}

.dgsh-admin-schedule-management .dgsh-admin-section-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 8px;
}

.dgsh-admin-schedule-management .dgsh-admin-section-title::before {
  content: '🕒';
  font-size: 32px;
}

.dgsh-admin-schedule-description {
  margin-bottom: 25px;
  color: #230a51;
  font-size: 16px;
  line-height: 1.6;
}

.dgsh-admin-schedule-status {
  margin-bottom: 25px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.dgsh-admin-schedule-current-status h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #495057;
}

.dgsh-admin-status-display {
  margin-top: 10px;
}

.dgsh-admin-status-active,
.dgsh-admin-status-pending,
.dgsh-admin-status-ended {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dgsh-admin-status-active {
  color: #971c97;
}

.dgsh-admin-status-pending {
  color: #ffc107;
}

.dgsh-admin-status-ended {
  color: #dc3545;
}

.dgsh-admin-status-icon {
  font-size: 18px;
}

.dgsh-admin-schedule-controls {
  background: white;
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.dgsh-admin-schedule-toggle {
  margin-bottom: 20px;
}

.dgsh-admin-schedule-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
}

.dgsh-admin-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
}

.dgsh-admin-schedule-times {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dgsh-admin-schedule-times.show {
  display: grid;
}

.dgsh-admin-form-group {
  margin-bottom: 15px;
}

.dgsh-admin-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
  font-size: 14px;
}

.dgsh-admin-datetime {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.dgsh-admin-datetime:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.dgsh-admin-timezone-info {
  margin-top: 10px;
  color: #230a51;
  font-size: 13px;
  font-style: italic;
}

.dgsh-admin-schedule-actions {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.dgsh-admin-save-schedule-btn,
.dgsh-admin-clear-schedule-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;
}

.dgsh-admin-save-schedule-btn {
  background: linear-gradient(135deg, #971c97 0%, #20c997 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.dgsh-admin-clear-schedule-btn {
  background: linear-gradient(135deg, #230a51 0%, #495057 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.dgsh-admin-save-schedule-btn:hover,
.dgsh-admin-clear-schedule-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.dgsh-admin-save-schedule-btn:active,
.dgsh-admin-clear-schedule-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
.dgsh-discord-banner {margin-bottom: 0;}
  .dgsh-admin-drawing-summary {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .dgsh-phone-section {    align-items: center;}
  .dgsh-user-welcome{    align-items: center;}
  .dgsh-admin-drawing-controls {
    flex-direction: column;
  }
  .dgsh-instruction-item { padding:20px }
  .dgsh-admin-export-drawing-btn,
  .dgsh-admin-refresh-drawing-btn {
    width: 100%;
    min-width: auto;
  }
  
  .dgsh-admin-drawing-export {
    padding: 20px;
  }
  
  .dgsh-admin-drawing-export .dgsh-admin-section-title {
    font-size: 24px;
  }
  
  .dgsh-admin-stat-value {
    font-size: 28px;
  }
  
  .dgsh-admin-drawing-preview {
    padding: 20px;
  }

  /* Schedule Management Section */
  .dgsh-admin-schedule-management {
    padding: 20px;
  }
  
  .dgsh-admin-schedule-management .dgsh-admin-section-title {
    font-size: 24px;
  }
  
  .dgsh-admin-schedule-times {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .dgsh-admin-schedule-actions {
    flex-direction: column;
  }
  
  .dgsh-admin-save-schedule-btn,
  .dgsh-admin-clear-schedule-btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  /* Drawing Export Section */
  .dgsh-admin-drawing-summary {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .dgsh-admin-stat-item {
    padding: 20px 15px;
  }
  
  .dgsh-admin-stat-value {
    font-size: 24px;
  }
  
  .dgsh-admin-drawing-list .dgsh-admin-table {
    font-size: 14px;
  }
  
  .dgsh-admin-drawing-list .dgsh-admin-table th,
  .dgsh-admin-drawing-list .dgsh-admin-table td {
    padding: 8px 6px;
  }

  /* Schedule Management Section */
  .dgsh-admin-schedule-management {
    padding: 15px;
  }
  
  .dgsh-admin-schedule-controls {
    padding: 20px;
  }
}


.dgsh-unlocked-reward-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /*flex-grow: 1;*/
}

.dgsh-reward-details {
  flex-grow: 1;
}



.dgsh-admin-section-managed {
  background-color: #e3f2fd;
  color: #1565c0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.dgsh-tier-config-section {
  display: none; /* Hide the section container from frontend */
}

.dgsh-admin-tier-info {
  background-color: #f0f8ff;
  border-left: 4px solid #2196f3;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.dgsh-admin-tier-info p {
  margin: 5px 0;
} 

.dgsh-admin-tier-info p:last-child {
  font-size: 14px;
  color: #1565c0;
}

/* Update button styling for customizer message */
.dgsh-admin-add-tier-btn {
  background-color: #2196f3;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.dgsh-reward-image.loading .dgsh-reward-img {
  opacity: 0;
}

.dgsh-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid #e9ecef;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 1;
}

.dgsh-reward-image:not(.loading) .dgsh-loading-spinner {
  display: none;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (min-width: 768px) {
  .dgsh-auth-required-content {display: flex;flex-direction: column;align-items: center;}

}











/* Celebration animation */
@keyframes celebrate {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes confetti {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.dgsh-celebration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.dgsh-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ff6b6b;
  animation: confetti 3s linear infinite;
}

.dgsh-confetti:nth-child(2n) { background: #4ecdc4; }
.dgsh-confetti:nth-child(3n) { background: #45b7d1; }
.dgsh-confetti:nth-child(4n) { background: #f9ca24; }
.dgsh-confetti:nth-child(5n) { background: #6c5ce7; }

.dgsh-celebrate-progress {
  animation: celebrate 0.6s ease-in-out;
}

.dgsh-celebrate-message {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4)!important;
  color: white!important;
  animation: celebrate 0.6s ease-in-out;
}




/* Custom character icon images */
.dgsh-character-custom-icon {
  /*width: 24px;
  height: 24px;*/
  object-fit: contain;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Fallback emoji styles */
.dgsh-character-fallback-emoji {
  font-size: 24px;
  display: inline-block;
}

/* Enhanced character spot styles for custom icons */
.dgsh-character-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  min-height: 60px;
  justify-content: center;cursor: pointer;
}

.dgsh-character-custom-icon[src=""] {
  display: none;
}


.dgsh-character-icon {
  font-size: 24px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

.dgsh-auth-inner { max-width:500px; margin:0 auto; }

.dgsh-user-info{background: var(--pink-background);}
.dgsh-auth-required-section {
  text-align: center;
  padding: 40px 20px;
  background: var(--pink-background);
  border-radius: 12px;
  margin: 20px 0;
}

.dgsh-auth-buttons {
  margin-bottom: 32px;
}

.dgsh-auth-benefits {
  background: white;
  padding: 24px;
  border-radius: 8px;
  text-align: left;
  
  margin: 0 auto;
}


.dgsh-auth-benefits ul {
  list-style: none;
  padding: 0;
}

.dgsh-auth-benefits li {
  padding: 8px 0;

  position: relative;
  padding-left: 24px;
}

.dgsh-auth-benefits li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #50248f;
  font-weight: bold;
}

.dgsh-phone-status {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
}

.dgsh-phone-status.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dgsh-phone-status.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}



.dgsh-schedule-banner {
  background: var(--pink-background);
  border: 1px solid var(--pink-background);
  
  margin: 20px 0;
  padding: 15px 20px;
  text-align: center;
  
}

.dgsh-schedule-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

.dgsh-schedule-icon {
  font-size: 18px;
}

.dgsh-schedule-text {
  color: #230a51;
}
.discord-container {font-size: 20px;padding: 9px 15px;  display: flex;align-items: center;justify-content: center;}
/* Responsive adjustments */
@media (max-width: 768px) {
  .dgsh-auth-required-section { padding: 20px;}
  .dgsh-schedule-content {
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
  }
  
  .dgsh-schedule-banner {
    margin: 15px 0;
    padding: 12px 15px;
  } 
  .dgsh-character-fallback-emoji {
    font-size: 20px;
  }  
  .dgsh-character-icon {
    font-size: 20px;
    min-height: 24px;
  }
    .dgsh-auth-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .discord-container {font-size: 16px;padding: 0px 15px; }
  .discord-container img { margin-right: 5px;}
  .dgsh-unlocked-reward {padding: 20px 15px; }
}


.discord-container img {height: 2.8em; margin-right: 12px;flex-shrink: 0;}    
.dgsh-progress-count { display: flex;flex-direction: column; align-items: flex-end; }
.drawing-entries { color: var(--purple); }        


.dgsh-reward-description {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 24px; /* slightly higher for readability */
  max-width: 300px;
  margin: 0 auto 12px auto;
  color: var(--purple-dark); 

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.2px;
}

.dgsh-reward-details { text-align:center; }
.dgsh-reward-description2 { margin:0; }
/*.dgsh-unlocked-reward-name2 { font-weight:bold;font-family: 'Poppins', sans-serif; font-size:18px; line-height:24px; text-transform:uppercase; color:var(--purple);  }*/

.dgsh-leaderboard-refresh-outer { display:none; }




.dgsh-auth-required-content p {

  margin-bottom: 32px; margin-top: 0;
  font-size: 22px;
}

.dgsh-auth-buttons {
  margin-bottom: 32px;
}

.dgsh-phone-status {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
}

.dgsh-phone-status.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.dgsh-phone-status.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
  .dgsh-auth-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


/* Styles for the inline messages container */
.dgsh-inline-messages-container {
  /* This container should be placed in your HTML where you want the messages */
  margin: 0 auto; /* Example: Centers the container with some vertical margin */
  max-width: 600px; /* Example: Constrains the width */

  position: relative; /* If you need to position child elements relative to this container */
  z-index: 1; /* Adjust z-index as needed */
}

/* Override fixed positioning for individual messages when placed inline */
.dgsh-inline-messages-container .dgsh-message {
  position: static; /* Ensures messages flow normally within the inline container */
  margin: 10px 0; /* Add margin between stacked messages */
  /* Remove absolute positioning from the close button if it causes issues */
}

/* Adjust the close button within inline messages if needed */
.dgsh-inline-messages-container .dgsh-message button {
  position: relative; /* Or static, depending on desired layout */
  top: auto;
  right: auto;
  margin-left: 10px; /* Keep button to the right of text */
  color: red;
}


/* Add this new class to assets/dgsh-styles.css */
.dgsh-message-close-span {
  position: absolute;
  top: 6px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  box-shadow: none;
  padding: 0; /* Ensures it's compact */
  width: auto; /* Ensures it doesn't take full width */
  min-width: auto; /* Overrides any button min-width */
  display: flex; /* Helps center the 'x' if it's there */
  align-items: center;
  justify-content: center;
  height: 1.5em; /* Give it a clickable height */
  line-height: 1; /* Adjust line height for icon positioning */
}

/* Optional: Add a hover effect for this span */
.dgsh-message-close-span:hover {
  opacity: 1;
}



/* Heartbeat animation for progress bar */
@keyframes dgsh-heartbeat {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(151, 28, 151, 0.7); /* Subtle purple glow */
  }
  15% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(151, 28, 151, 0.8);
  }
  30% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(151, 28, 151, 0);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply heartbeat animation to the progress fill */
.dgsh-progress-fill.dgsh-heartbeat-active {
  animation: dgsh-heartbeat 1.5s infinite ease-in-out;
}

/* Optional: Subtle pulse for active character spots */
.dgsh-spot-unlocked.dgsh-pulse-active {
  animation: dgsh-pulse 1.8s infinite ease-in-out;
}







/* New or updated animation for unlocked reward items */
@keyframes dgsh-unlocked-glow {
  0% { box-shadow: 0 0 5px rgba(151, 28, 151, 0.4); }
  50% { box-shadow: 0 0 15px rgba(151, 28, 151, 0.8); }
  100% { box-shadow: 0 0 5px rgba(151, 28, 151, 0.4); }
}

.dgsh-reward-item.dgsh-newly-unlocked {
  animation: dgsh-unlocked-glow 2s infinite alternate; /* Applies a gentle, continuous glow */
  border: 2px solid #971c97; /* Adds a distinct border */
}

/* Optional: A fading highlight for a short period */
@keyframes dgsh-highlight-fade {
    from { background-color: rgba(151, 28, 151, 0.2); }
    to { background-color: transparent; }
}

.dgsh-reward-item.dgsh-temporary-highlight {
    animation: dgsh-highlight-fade 3s forwards ease-out;
}