/* Spotlight Loyalty — base styles */

.loyalty-account-card {
  display: block;
  text-decoration: none;
}

.loyalty-cart-preview,
.loyalty-product-points {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #555;
  margin-top: 15px;
}

.loyalty-cart-preview i,
.loyalty-product-points i {
  font-size: 1.1rem;
  color: #e2a829;
}

/* Dashboard */
.loyalty-dashboard { padding: 20px 0; }

.loyalty-card-visual {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  margin-bottom: 32px;
}

.loyalty-card-visual .card-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.loyalty-card-visual .card-number {
  font-size: 0.82rem;
  letter-spacing: 2px;
  margin-top: 6px;
  opacity: 0.75;
  text-align: center;
  color: #fff;
}

.loyalty-card-visual svg { display: block; margin: 0 auto; max-width: 100%; }


/* Points block */
.loyalty-points-block {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.loyalty-points-block .points-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1;
}

.loyalty-points-block .points-label {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 12px;
}

.loyalty-tier-badge {
  display: inline-block;
  background: #e2a829;
  color: #fff;
  border-radius: 20px;
  padding: 3px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}

.loyalty-status-badge {
  display: inline-block;
  border-radius: 20px;
  padding: 2px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 8px;
}

.loyalty-status-badge.active     { background: #d4edda; color: #155724; }
.loyalty-status-badge.registered { background: #cce5ff; color: #004085; }
.loyalty-status-badge.deactivated{ background: #f8d7da; color: #721c24; }

.loyalty-progress-wrap { margin-top: 10px; }
.loyalty-progress-bar { height: 8px; background: #dee2e6; border-radius: 4px; overflow: hidden; }
.loyalty-progress-bar .fill { height: 100%; background: #e2a829; border-radius: 4px; transition: width 0.4s; }
.loyalty-progress-label { font-size: 0.8rem; color: #888; margin-top: 4px; }

/* Coupons grid */
.loyalty-coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.loyalty-coupon-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.loyalty-coupon-card .coupon-type-badge {
  display: inline-block;
  background: #e2a829;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.loyalty-coupon-card .coupon-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a2e;
}

.loyalty-coupon-card .coupon-code {
  font-family: monospace;
  background: #f1f3f5;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85rem;
  margin-top: 8px;
  cursor: pointer;
  user-select: all;
}

.loyalty-coupon-card .coupon-expiry {
  font-size: 0.78rem;
  color: #999;
  margin-top: 6px;
}

/* Orders table */
.loyalty-orders-table th { background: #f1f3f5; }

/* Benefits */
.loyalty-benefit-row td { vertical-align: middle; }

/* Claim card form */
.loyalty-claim-form { max-width: 480px; }

/* Gift card */
.loyalty-giftcard-result {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 20px;
}

/* Nav tabs for My Account loyalty section */
.loyalty-tabs { margin-bottom: 24px; }

/* Checkout discount block */
.loyalty-checkout-block {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: #fffdf5;
  margin-top: 10px;
}

.loyalty-checkout-block .block-title {
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.loyalty-checkout-block .block-title i { color: #e2a829; }

.loyalty-nav-pills .nav-item .nav-link.active, .loyalty-nav-pills .nav-item .nav-separtor.active {
  color: white;
}