/* 🎁 v175.10: Re-engagement Modal Styles */

.treeng-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 20, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.treeng-overlay.treeng-open {
  opacity: 1;
  pointer-events: all;
}

.treeng-modal {
  background: linear-gradient(135deg, #fef9e7 0%, #ffffff 50%, #fed7aa 100%);
  border-radius: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 36px 28px 28px;
  position: relative;
  box-shadow: 
    0 30px 80px rgba(201, 168, 76, 0.4),
    0 0 0 2px rgba(201, 168, 76, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: scale(0.85) translateY(40px);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.treeng-overlay.treeng-open .treeng-modal {
  transform: scale(1) translateY(0);
}

/* Top gold band */
.treeng-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, 
    #c9a84c 0%, 
    #f7e08a 25%, 
    #e8c96a 50%, 
    #f7e08a 75%, 
    #c9a84c 100%);
  background-size: 200% 100%;
  border-radius: 28px 28px 0 0;
  animation: treengGoldShine 3s linear infinite;
}

@keyframes treengGoldShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Confetti decoration */
.treeng-confetti {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  overflow: hidden;
}

.treeng-confetti-piece {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  animation: treengConfetti 3s ease-out infinite;
  animation-delay: calc(var(--i) * 0.4s);
}

.treeng-confetti-piece:nth-child(1) { left: 15%; }
.treeng-confetti-piece:nth-child(2) { left: 30%; font-size: 22px; }
.treeng-confetti-piece:nth-child(3) { left: 50%; }
.treeng-confetti-piece:nth-child(4) { left: 70%; font-size: 24px; }
.treeng-confetti-piece:nth-child(5) { left: 85%; }

@keyframes treengConfetti {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(80px) rotate(360deg); }
}

/* Close button */
.treeng-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: #4b5563;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
  z-index: 5;
}

.treeng-close:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  transform: rotate(90deg);
}

/* Premium icon */
.treeng-icon-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 8px auto 16px;
  z-index: 2;
}

.treeng-icon {
  position: relative;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #c9a84c 0%, #e8c96a 50%, #f7e08a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  box-shadow: 
    0 12px 32px rgba(201, 168, 76, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  z-index: 2;
  animation: treengIconBounce 2s ease-in-out infinite;
}

.treeng-icon-glow {
  position: absolute;
  inset: -16px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.5) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  animation: treengGlow 2s ease-in-out infinite;
}

@keyframes treengIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

@keyframes treengGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}

/* Exclusive badge */
.treeng-exclusive-badge {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, #1a3d2b, #2d6a4f);
  color: #f7e08a;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 auto 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: block;
  width: fit-content;
}

.treeng-badge-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: treengBadgeShine 2.5s ease-in-out infinite;
}

@keyframes treengBadgeShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Title */
.treeng-title {
  font-family: 'Amiri', 'Tajawal', serif;
  font-size: 26px;
  font-weight: 800;
  color: #1a3d2b;
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.3;
}

.treeng-subtitle {
  font-size: 14px;
  color: #4a5d52;
  text-align: center;
  margin: 0 0 22px;
  line-height: 1.7;
}

/* Benefits */
.treeng-benefits {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(201, 168, 76, 0.3);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.treeng-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  color: #1a3d2b;
}

.treeng-benefit-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.treeng-benefit-text {
  font-weight: 600;
}

/* Footer note */
.treeng-footer-note {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  margin-bottom: 18px;
  font-weight: 600;
  padding: 8px;
  background: rgba(82, 183, 136, 0.08);
  border-radius: 8px;
  border: 1px dashed rgba(82, 183, 136, 0.3);
}

/* Buttons */
.treeng-btn-primary {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2d6a4f 0%, #1a3d2b 100%);
  color: white;
  border: 2px solid #c9a84c;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(45, 106, 79, 0.4);
}

.treeng-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(45, 106, 79, 0.5);
}

.treeng-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.treeng-btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  transition: left 0.6s;
}

.treeng-btn-primary:hover .treeng-btn-shine {
  left: 150%;
}

.treeng-btn-secondary {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #6b7280;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.treeng-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #374151;
}

/* Spinner */
.treeng-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: treengSpin 0.8s linear infinite;
}

@keyframes treengSpin {
  to { transform: rotate(360deg); }
}

/* Status messages */
.treeng-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.treeng-status.success {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1.5px solid #10b981;
}

.treeng-status.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1.5px solid #fca5a5;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .treeng-modal {
    padding: 28px 20px 22px;
    border-radius: 22px;
  }
  
  .treeng-title {
    font-size: 22px;
  }
  
  .treeng-subtitle {
    font-size: 13px;
  }
  
  .treeng-icon-wrap, .treeng-icon {
    width: 88px;
    height: 88px;
  }
  
  .treeng-icon {
    font-size: 42px;
  }
  
  .treeng-benefit {
    font-size: 13px;
  }
  
  .treeng-benefit-icon {
    font-size: 20px;
  }
  
  .treeng-btn-primary {
    padding: 14px 18px;
    font-size: 15px;
  }
}