/*
 Theme Name:   Hello Elementor Child — RaiderTrader
 Theme URI:    https://raidertrader.com
 Description:  RaiderTrader child theme for Hello Elementor. Flip underpriced Pokémon cards.
 Author:       RaiderTrader
 Author URI:   https://raidertrader.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  raidertrader
 Tags:         pokemon, tcg, trading-cards, flip, elementor
*/

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --rt-bg:          #111210;
  --rt-bg-surface:  #1a1c18;
  --rt-bg-card:     #20231e;
  --rt-bg-card-hover: #262920;
  --rt-border:      #2e3129;
  --rt-gold:        #BA7517;
  --rt-gold-light:  #d4891e;
  --rt-gold-dim:    #7a4e0f;
  --rt-white:       #F1EFE8;
  --rt-muted:       #8a8c84;
  --rt-green:       #4caf6e;
  --rt-red:         #e05c5c;
  --rt-amber:       #f0a832;
  --rt-font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --rt-font-mono:   'JetBrains Mono', 'Fira Code', monospace;
  --rt-radius:      8px;
  --rt-radius-lg:   14px;
  --rt-shadow:      0 4px 24px rgba(0,0,0,0.45);
  --rt-shadow-gold: 0 0 18px rgba(186,117,23,0.25);
  --rt-transition:  0.2s ease;
}

/* ─────────────────────────────────────────
   GLOBAL RESETS / BASE
───────────────────────────────────────── */
body,
.elementor-page {
  background-color: var(--rt-bg) !important;
  color: var(--rt-white) !important;
  font-family: var(--rt-font-sans) !important;
}

a {
  color: var(--rt-gold);
  text-decoration: none;
  transition: color var(--rt-transition);
}
a:hover { color: var(--rt-gold-light); }

*,
*::before,
*::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */
.rt-display {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--rt-white);
}

.rt-display span {
  color: var(--rt-gold);
}

.rt-headline {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rt-white);
}

.rt-subheadline {
  font-size: 1.05rem;
  color: var(--rt-muted);
  line-height: 1.6;
}

.rt-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-muted);
}

.rt-mono {
  font-family: var(--rt-font-mono);
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.rt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--rt-radius);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: all var(--rt-transition);
  text-decoration: none !important;
}

.rt-btn-primary {
  background: var(--rt-gold);
  color: #111210 !important;
}
.rt-btn-primary:hover {
  background: var(--rt-gold-light);
  box-shadow: var(--rt-shadow-gold);
  transform: translateY(-1px);
  color: #111210 !important;
}

.rt-btn-outline {
  background: transparent;
  color: var(--rt-gold) !important;
  border: 1.5px solid var(--rt-gold);
}
.rt-btn-outline:hover {
  background: rgba(186,117,23,0.1);
  transform: translateY(-1px);
}

.rt-btn-ghost {
  background: rgba(241,239,232,0.07);
  color: var(--rt-white) !important;
}
.rt-btn-ghost:hover {
  background: rgba(241,239,232,0.13);
}

.rt-btn-sm {
  padding: 8px 16px;
  font-size: 0.8rem;
}

.rt-btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
}

/* ─────────────────────────────────────────
   CARDS / PANELS
───────────────────────────────────────── */
.rt-card {
  background: var(--rt-bg-card);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 20px;
  transition: all var(--rt-transition);
}

.rt-card:hover {
  background: var(--rt-bg-card-hover);
  border-color: var(--rt-gold-dim);
  box-shadow: var(--rt-shadow);
}

.rt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.rt-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--rt-white);
}

/* ─────────────────────────────────────────
   FLIP FEED — DEAL CARDS
───────────────────────────────────────── */
.rt-flip-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rt-deal-card {
  background: var(--rt-bg-card);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  transition: all var(--rt-transition);
  position: relative;
  overflow: hidden;
}

.rt-deal-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rt-gold);
  opacity: 0;
  transition: opacity var(--rt-transition);
}

.rt-deal-card:hover {
  border-color: var(--rt-gold-dim);
  background: var(--rt-bg-card-hover);
  transform: translateX(3px);
}

.rt-deal-card:hover::before {
  opacity: 1;
}

.rt-deal-card__img {
  width: 60px;
  height: 84px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--rt-bg-surface);
}

.rt-deal-card__img-placeholder {
  width: 60px;
  height: 84px;
  background: var(--rt-bg-surface);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rt-muted);
  font-size: 1.4rem;
}

.rt-deal-card__info {
  min-width: 0;
}

.rt-deal-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rt-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.rt-deal-card__set {
  font-size: 0.78rem;
  color: var(--rt-muted);
  margin-bottom: 8px;
}

.rt-deal-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rt-deal-card__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 100px;
}

.rt-price-buy {
  font-family: var(--rt-font-mono);
  font-size: 0.82rem;
  color: var(--rt-muted);
}

