/* ============================================================
   PERKSLOCAL · BASE + COMPONENT STYLES
   Class styles consumed by the React components and UI kits.
   All values reference tokens from tokens/*.css.
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
.pl-reset, .pl-reset *, .pl-reset *::before, .pl-reset *::after { margin: 0; padding: 0; }

body.pl-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Gradient text helpers ── */
.pl-grad-text          { background: var(--pl-grad-signature); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pl-grad-text-primary  { background: var(--pl-grad-primary);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pl-grad-text-energy   { background: var(--pl-grad-energy);    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pl-grad-text-reward   { background: var(--pl-grad-reward);    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Tagline lockup ── */
.pl-tagline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tagline);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.pl-tagline .accent { color: var(--brand-accent); }

/* ════════════════ BUTTONS ════════════════ */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-ui); font-weight: var(--weight-semibold); letter-spacing: 0.01em;
  border: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: all var(--dur-base) var(--ease-smooth); position: relative; overflow: hidden;
}
.pl-btn:disabled, .pl-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pl-btn .pl-btn-label { position: relative; z-index: 1; }
.pl-btn .pl-arrow { position: relative; z-index: 1; display: inline-flex; transition: transform var(--dur-base) var(--ease-spring); }
.pl-btn:hover .pl-arrow { transform: translateX(4px); }

.pl-btn--sm { font-size: var(--text-sm);   padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); height: 36px; }
.pl-btn--md { font-size: var(--text-base); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); height: 48px; }
.pl-btn--lg { font-size: var(--text-md);   padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); height: 58px; }

.pl-btn--primary { background: var(--pl-grad-primary); color: #fff; box-shadow: var(--shadow-purple); }
.pl-btn--primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%); opacity: 0; transition: opacity var(--dur-base) var(--ease-smooth); }
.pl-btn--primary:hover::before { opacity: 1; }
.pl-btn--primary:hover { box-shadow: 0 8px 28px rgba(109,40,217,0.42); transform: translateY(-1px); }

.pl-btn--reward { background: var(--pl-grad-reward); color: var(--pl-charcoal); box-shadow: var(--shadow-gold); }
.pl-btn--reward:hover { box-shadow: 0 8px 28px rgba(245,158,11,0.45); transform: translateY(-1px); filter: brightness(1.04); }

.pl-btn--blue { background: var(--pl-blue-500); color: #fff; box-shadow: var(--shadow-blue); }
.pl-btn--blue:hover { background: var(--pl-blue-600); box-shadow: 0 8px 28px rgba(99,102,241,0.42); transform: translateY(-1px); }

.pl-btn--secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-medium); }
.pl-btn--secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(109,40,217,0.05); box-shadow: var(--glow-purple); }

.pl-btn--outline { background: rgba(109,40,217,0.07); color: var(--brand-primary); border: 1.5px solid rgba(109,40,217,0.30); }
.pl-btn--outline:hover { background: rgba(109,40,217,0.12); border-color: var(--brand-primary); }

.pl-btn--ghost { background: transparent; color: var(--text-secondary); }
.pl-btn--ghost:hover { color: var(--text-primary); background: rgba(109,40,217,0.06); }

.pl-btn-icon {
  width: 48px; height: 48px; border-radius: var(--radius-full); padding: 0;
  background: var(--color-surface); border: 1.5px solid var(--border-default); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--dur-base) var(--ease-smooth);
}
.pl-btn-icon:hover { background: var(--pl-grad-primary); border-color: transparent; color: #fff; box-shadow: var(--glow-purple); }
.pl-btn-icon--sm { width: 36px; height: 36px; }

/* ════════════════ BADGES ════════════════ */
.pl-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
}
.pl-badge--purple { background: rgba(109,40,217,0.10); color: var(--brand-primary);   border: 1px solid rgba(109,40,217,0.22); }
.pl-badge--blue   { background: rgba(99,102,241,0.10); color: var(--brand-secondary); border: 1px solid rgba(99,102,241,0.22); }
.pl-badge--gold   { background: var(--pl-gold-100);    color: var(--pl-gold-600);     border: 1px solid var(--border-gold); }
.pl-badge--green  { background: rgba(22,163,74,0.10);  color: var(--pl-success);      border: 1px solid rgba(22,163,74,0.22); }
.pl-badge--red    { background: rgba(220,38,38,0.10);  color: var(--pl-danger);       border: 1px solid rgba(220,38,38,0.22); }
.pl-badge--grad   { background: var(--pl-grad-signature); color: #fff; border: none; box-shadow: 0 2px 10px rgba(109,40,217,0.28); }

/* Overline — eyebrow label with leading dot */
.pl-overline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--brand-primary);
  background: rgba(109,40,217,0.08); border: 1px solid rgba(109,40,217,0.22);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-full);
}
.pl-overline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 6px rgba(109,40,217,0.5); }

