:root {
  --brand: #2ac8c8;
  --brand-2: #17a2b8;
  --ink-900: #0b0b0b;
  --ink-700: #2b2b2b;
  --ink-500: #6c6c6c;
  --ink-300: #9aa0a6;
  --bg-0: #ffffff;
  --bg-50: #f7f7f8;
  --bg-100: #f2f4f7;
  --radius: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --easing: cubic-bezier(0.23, 1, 0.32, 1);
}

html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink-900); }

.rewards-page { max-width: 1100px; margin: 0 auto; padding-bottom: 64px; }

/* Hero */
.rewards-hero { text-align: center; margin-top: 24px; }
.reward-image { width: 260px; height: auto; margin: 24px auto 8px; display: block; filter: drop-shadow(var(--shadow-sm)); }
.logo-image { max-width: 200px; height: auto; opacity: .9; }
.eyebrow { color: var(--brand); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; font-size: .8rem; }
.page-title { font-size: clamp(32px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 8px; color: #212529; }
.subtitle { color: #212529; font-size: 1.05rem; }

h3.fw-light {
  font-weight: 300; /* Revert to Bootstrap's fw-light */
  color: #212529;
}

/* Primary CTA */
.btn-primary { background-image: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; border-radius: var(--radius-pill); padding: 12px 22px; font-weight: 600; box-shadow: 0 8px 20px rgba(39, 201, 184, .25); transition: transform .25s var(--easing), box-shadow .25s var(--easing); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(39, 201, 184, .3); }
.btn-light { border-radius: var(--radius-pill); }

/* Share link */
.share-card { background: var(--bg-50); border-radius: var(--radius-pill); padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 1.05rem; color: var(--ink-700); }

/* Social buttons */
.social-btn { width: 56px; height: 56px; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .2s var(--easing), box-shadow .2s var(--easing); }
.social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-btn.fb { background: #1877f2; }
.social-btn.x { background: #000; }
.social-btn.whatsapp { background: #25d366; }
.social-btn.ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-btn.tg { background: #0088cc; }
.social-btn.msgr { background: #0084ff; }
.social-btn i, .social-btn img, .social-btn svg { filter: brightness(0) invert(1); width: 18px; height: 18px; }

/* Metrics */
.metrics { margin-top: 20px; }
.metric-card { background: var(--bg-0); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow-sm); }
.metric-title { color: var(--ink-500); font-size: .9rem; margin-bottom: 6px; }
.metric-number { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }

/* Sections */
.section-card { background: var(--bg-0); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.section-card .card-body { padding: 24px; }

/* Completed referrals table */
.table thead th { color: var(--ink-500); font-weight: 600; border-bottom-color: #eceff3; }
.table td, .table th { vertical-align: middle; }

/* Guidance banner */
.guidance-banner .alert { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Invite tiles */
.invite-tile .badge { border-radius: var(--radius-pill); }

/* Utility */
.update-banner { font-size: .85rem; }

/* Small screens tweaks */
@media (max-width: 575.98px) {
  .rewards-page { padding: 0 12px; }
}

/* ============================================
   MOBILE OPTIMIZATIONS (iPhone 14/15/16 Pro Max)
   ============================================ */
@media (max-width: 430px) {
  /* Referral link share card - fix vertical distortion */
  .share-card {
    padding: 10px 12px !important;
    border-radius: 24px !important;
    min-height: auto !important;
    height: auto !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .share-card .flex-grow-1 {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .share-card .form-control,
  .share-card input.mono-input,
  .share-card input#shareLink {
    font-size: 0.85rem !important;
    padding: 6px 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 1.2 !important;
  }

  .share-card .btn,
  .share-card .btn-primary {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    height: 36px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Social share buttons - tighter spacing */
  .social-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .social-btn i, .social-btn img {
    width: 16px !important;
    height: 16px !important;
  }

  /* Metrics cards - better mobile layout */
  .metrics.row,
  .metrics {
    margin-left: -2px !important;
    margin-right: -2px !important;
  }

  .metrics .col,
  .metrics > .col {
    padding-left: 3px !important;
    padding-right: 3px !important;
    flex: 1 1 0 !important;
    max-width: 33.333% !important;
  }

  .metric-card {
    padding: 10px 6px !important;
    border-radius: 10px !important;
    min-height: 80px !important;
  }

  .metric-number {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
  }

  .metric-title {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Action buttons - "Send Invites", "Copy Link", "Import Contacts" */
  .rewards-page .btn.rounded-pill {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
  }

  /* "No invitations yet" action buttons */
  .rewards-page .d-flex.justify-content-center.gap-2 {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .rewards-page .d-flex.justify-content-center.gap-2 .btn {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }

  /* "How rewards work" info banner */
  .rewards-page .alert,
  .rewards-page .guidance-banner .alert {
    padding: 12px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }

  /* Import contacts buttons (Gmail, Yahoo, Outlook, CSV) */
  .rewards-page .d-flex.justify-content-center.gap-2.flex-wrap .btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  /* Section headers */
  .rewards-page h3,
  .rewards-page .fw-light {
    font-size: 1.1rem !important;
  }

  /* Page title */
  .page-title {
    font-size: 1.6rem !important;
  }

  /* Hero image - smaller and more space from navbar */
  .reward-image {
    width: 140px !important;
    height: auto !important;
    margin: 0 auto 4px !important;
  }

  .rewards-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Page title smaller on mobile */
  .rewards-page .page-title,
  .page-title {
    font-size: 1.4rem !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Eyebrow text */
  .eyebrow {
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
  }

  /* Subtitle */
  .subtitle {
    font-size: 0.9rem !important;
  }

  /* Cards general */
  .section-card .card-body {
    padding: 16px !important;
  }

  /* Completed referrals / claim cards */
  .completed-card,
  .claim-card {
    padding: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Email chip input - fix the "Enter email addresses" box */
  .email-chip-container,
  #emailChipContainer {
    min-height: 44px !important;
    max-height: 44px !important;
    height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .email-chip-input,
  #emailInput {
    font-size: 0.9rem !important;
    min-width: 150px !important;
    padding: 4px 0 !important;
  }

  .email-chip-input::placeholder {
    font-size: 0.9rem !important;
  }

  /* Card containing email input */
  .rewards-page .card-body.p-5,
  .rewards-page .card-body {
    padding: 16px !important;
  }

  .rewards-page .card {
    border-radius: 16px !important;
  }

  /* Reduce spacing between sections */
  .rewards-page .mb-4 {
    margin-bottom: 12px !important;
  }

  .rewards-page .mb-5 {
    margin-bottom: 16px !important;
  }

  .rewards-page .mt-4 {
    margin-top: 12px !important;
  }

  .rewards-page .mt-5 {
    margin-top: 16px !important;
  }
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.anim-fade-up { animation: fadeUp .6s var(--easing) both; }
.ani-delay-1 { animation-delay: .08s; }
.ani-delay-2 { animation-delay: .16s; }
.ani-delay-3 { animation-delay: .24s; }
.ani-delay-4 { animation-delay: .32s; }

/* Metric pop animation */
@keyframes metricPop {
  0% { transform: translateY(8px) scale(.985); opacity: 0; }
  60% { transform: translateY(0) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.metric-pop { animation: metricPop .6s var(--easing) both; }

/* Completed referral cards */
.completed-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.completed-card { grid-column: span 12; background: var(--bg-0); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.completed-left { display: flex; align-items: center; gap: 12px; }
.completed-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(32, 201, 151, .12); display: inline-flex; align-items: center; justify-content: center; color: #28a745; }
.completed-meta { line-height: 1.2; }
.completed-meta .title { font-weight: 600; letter-spacing: -0.01em; }
.completed-meta .sub { color: var(--ink-500); font-size: .9rem; }
.completed-right { display: flex; align-items: center; gap: 12px; }
.badge-soft { background: #eaf7f1; color: #1e7f53; border-radius: var(--radius-pill); padding: 6px 10px; font-weight: 600; }

/* Claim cards */
.claim-card { grid-column: span 12; background: var(--bg-0); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.claim-left { display: flex; align-items: center; gap: 12px; }
.claim-meta .title { font-weight: 600; letter-spacing: -0.01em; }
.claim-meta .sub { color: var(--ink-500); font-size: .9rem; }
.status-badge { border-radius: var(--radius-pill); padding: 6px 10px; font-weight: 600; }
.status-badge.success { background: #eaf7f1; color: #1e7f53; }
.status-badge.pending { background: #fff5e6; color: #a66e00; }
.pending-icon { background: rgba(255, 193, 7, .15); color: #b58900; }

/* Focus + highlight */
.invite-tile, .completed-card, .claim-card { transition: box-shadow .25s var(--easing), transform .25s var(--easing); }
.invite-tile:hover, .completed-card:hover, .claim-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.invite-tile:focus-within, .completed-card:focus-within, .claim-card:focus-within { box-shadow: 0 0 0 3px rgba(42,200,200,.25); }
.row-highlight { box-shadow: 0 0 0 3px rgba(42,200,200,.35) !important; }

/* Filter list transitions */
.fade-list { transition: opacity .2s var(--easing), transform .2s var(--easing); will-change: opacity, transform; }
.fade-leave { opacity: 0.0; transform: translateY(6px); }
.fade-enter { opacity: 1; transform: translateY(0); }

@media (min-width: 576px) {
  .completed-card { padding: 18px 20px; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) and (prefers-color-scheme: light) {
  :root {
    --ink-900: #e9eef6;
    --ink-700: #d3dae6;
    --ink-500: #9fb0c0;
    --bg-0: #0f1216;
    --bg-50: #12161b;
    --bg-100: #161b21;
    --shadow-sm: 0 6px 18px rgba(0,0,0,0.6);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.7);
  }
  .share-card { background: var(--bg-100); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  .metric-card { background: var(--bg-100); box-shadow: var(--shadow-sm); }
  .section-card { background: var(--bg-100); box-shadow: var(--shadow-sm); }
  .table thead th { border-bottom-color: #1c2430; }
  .completed-card { background: var(--bg-100); }
  .badge-soft { background: #173427; color: #8ee3ba; }
  .status-badge.success { background: #173427; color: #8ee3ba; }
  .status-badge.pending { background: #2a2416; color: #ffcf66; }
  /* Invite tiles dark mode */
  .invite-tile { background: var(--bg-100) !important; border: 1px solid rgba(255,255,255,.1) !important; }
  .invite-tile .text-muted { color: var(--ink-500) !important; }
  .invite-tile .badge.bg-light { background: rgba(255,255,255,.15) !important; color: var(--ink-700) !important; border-color: rgba(255,255,255,.2) !important; }
}