.rt-price-market {
  font-family: var(--rt-font-mono);
  font-size: 0.82rem;
  color: var(--rt-muted);
}

.rt-price-profit {
  font-family: var(--rt-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rt-green);
}

.rt-flip-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.rt-flip-score__value {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--rt-font-mono);
  color: var(--rt-gold);
}

.rt-flip-score__label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-muted);
}

/* ─────────────────────────────────────────
   BADGES / PILLS
───────────────────────────────────────── */
.rt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rt-badge-high {
  background: rgba(76,175,110,0.15);
  color: var(--rt-green);
  border: 1px solid rgba(76,175,110,0.3);
}

.rt-badge-medium {
  background: rgba(240,168,50,0.15);
  color: var(--rt-amber);
  border: 1px solid rgba(240,168,50,0.3);
}

.rt-badge-low {
  background: rgba(224,92,92,0.15);
  color: var(--rt-red);
  border: 1px solid rgba(224,92,92,0.3);
}

.rt-badge-rising {
  background: rgba(76,175,110,0.12);
  color: var(--rt-green);
}

.rt-badge-stable {
  background: rgba(138,140,132,0.15);
  color: var(--rt-muted);
}

.rt-badge-falling {
  background: rgba(224,92,92,0.12);
  color: var(--rt-red);
}

.rt-badge-pro {
  background: linear-gradient(135deg, #ba7517, #d4891e);
  color: #111210;
  font-weight: 800;
}

/* ─────────────────────────────────────────
   SCORE RING / GAUGE
───────────────────────────────────────── */
.rt-score-ring {
  position: relative;
  width: 56px;
  height: 56px;
}

.rt-score-ring svg {
  transform: rotate(-90deg);
  width: 56px;
  height: 56px;
}

.rt-score-ring__track {
  fill: none;
  stroke: var(--rt-border);
  stroke-width: 4;
}

.rt-score-ring__fill {
  fill: none;
  stroke: var(--rt-gold);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.rt-score-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--rt-font-mono);
  color: var(--rt-gold);
}

/* ─────────────────────────────────────────
   PAYWALL / UPGRADE GATE
───────────────────────────────────────── */
.rt-paywall-gate {
  position: relative;
  margin-top: 8px;
}

.rt-paywall-blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.rt-paywall-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, transparent 0%, rgba(17,18,16,0.97) 40%);
  z-index: 10;
  padding: 40px 20px;
  text-align: center;
  gap: 12px;
  border-radius: var(--rt-radius-lg);
}

.rt-paywall-icon {
  font-size: 2rem;
  color: var(--rt-gold);
}

.rt-paywall-headline {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rt-white);
}

.rt-paywall-sub {
  font-size: 0.88rem;
  color: var(--rt-muted);
  max-width: 280px;
}

/* ─────────────────────────────────────────
   FILTERS BAR
───────────────────────────────────────── */
.rt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rt-border);
  margin-bottom: 20px;
}

.rt-filter-select,
.rt-filter-input {
  background: var(--rt-bg-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  color: var(--rt-white);
  padding: 8px 14px;
  font-size: 0.85rem;
  outline: none;
  font-family: var(--rt-font-sans);
  transition: border-color var(--rt-transition);
  -webkit-appearance: none;
}

.rt-filter-select:focus,
.rt-filter-input:focus {
  border-color: var(--rt-gold);
}

.rt-filter-select option {
  background: var(--rt-bg-surface);
}

/* ─────────────────────────────────────────
   STATS BAR
───────────────────────────────────────── */
.rt-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rt-border);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
}

.rt-stat-item {
  background: var(--rt-bg-surface);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rt-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--rt-font-mono);
  color: var(--rt-gold);
  line-height: 1;
}

.rt-stat-label {
  font-size: 0.72rem;
  color: var(--rt-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────
   PRICING TABLE
───────────────────────────────────────── */
.rt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.rt-pricing-card {
  background: var(--rt-bg-card);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rt-pricing-card--pro {
  border-color: var(--rt-gold);
  box-shadow: var(--rt-shadow-gold);
  position: relative;
}

.rt-pricing-card--pro::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rt-gold);
  color: #111210;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 20px;
}

.rt-pricing-card__tier {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-muted);
}

.rt-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.rt-pricing-card__amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--rt-white);
  font-family: var(--rt-font-mono);
}

.rt-pricing-card__period {
  font-size: 0.9rem;
  color: var(--rt-muted);
}

.rt-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rt-pricing-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--rt-muted);
}

.rt-pricing-card__features li.active {
  color: var(--rt-white);
}

.rt-feature-check { color: var(--rt-green); }
.rt-feature-cross { color: var(--rt-muted); opacity: 0.4; }

