/* ════════════════════════════════════════════════════════════
   SMBUXpro — style-additions.css
   Three enhancement blocks:
     1. Video Carousel
     2. Account Cards (upgraded)
     3. Scroll Animations
   Append this entire file to the bottom of style.css
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   1. VIDEO CAROUSEL — full-bleed background video in slides
   ════════════════════════════════════════════════════════════ */

/* Video fills the slide exactly like the background image does */
.slide-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Smooth scale on hover (same as .slide-bg-img) */
  transition: transform 0.4s ease;
}
.carousel-slide:hover .slide-bg-video {
  transform: scale(1.02);
}

/* When no bg at all — solid dark fill so overlay still looks right */
.carousel-slide:not(:has(.slide-bg-img[style*="background-image"]))
.slide-gradient,
.carousel-slide:not(:has(.slide-bg-video)) .slide-gradient {
  background: linear-gradient(135deg, rgba(6,7,10,.55), rgba(12,14,20,.50)) !important;
}

/* Admin ad manager — video type badge */
.ad-type-video {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .63rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(124,77,255,.15);
  border: 1px solid rgba(124,77,255,.35);
  color: var(--purple);
}
.ad-type-image {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .63rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.25);
  color: var(--accent);
}

/* Upload drag-drop zone — hover glow */
.media-upload-zone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 2px dashed var(--border2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .8rem;
  color: var(--muted2);
  transition: border-color .2s, color .2s, background .2s;
  white-space: nowrap;
}
.media-upload-zone:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,229,255,.04);
}


/* ════════════════════════════════════════════════════════════
   2. ACCOUNT CARDS — upgraded with platform branding
   ════════════════════════════════════════════════════════════ */

/* Grid — tighter gap, allow more columns on wide screens */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
  padding: 0 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card base */
.account-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position: relative;
  /* Scroll animation initial state — overridden by in-view */
}
.account-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

/* Card image hero — taller, richer */
.account-card-img {
  height: 185px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.account-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
  display: block;
}
.account-card:hover .account-card-img img {
  transform: scale(1.06);
}

/* Fallback — platform gradient with centred emoji */
.account-card-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  inset: 0;
}

/* Platform badge — bottom-left, glassmorphism */
.account-card-platform-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6,7,10,.55);
  color: #fff;
  letter-spacing: .3px;
  z-index: 2;
}

/* Verified badge */
.account-card-verified {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,230,118,.92);
  color: #000;
  font-size: .6rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 50px;
  letter-spacing: .3px;
  z-index: 2;
}

/* Card body */
.account-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-card-title {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 700;
  font-size: .96rem;
  margin-bottom: 9px;
  line-height: 1.3;
}

.account-card-followers {
  margin-bottom: 11px;
}

.account-card-desc {
  font-size: .81rem;
  color: var(--muted2);
  line-height: 1.65;
  margin-bottom: 13px;
  flex: 1;
  /* Clamp to 3 lines to keep cards uniform height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.account-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.account-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--muted2);
  white-space: nowrap;
}

/* Footer — price + buy button */
.account-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.account-card-price {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.account-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  border: none;
  transition: filter .2s, transform .2s;
  text-decoration: none;
  white-space: nowrap;
}
.account-card-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Admin account card — thumbnail preview */
#admin-accounts-list .admin-item-card {
  border-left: 3px solid transparent;
  transition: border-color .2s;
}
#admin-accounts-list .admin-item-card:hover {
  border-left-color: var(--accent);
}