/* Points / reward pill */
.pl-points-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--pl-gold-100); border: 1px solid var(--border-gold); color: var(--pl-gold-600);
  font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
}

/* ════════════════ FORMS ════════════════ */
.pl-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pl-label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.pl-input {
  background: var(--color-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-primary); transition: all var(--dur-base) var(--ease-smooth); width: 100%;
  outline: none; height: 48px; box-shadow: var(--shadow-sm);
}
.pl-input::placeholder { color: var(--text-muted); }
.pl-input:hover:not(:focus) { border-color: var(--border-medium); }
.pl-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(109,40,217,0.12); }
.pl-input--textarea { min-height: 120px; height: auto; resize: vertical; padding: var(--space-4); line-height: var(--leading-normal); }
.pl-input--select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10);
}
.pl-input-wrap { position: relative; }
.pl-input-wrap .pl-input { padding-left: var(--space-10); }
.pl-input-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: inline-flex; }

.pl-check-row { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary); }
.pl-check {
  width: 20px; height: 20px; border: 1.5px solid var(--border-medium); border-radius: var(--radius-sm);
  appearance: none; background: var(--color-card); cursor: pointer; flex-shrink: 0; position: relative;
  transition: all var(--dur-base) var(--ease-smooth); box-shadow: var(--shadow-sm);
}
.pl-check:checked { background: var(--pl-grad-primary); border-color: transparent; }
.pl-check:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.pl-check--radio { border-radius: var(--radius-full); }
.pl-check--radio:checked::after { content: ''; left: 4px; top: 4px; width: 8px; height: 8px; border: none; border-radius: 50%; background: #fff; transform: none; }

.pl-switch { position: relative; width: 52px; height: 28px; flex-shrink: 0; display: inline-block; }
.pl-switch input { opacity: 0; width: 0; height: 0; }
.pl-switch-track { position: absolute; inset: 0; background: var(--color-surface-tint); border: 1.5px solid var(--border-default); border-radius: var(--radius-full); cursor: pointer; transition: all var(--dur-base) var(--ease-smooth); }
.pl-switch-track::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: var(--text-muted); border-radius: 50%; transition: all var(--dur-base) var(--ease-spring); }
.pl-switch input:checked + .pl-switch-track { background: var(--pl-grad-primary); border-color: transparent; }
.pl-switch input:checked + .pl-switch-track::before { transform: translateX(24px); background: #fff; }

/* ════════════════ CARDS ════════════════ */
.pl-card { background: var(--color-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-card); transition: all var(--dur-slow) var(--ease-smooth); }
.pl-card--hover:hover { border-color: var(--border-accent); box-shadow: var(--shadow-lg), var(--glow-purple); transform: translateY(-3px); }

.pl-feature-card { background: var(--color-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-card); transition: all var(--dur-slow) var(--ease-smooth); position: relative; overflow: hidden; }
.pl-feature-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--glow-purple); }
.pl-feature-card .pl-feature-icon { width: 52px; height: 52px; border-radius: var(--radius-xl); background: var(--pl-grad-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); box-shadow: 0 4px 16px rgba(109,40,217,0.25); color: #fff; }
.pl-feature-card h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); color: var(--text-primary); }
.pl-feature-card p { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); margin: 0; }

.pl-stat-card { background: var(--color-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: var(--space-8); text-align: center; box-shadow: var(--shadow-card); transition: all var(--dur-slow) var(--ease-smooth); }
.pl-stat-card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--glow-purple); }
.pl-stat-value { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: 1; margin-bottom: var(--space-3); background: var(--pl-grad-energy); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pl-stat-label { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.pl-stat-sub { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }

/* Perk card — loyalty reward on brand gradient */
.pl-perk-card { background: var(--pl-grad-primary); border-radius: var(--radius-2xl); padding: var(--space-6); color: #fff; position: relative; overflow: hidden; box-shadow: 0 8px 28px rgba(109,40,217,0.30); min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
.pl-perk-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); }
.pl-perk-card > * { position: relative; z-index: 1; }
.pl-perk-tag { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.85); }
.pl-perk-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: var(--space-2) 0; }
.pl-perk-card p { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(255,255,255,0.82); margin-bottom: var(--space-4); }

/* Deal / offer badge */
.pl-deal { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--color-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-sm); }
.pl-deal-icon { width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--pl-grad-reward); display: flex; align-items: center; justify-content: center; color: var(--pl-charcoal); flex-shrink: 0; }
.pl-deal-amount { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); line-height: 1; }
.pl-deal-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); }