/* ─────────────────────────────────────────
   PRICE HISTORY CHART CONTAINER
───────────────────────────────────────── */
.rt-chart-container {
  background: var(--rt-bg-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 20px;
  position: relative;
  min-height: 200px;
}

.rt-chart-container canvas {
  max-width: 100%;
}

/* ─────────────────────────────────────────
   ALERT FORM
───────────────────────────────────────── */
.rt-alert-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rt-form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.rt-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.rt-form-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-muted);
}

.rt-form-input {
  background: var(--rt-bg-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  color: var(--rt-white);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: var(--rt-font-sans);
  outline: none;
  transition: border-color var(--rt-transition);
  width: 100%;
}

.rt-form-input:focus {
  border-color: var(--rt-gold);
}

.rt-form-input::placeholder {
  color: var(--rt-muted);
  opacity: 0.6;
}

/* ─────────────────────────────────────────
   MESSAGES / NOTICES
───────────────────────────────────────── */
.rt-notice {
  padding: 12px 16px;
  border-radius: var(--rt-radius);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rt-notice-success {
  background: rgba(76,175,110,0.12);
  border: 1px solid rgba(76,175,110,0.3);
  color: var(--rt-green);
}

.rt-notice-error {
  background: rgba(224,92,92,0.12);
  border: 1px solid rgba(224,92,92,0.3);
  color: var(--rt-red);
}

.rt-notice-info {
  background: rgba(186,117,23,0.1);
  border: 1px solid rgba(186,117,23,0.3);
  color: var(--rt-gold);
}

/* ─────────────────────────────────────────
   LOADING SKELETONS
───────────────────────────────────────── */
@keyframes rt-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.rt-skeleton {
  background: linear-gradient(
    90deg,
    var(--rt-bg-surface) 25%,
    var(--rt-bg-card) 50%,
    var(--rt-bg-surface) 75%
  );
  background-size: 800px 100%;
  animation: rt-shimmer 1.4s infinite linear;
  border-radius: var(--rt-radius);
}

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.rt-pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.rt-page-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-border);
  background: var(--rt-bg-surface);
  color: var(--rt-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--rt-transition);
}

.rt-page-btn:hover,
.rt-page-btn.active {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
  background: rgba(186,117,23,0.1);
}

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
.rt-hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(186,117,23,0.12) 0%, transparent 70%),
    var(--rt-bg);
}

.rt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--rt-gold-dim);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
  margin-bottom: 24px;
}

.rt-hero__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rt-gold);
  animation: rt-pulse 2s infinite;
}

@keyframes rt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.rt-hero__cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ─────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────── */
.rt-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.rt-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rt-border);
  font-size: 0.88rem;
}

.rt-alert-row:last-child {
  border-bottom: none;
}

.rt-alert-card-name {
  font-weight: 600;
  color: var(--rt-white);
}

.rt-alert-target {
  font-family: var(--rt-font-mono);
  color: var(--rt-gold);
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 768px) {
  .rt-deal-card {
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
  }

  .rt-deal-card__prices {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--rt-border);
    padding-top: 12px;
    margin-top: 4px;
  }

  .rt-stats-bar {
    grid-template-columns: 1fr 1fr;
  }

  .rt-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .rt-filter-select,
  .rt-filter-input {
    width: 100%;
  }

  .rt-form-row {
    flex-direction: column;
  }

  .rt-hero {
    min-height: auto;
    padding: 60px 20px;
  }
}

@media (max-width: 480px) {
  .rt-pricing-grid {
    grid-template-columns: 1fr;
  }

  .rt-stats-bar {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────
   ELEMENTOR OVERRIDES
───────────────────────────────────────── */
.elementor-section,
.e-container {
  background-color: transparent !important;
}

.elementor-widget-wrap {
  background-color: transparent !important;
}

/* Force dark backgrounds on Elementor sections that need it */
.rt-section-dark {
  background-color: var(--rt-bg) !important;
}

.rt-section-surface {
  background-color: var(--rt-bg-surface) !important;
}

/* ─────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────── */
.rt-text-gold   { color: var(--rt-gold) !important; }
.rt-text-green  { color: var(--rt-green) !important; }
.rt-text-red    { color: var(--rt-red) !important; }
.rt-text-muted  { color: var(--rt-muted) !important; }
.rt-text-white  { color: var(--rt-white) !important; }
.rt-text-center { text-align: center; }
.rt-text-right  { text-align: right; }

.rt-mt-0  { margin-top: 0 !important; }
.rt-mb-0  { margin-bottom: 0 !important; }
.rt-mb-16 { margin-bottom: 16px; }
.rt-mb-24 { margin-bottom: 24px; }
.rt-mb-32 { margin-bottom: 32px; }

.rt-flex        { display: flex; }
.rt-flex-center { display: flex; align-items: center; justify-content: center; }
.rt-gap-8       { gap: 8px; }
.rt-gap-12      { gap: 12px; }

.rt-hidden      { display: none !important; }
.rt-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rt-bg); }
::-webkit-scrollbar-thumb {
  background: var(--rt-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--rt-gold-dim); }