/* Responsive */
@media (max-width: 600px) {
  .accounts-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px 32px;
  }
  .account-card-img { height: 160px; }
}
@media (min-width: 1400px) {
  .accounts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ════════════════════════════════════════════════════════════
   3. SCROLL ANIMATIONS
   Big travel distance + spring easing = unmistakably obvious
   on dark backgrounds. Elements launch from far below and
   slightly scaled down, landing with a natural overshoot.
   ════════════════════════════════════════════════════════════ */

/* ── Spring easing variable (used everywhere) ────────────── */
:root {
  --spring: cubic-bezier(.22, .68, 0, 1.2);
  --spring-fast: cubic-bezier(.34, 1.4, .64, 1);
}

/* ─────────────────────────────────────────────────────────
   BASE — default: large vertical travel + scale down
   transition-delay comes from inline style set by JS
   ───────────────────────────────────────────────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.93);
  transition:
    opacity  0.75s var(--spring),
    transform 0.75s var(--spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────────────────
   DIRECTIONAL VARIANTS
   ───────────────────────────────────────────────────────── */
.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.95);
  transition: opacity .7s var(--spring), transform .7s var(--spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal-left.in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  transition: opacity .7s var(--spring), transform .7s var(--spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal-right.in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ─────────────────────────────────────────────────────────
   PER-ELEMENT STAGGER — manual utility classes
   ───────────────────────────────────────────────────────── */
.reveal-d1 { transition-delay:  80ms !important; }
.reveal-d2 { transition-delay: 160ms !important; }
.reveal-d3 { transition-delay: 240ms !important; }
.reveal-d4 { transition-delay: 320ms !important; }
.reveal-d5 { transition-delay: 400ms !important; }
.reveal-d6 { transition-delay: 480ms !important; }

/* ─────────────────────────────────────────────────────────
   SECTION-SPECIFIC OVERRIDES
   Each element type gets its own personality
   ───────────────────────────────────────────────────────── */

/* Hero — dramatic entrance, longest duration */
.hero-content.scroll-reveal,
.accounts-hero-content.scroll-reveal {
  transform: translateY(72px) scale(0.94);
  transition-duration: .9s;
}

/* Stat / metric boxes — scale punch, spring overshoot */
.stat-box.scroll-reveal,
.admin-stat-card.scroll-reveal,
.rev-stat-card.scroll-reveal,
.sb-item.scroll-reveal {
  transform: translateY(44px) scale(0.88);
  transition-duration: .65s;
  transition-timing-function: var(--spring-fast);
}
.stat-box.in-view,
.admin-stat-card.in-view,
.rev-stat-card.in-view,
.sb-item.in-view {
  transform: translateY(0) scale(1);
}

/* Feature cards — strong lift + scale */
.feature-card.scroll-reveal {
  transform: translateY(56px) scale(0.91);
  transition-duration: .7s;
}

/* How-it-works steps — slide from left with vertical */
.hiw-step.scroll-reveal {
  transform: translateX(-48px) translateY(24px) scale(0.95);
  transition-duration: .72s;
}
.hiw-step.in-view {
  transform: translateX(0) translateY(0) scale(1);
}

/* HIW arrow separators — quick fade */
.hiw-arrow.scroll-reveal {
  transform: translateY(20px);
  transition-duration: .5s;
}

/* Platform showcase cards — scale pop */
.showcase-card.scroll-reveal {
  transform: translateY(48px) scale(0.86);
  transition-duration: .62s;
  transition-timing-function: var(--spring-fast);
}
.showcase-card.in-view {
  transform: translateY(0) scale(1);
}

/* Revenue ticker items — stagger up */
.rticker-item.scroll-reveal {
  transform: translateY(40px) scale(0.92);
  transition-duration: .6s;
}
.rticker-item.in-view {
  transform: translateY(0) scale(1);
}

/* FAQ grid items */
.faq-item.scroll-reveal {
  transform: translateY(50px) scale(0.94);
  transition-duration: .68s;
}

/* How-to page steps — dramatic left slide */
.howto-step.scroll-reveal {
  transform: translateX(-52px) scale(0.97);
  transition-duration: .72s;
}
.howto-step.in-view {
  transform: translateX(0) scale(1);
}

/* Account marketplace cards — scale + lift */
.account-card.scroll-reveal {
  transform: translateY(64px) scale(0.90);
  transition-duration: .75s;
  transition-timing-function: var(--spring);
}
.account-card.in-view {
  transform: translateY(0) scale(1);
}

/* Large banner sections — sweep up */
.cta-banner.scroll-reveal,
.amp-preview-banner.scroll-reveal,
.how-it-works-banner.scroll-reveal,
.accounts-sell-cta.scroll-reveal,
.howto-cta.scroll-reveal {
  transform: translateY(64px) scale(0.97);
  transition-duration: .8s;
}

/* Carousel sections */
.carousel-section.scroll-reveal {
  transform: translateY(48px) scale(0.98);
  transition-duration: .7s;
}

/* Generic cards */
.card.scroll-reveal {
  transform: translateY(52px) scale(0.96);
  transition-duration: .72s;
}

/* Platform showcase grid parent */
.platform-showcase.scroll-reveal {
  transform: translateY(44px);
  transition-duration: .7s;
}

/* Services / accounts hero banner */
.accounts-hero-content.scroll-reveal {
  transform: translateY(64px) scale(0.95);
  transition-duration: .85s;
}

/* ─────────────────────────────────────────────────────────
   REDUCE MOTION — always respect the user's preference
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE — reduce travel distance slightly so nothing
   clips off-screen on narrow viewports, keep the drama
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scroll-reveal                        { transform: translateY(40px) scale(0.94); }
  .feature-card.scroll-reveal           { transform: translateY(38px) scale(0.93); }
  .stat-box.scroll-reveal,
  .sb-item.scroll-reveal                { transform: translateY(32px) scale(0.90); }
  .showcase-card.scroll-reveal          { transform: translateY(34px) scale(0.88); }
  .account-card.scroll-reveal           { transform: translateY(44px) scale(0.92); }
  .howto-step.scroll-reveal             { transform: translateX(-32px) scale(0.97); }
  .hiw-step.scroll-reveal               { transform: translateX(-30px) translateY(16px) scale(0.96); }
  .cta-banner.scroll-reveal,
  .amp-preview-banner.scroll-reveal,
  .how-it-works-banner.scroll-reveal    { transform: translateY(40px) scale(0.97); }
  .hero-content.scroll-reveal,
  .accounts-hero-content.scroll-reveal  { transform: translateY(44px) scale(0.95); }
}


/* ════════════════════════════════════════════════════════════
   4. SECTION BACKGROUNDS
   Each page gets its own visual atmosphere.
   All done in pure CSS — no external image files needed.
   Uses SVG data URIs, gradients, and pseudo-elements.
   ════════════════════════════════════════════════════════════ */

/* ── Hero video performance fix ──────────────────────────── */
.hero-video {
  /* Force GPU layer immediately so it paints before decoding */
  will-change: transform;
  transform: translateZ(0);
  /* Ensure it covers instantly once loaded */
  background: #06070a;
}

/* Poster image shows instantly while video loads */
.hero-wrapper {
  background:
    linear-gradient(160deg, #07090f 0%, #0a0e1a 40%, #060810 100%);
}

/* ── SERVICES PAGE — dark grid + cyan glow ───────────────── */
.page-bg-services {
  position: relative;
  background: var(--bg);
}
.page-bg-services::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Horizontal grid lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(0,229,255,.04) 59px,
      rgba(0,229,255,.04) 60px
    ),
    /* Vertical grid lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(0,229,255,.04) 59px,
      rgba(0,229,255,.04) 60px
    ),
    /* Top-right accent glow */
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(0,229,255,.07) 0%, transparent 60%),
    /* Bottom-left glow */
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(42,171,238,.05) 0%, transparent 55%),
    var(--bg);
}
.page-bg-services > * {
  position: relative;
  z-index: 1;
}