/* ════════════════ ALERTS ════════════════ */
.pl-alert { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); font-family: var(--font-body); border: 1px solid; }
.pl-alert-icon { flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.pl-alert-title { font-family: var(--font-heading); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.pl-alert-body { font-family: var(--font-body); color: var(--text-secondary); font-size: var(--text-sm); }
.pl-alert--success { background: rgba(22,163,74,0.07); border-color: rgba(22,163,74,0.25); color: var(--pl-success); }
.pl-alert--warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.28); color: var(--pl-gold-600); }
.pl-alert--danger  { background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.25); color: var(--pl-danger); }
.pl-alert--info    { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.25); color: var(--pl-blue-600); }

/* ════════════════ MEDIA / PHOTOGRAPHY ════════════════
   The image-forward layer: warm-graded photos in soft-radius
   frames, an optional brand duotone, and a discovery map shell. */
.pl-photo { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--color-surface-tint); box-shadow: var(--shadow-card); }
.pl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-photo--warm img { filter: saturate(1.06) contrast(1.02) brightness(1.02); }            /* warm lifestyle grade */
.pl-photo--duotone img { filter: grayscale(1) contrast(1.05); }
.pl-photo--duotone::after { content: ''; position: absolute; inset: 0; background: var(--pl-grad-signature); mix-blend-mode: screen; opacity: 0.55; pointer-events: none; }
.pl-photo--pill { border-radius: var(--radius-full); }
/* Bottom protection gradient for text over imagery */
.pl-photo--scrim::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(31,31,35,0.72) 100%); pointer-events: none; z-index: 1; }
.pl-photo-caption { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 2; color: #fff; }

/* Placeholder shown when no photo is supplied yet */
.pl-photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 100%; min-height: 160px; color: var(--brand-primary); background: linear-gradient(135deg, var(--pl-purple-100), var(--pl-blue-100)); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: center; padding: var(--space-4); }

/* ════════════════ OFFER CARD ════════════════
   Featured discovery offer: photo on top, business + offer below. */
.pl-offer { background: var(--color-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--dur-slow) var(--ease-smooth); display: flex; flex-direction: column; }
.pl-offer:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--glow-purple); border-color: var(--border-accent); }
.pl-offer-media { position: relative; }
.pl-offer-media .pl-photo { border-radius: 0; box-shadow: none; }
.pl-offer-tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; }
.pl-offer-fav { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; width: 36px; height: 36px; border-radius: var(--radius-full); border: none; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--dur-base) var(--ease-smooth); }
.pl-offer-fav:hover { background: #fff; transform: scale(1.08); }
.pl-offer-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pl-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.pl-offer-name { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); }
.pl-offer-meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: var(--space-2); }
.pl-offer-dist { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-secondary); font-weight: var(--weight-medium); }
.pl-offer-deal { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--brand-primary); }
.pl-offer-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }

/* ════════════════ DISCOVERY MAP SHELL ════════════════ */
.pl-map { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border-default); background:
    radial-gradient(circle at 22% 28%, rgba(99,102,241,0.16), transparent 32%),
    radial-gradient(circle at 78% 68%, rgba(22,163,74,0.14), transparent 34%),
    radial-gradient(circle at 60% 18%, rgba(109,40,217,0.14), transparent 30%),
    var(--pl-purple-100); }
.pl-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(31,31,35,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,31,35,0.05) 1px, transparent 1px); background-size: 38px 38px; }
.pl-map::after { content: ''; position: absolute; inset: 0; background-image:
    linear-gradient(115deg, transparent 48%, rgba(129,140,248,0.35) 49%, rgba(129,140,248,0.35) 50%, transparent 51%),
    linear-gradient(35deg, transparent 62%, rgba(167,139,250,0.30) 63%, rgba(167,139,250,0.30) 64%, transparent 65%);
  background-size: 240px 240px, 320px 320px; opacity: 0.8; }
.pl-map > * { position: relative; z-index: 1; }
/* Map pin */
.pl-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.pl-pin-dot { width: 34px; height: 34px; border-radius: var(--radius-full) var(--radius-full) 4px var(--radius-full); background: var(--pl-grad-primary); transform: rotate(45deg); box-shadow: 0 6px 16px rgba(109,40,217,0.4); display: flex; align-items: center; justify-content: center; border: 2.5px solid #fff; }
.pl-pin-dot > * { transform: rotate(-45deg); color: #fff; }
.pl-pin--gold .pl-pin-dot { background: var(--pl-grad-reward); box-shadow: 0 6px 16px rgba(245,158,11,0.45); }
.pl-pin--gold .pl-pin-dot > * { color: var(--pl-charcoal); }
/* "You are here" beacon */
.pl-beacon { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--brand-secondary); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(99,102,241,0.25), 0 2px 8px rgba(0,0,0,0.2); }