/* ============================================
   UPGRADE.CSS — Droplux Conversion Enhancements
   Announcement bar, urgency box, sticky CTA,
   live signals, rating aggregate, error states
   ============================================ */

/* ---- Announcement Bar ---- */
.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.55em var(--space-6);
  background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(99,102,241,0.18));
  border-bottom: 1px solid rgba(139,92,246,0.25);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  flex-wrap: wrap;
}

.announce-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.announce-bar__cta {
  color: var(--color-accent-bright);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.announce-bar__cta:hover { color: var(--color-text); }

/* ---- Live signal (hero) ---- */
.hero__live-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}

/* ---- Urgency Box ---- */
.urgency-box {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: rgba(250,204,21,0.06);
  border: 1px solid rgba(250,204,21,0.2);
  border-radius: var(--radius-lg);
}

.urgency-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: #fbbf24;
}

.urgency-box p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
  margin-bottom: var(--space-3);
}

.urgency-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.urgency-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 2px;
  transition: width 1s ease;
}

/* ---- Rating Aggregate ---- */
.rating-aggregate {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.rating-stars {
  color: #fbbf24;
  letter-spacing: 2px;
}

/* ---- Form Error Banner ---- */
.form-error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: #fca5a5;
}

.form-error-banner svg { flex-shrink: 0; color: #f87171; }

/* ---- Input Error State ---- */
.form-input.input-error,
.form-select.input-error,
.form-textarea.input-error {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.15);
}

/* ---- Sticky CTA (mobile) ---- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: var(--space-3) var(--space-5);
  background: rgba(7,7,26,0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1);
  display: none;
}

.sticky-cta.visible {
  transform: translateY(0);
}

/* Only show on mobile */
@media (max-width: 768px) {
  .sticky-cta {
    display: block;
  }
  body { padding-bottom: 4.5rem; }
}

/* ---- Enhanced service card hover glow ---- */
.service-card:hover {
  transform: translateY(-6px);
}

/* ---- Pulse animation (shared) ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.8); }
}

/* ---- Smooth date input ---- */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5) sepia(1) saturate(2) hue-rotate(230deg);
  cursor: pointer;
  opacity: 0.7;
}

/* ---- Improved form submit area ---- */
.form-submit-wrap {
  position: relative;
}

.form-submit-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(99,102,241,0.2));
  filter: blur(12px);
  opacity: 0;
  transition: opacity 300ms;
  z-index: -1;
}

.form-submit-wrap:hover::before { opacity: 1; }

/* ---- Admin panel table row hover ---- */
#adminPanel tr:hover td {
  background: rgba(139,92,246,0.06);
}

/* ---- Booking section enhanced ---- */
.booking {
  position: relative;
}

/* ---- Testimonial star color ---- */
.testimonial-card__stars {
  color: #fbbf24;
  letter-spacing: 2px;
}

/* ---- Mobile announce bar ---- */
@media (max-width: 480px) {
  .announce-bar { gap: var(--space-2); font-size: 0.7rem; }
  .announce-bar__cta { display: none; }
}