/* ── ORDER PAGE — animated particle canvas bg (see JS) + mesh ── */
.page-bg-order {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,229,255,.09) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5% 80%, rgba(42,171,238,.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 60% at 95% 50%, rgba(124,77,255,.05) 0%, transparent 50%),
    linear-gradient(160deg, #07090f 0%, #0b0f1e 40%, #060810 100%);
  min-height: 100vh;
}
.page-bg-order::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Diagonal mesh lines */
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 79px,
      rgba(0,229,255,.025) 79px,
      rgba(0,229,255,.025) 80px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 79px,
      rgba(124,77,255,.02) 79px,
      rgba(124,77,255,.02) 80px
    );
}
.page-bg-order > * {
  position: relative;
  z-index: 1;
}

/* ── TRACK PAGE — subtle dot constellation ───────────────── */
.page-bg-track {
  position: relative;
  background: var(--bg);
}
.page-bg-track::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Dot grid pattern */
  background-image:
    radial-gradient(circle, rgba(0,229,255,.18) 1px, transparent 1px),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,229,255,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgba(42,171,238,.04) 0%, transparent 50%);
  background-size: 40px 40px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}
.page-bg-track::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Vignette overlay to darken edges */
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 40%,
    rgba(6,7,10,.6) 100%
  );
}
.page-bg-track > * {
  position: relative;
  z-index: 1;
}

/* ── ACCOUNTS PAGE — multi-platform gradient atmosphere ──── */
.page-bg-accounts {
  position: relative;
  background: var(--bg);
}
.page-bg-accounts::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* TikTok pink top-left */
    radial-gradient(ellipse 45% 35% at -5% 20%, rgba(255,0,79,.06) 0%, transparent 55%),
    /* Instagram purple centre-right */
    radial-gradient(ellipse 40% 40% at 105% 35%, rgba(225,48,108,.05) 0%, transparent 55%),
    /* YouTube red bottom-left */
    radial-gradient(ellipse 35% 30% at 0% 90%, rgba(255,0,0,.04) 0%, transparent 50%),
    /* Twitter blue top-right */
    radial-gradient(ellipse 50% 35% at 100% 5%, rgba(29,161,242,.05) 0%, transparent 55%),
    /* Centre glow */
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,229,255,.03) 0%, transparent 60%),
    var(--bg);
}
.page-bg-accounts > * {
  position: relative;
  z-index: 1;
}

