/* =========================================================
   Instagram theme for ViralonTop
   Loads after style.css and only overrides colours.
   Remove the <link> to instagram-theme.css to go back to red.
   ========================================================= */
:root {
  --ig-indigo: #515BD4;
  --ig-purple: #8134AF;
  --ig-magenta: #DD2A7B;
  --ig-orange: #F58529;
  --ig-yellow: #FEDA77;
  --ig-royal: #405DE6;
  --ig-dark-pink: #C13584;
  --ig-red-pink: #E1306C;
  --ig-blue: #0095F6;        /* Instagram's verified badge / link blue */

  --ig-grad: linear-gradient(45deg, #FEDA77 0%, #F58529 25%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%);
  --ig-grad-btn: linear-gradient(90deg, #F58529 0%, #DD2A7B 45%, #8134AF 80%, #515BD4 100%);
  --ig-grad-text: linear-gradient(90deg, #F58529 0%, #DD2A7B 40%, #8134AF 75%, #515BD4 100%);

  /* the base stylesheet's "red" tokens now point at Instagram colours */
  --red: #DD2A7B;
  --red-dark: #C13584;
  --red-deep: #833AB4;
  --red-soft: #fdeef5;
  --shadow: 0 10px 30px rgba(129, 52, 175, 0.08);
  --shadow-lg: 0 24px 60px rgba(129, 52, 175, 0.16);
}

/* gradient text helper */
.accent, .logo span b, .kicker, .stats-grid b, .big-num {
  background: var(--ig-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.accent { padding-right: .08em; } /* keeps the italic tail from being clipped */

/* ---------- Buttons ---------- */
.btn-red {
  background: var(--ig-grad-btn); background-size: 160% 100%; background-position: 0% 50%;
  color: #fff; box-shadow: 0 8px 22px rgba(221, 42, 123, .28);
  transition: transform .15s, box-shadow .15s, background-position .4s;
}
.btn-red:hover { background: var(--ig-grad-btn); background-size: 160% 100%; background-position: 100% 50%; box-shadow: 0 10px 26px rgba(129, 52, 175, .32); }
.btn-ghost:hover, .btn-outline-white:hover { border-color: var(--ig-magenta); color: var(--ig-magenta); }

/* ---------- Logo ---------- */
.logo-mark { background: var(--ig-grad); }

/* ---------- Backgrounds ---------- */
.hero {
  background:
    radial-gradient(55% 50% at 10% 5%, rgba(254, 218, 119, .28) 0%, transparent 70%),
    radial-gradient(50% 45% at 50% 0%, rgba(221, 42, 123, .12) 0%, transparent 70%),
    radial-gradient(50% 45% at 92% 15%, rgba(81, 91, 212, .14) 0%, transparent 70%),
    linear-gradient(#fffafc, #fff);
}
.page-hero {
  background:
    radial-gradient(50% 80% at 10% 0%, rgba(254, 218, 119, .30), transparent 70%),
    radial-gradient(45% 70% at 50% 0%, rgba(221, 42, 123, .12), transparent 70%),
    radial-gradient(40% 70% at 92% 10%, rgba(81, 91, 212, .14), transparent 70%),
    #fffafc;
}
.split-media {
  border-color: #f1e1f3;
  background:
    radial-gradient(70% 70% at 15% 10%, rgba(245, 133, 41, .18), transparent 70%),
    radial-gradient(70% 70% at 90% 90%, rgba(81, 91, 212, .16), transparent 70%),
    linear-gradient(140deg, #fff7f2, #f7f0fc);
}
.cta {
  border-color: #f1e1f3;
  background:
    radial-gradient(60% 80% at 5% 0%, rgba(254, 218, 119, .35), transparent 70%),
    radial-gradient(50% 80% at 100% 100%, rgba(129, 52, 175, .16), transparent 70%),
    #fff8fb;
}
.card-cover {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(254, 218, 119, .55), transparent 60%),
    radial-gradient(90% 140% at 100% 100%, rgba(129, 52, 175, .35), transparent 60%),
    linear-gradient(135deg, #ffe9d6, #fbe1ef 50%, #ece4fb);
}
.modal-top {
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(254, 218, 119, .45), transparent 70%),
    radial-gradient(70% 120% at 100% 100%, rgba(129, 52, 175, .22), transparent 70%),
    #fff6fa;
}

/* ---------- Story-ring avatars ----------
   gradient border-box ring + white padding gap + photo, like an Instagram story */
.card-body .avatar, .modal-top .avatar, .join-head .avatar,
.cell-creator .avatar, .mini-row .avatar, .fc-head img, .t-card .avatar {
  border: 3px solid transparent; padding: 2px; box-shadow: none;
  background: linear-gradient(#fff, #fff) padding-box, var(--ig-grad) border-box;
}
.cell-creator .avatar, .mini-row .avatar, .t-card .avatar { border-width: 2px; padding: 1.5px; }

/* ---------- Badges & icons ---------- */
.verified { color: var(--ig-blue); }
.reel-info .verified { color: #fff; }
.card-cover .plat { color: var(--ig-magenta); }
.eyebrow .dot { background: var(--ig-magenta); box-shadow: 0 0 0 4px rgba(221, 42, 123, .15); }
.feature .ico { background: linear-gradient(135deg, #fff1e3, #fbe3f0 55%, #ece7fb); color: var(--ig-purple); }
.checks li::before { background: var(--ig-grad); }
.bar i { background: var(--ig-grad-btn); }
.fc-bars i { background: linear-gradient(var(--ig-magenta), var(--ig-orange)); }
.tag { background: #fdeef5; color: var(--ig-dark-pink); }
.inline-ico { color: var(--ig-magenta); }

/* ---------- Creators page controls ---------- */
.platform-tabs button.active { background: #fdeef5; color: var(--ig-dark-pink); box-shadow: inset 0 0 0 1.5px rgba(221, 42, 123, .35); }
.chips button:hover { border-color: var(--ig-magenta); }
.chips button.on { background: var(--ig-grad-btn); border-color: transparent; color: #fff; }
.pagination button.on { background: var(--ig-grad-btn); border-color: transparent; }
.view-toggle button.on { background: #fdeef5; color: var(--ig-dark-pink); }
.switch input:checked + span { background: var(--ig-grad-btn); }
input[type="range"] { accent-color: var(--ig-magenta); }
.range-val, .filters-head button { color: var(--ig-magenta); }
.search-input:focus-within, .f-group select:focus, .f-group input:focus,
.join-form input:focus, .join-form select:focus { border-color: var(--ig-purple); }
table.creators tbody tr:hover { background: #fff6fb; }

/* ---------- Nav ---------- */
.nav a:hover, .nav a.active { color: var(--ig-magenta); }

/* ---------- Footer ---------- */
.footer { background: #12101f; }