/* ── HOW TO PAGE — editorial paper texture via SVG ───────── */
.page-bg-howto {
  position: relative;
  background: var(--bg);
}
.page-bg-howto::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Subtle horizontal rule lines — editorial / newspaper feel */
  background:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 47px,
      rgba(255,255,255,.018) 47px,
      rgba(255,255,255,.018) 48px
    ),
    /* Left accent bar */
    linear-gradient(90deg,
      rgba(0,229,255,.04) 0px,
      rgba(0,229,255,.04) 3px,
      transparent 3px
    ),
    /* Top gradient wash */
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(0,229,255,.05) 0%, transparent 55%),
    var(--bg);
}
.page-bg-howto::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0,229,255,.04) 0%,
    transparent 100%
  );
}
.page-bg-howto > * {
  position: relative;
  z-index: 1;
}

/* ── Admin stays clean — no distracting bg ───────────────── */
#page-admin {
  background: var(--bg);
}

/* ── HOME section backgrounds inside the page ────────────── */

/* Stats row — subtle gradient wash */
.stats-row {
  position: relative;
  background: var(--surface);
}

/* How it works — deepen the existing surface bg */
.how-it-works-banner {
  position: relative;
  overflow: hidden;
}
.how-it-works-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,229,255,.04) 0%, transparent 65%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 99px,
      rgba(0,229,255,.03) 99px,
      rgba(0,229,255,.03) 100px
    );
}

/* Features grid — faint diagonal stripe */
.features-grid {
  position: relative;
}
.features-grid::before {
  content: '';
  position: absolute;
  inset: -32px -24px;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    -60deg,
    transparent,
    transparent 39px,
    rgba(0,229,255,.015) 39px,
    rgba(0,229,255,.015) 40px
  );
}
.features-grid > * {
  position: relative;
  z-index: 1;
}

/* CTA banner — glowing border effect */
.cta-banner-inner {
  position: relative;
  overflow: hidden;
}
.cta-banner-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 30% 30% at 50% 50%,
    rgba(0,229,255,.06) 0%,
    transparent 60%
  );
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* Revenue ticker — shimmer line effect */
.revenue-ticker::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,229,255,.06) 50%,
    transparent 100%
  );
  animation: ticker-shimmer 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ticker-shimmer {
  0%   { left: -60%; }
  100% { left: 110%; }
}

/* ════════════════════════════════════════════════════════════
   5. HERO VIDEO FAST-LOAD POLISH
   ════════════════════════════════════════════════════════════ */

/* Prevent layout shift while video loads — poster fills space */
.hero-wrapper {
  isolation: isolate;
}

/* Fade the video in once it starts playing */
.hero-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-video.playing {
  opacity: 1;
}

/* While video loads, the hero-overlay tints the poster bg */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(6,7,10,.82) 0%,
    rgba(6,7,10,.55) 45%,
    rgba(6,7,10,.95) 100%
  );
}


/* ════════════════════════════════════════════════════════════
   CHAT WIDGET POSITION FIX
   Force correct bottom-right positioning regardless of
   any conflicting rules from older CSS versions
   ════════════════════════════════════════════════════════════ */
#chat-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9999 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #2aabee !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  box-shadow: 0 4px 20px rgba(42,171,238,.5) !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s !important;
}
#chat-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 28px rgba(42,171,238,.6) !important;
}

#chat-panel {
  position: fixed !important;
  bottom: 92px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9998 !important;
  width: 320px !important;
  max-width: calc(100vw - 32px) !important;
}

@media (max-width: 768px) {
  #chat-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
  }
  #chat-panel {
    bottom: 80px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ACCOUNT CARD IMAGE FIX
   Paste these rules at the very bottom of style.css
   ════════════════════════════════════════════════════════════ */

/* Wider cards — minimum 340px so photos fill properly */
.accounts-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 24px !important;
}

/* Taller image area — 260px gives enough room for portrait/square photos */
.account-card-img {
  height: 260px !important;
}

/* Make sure the actual <img> tag fills the full area */
.account-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important; /* show face/top of photo not bottom */
}

/* Fallback icon area also fills the taller space */
.account-card-img-fallback {
  height: 100% !important;
}

/* On mobile: single column, full width */
@media (max-width: 600px) {
  .accounts-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px 32px !important;
  }
  .account-card-img {
    height: 220px !important;
  }
}

/* On large screens: max 3 columns so cards stay wide */
@media (min-width: 1200px) {
  .accounts-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}