/* ============================================================
   App Casino VIP v2.0 – Frontend Styles
   ============================================================ */
:root {
  --acvip-accent: #3a7bd5;
  --acvip-bg:     #0a0e27;
  --acvip-radius: 16px;
  --acvip-text:   #ffffff;
  --acvip-muted:  rgba(255,255,255,.6);
  --acvip-card-shadow: 0 8px 32px rgba(0,0,0,.45);
  --acvip-glow:   0 0 20px rgba(58,123,213,.35);
}
.acvip-casino-block *, .acvip-casino-block *::before, .acvip-casino-block *::after,
.acvip-games-block  *, .acvip-games-block  *::before, .acvip-games-block  *::after,
.acvip-partners-bar *, .acvip-partners-bar *::before, .acvip-partners-bar *::after {
  box-sizing: border-box;
}

/* ============================================================
   CATEGORY BLOCK  [app_casino_vip]
   ============================================================ */
.acvip-casino-block {
  background: var(--acvip-bg);
  border-radius: 20px;
  padding: 28px 20px 32px;
  font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color: var(--acvip-text);
  overflow: hidden;
}
.acvip-block-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: 700; margin: 0 0 22px; letter-spacing: .4px;
}
.acvip-block-title::before {
  content:''; display:inline-block; width:4px; height:22px;
  background: linear-gradient(180deg,var(--acvip-accent),#9b59b6); border-radius:3px;
}
.acvip-jackpot-row { display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.acvip-jackpot-chip {
  background: linear-gradient(135deg,#1e3a6e 0%,#0d47a1 100%);
  border: 1px solid rgba(58,123,213,.5); border-radius:40px; padding:6px 18px;
  display:flex; align-items:center; gap:10px; font-size:.85rem;
}
.acvip-jackpot-chip .acvip-jp-label { color:var(--acvip-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.6px; }
.acvip-jackpot-chip .acvip-jp-val   { color:#ffd700; font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(255,215,0,.5); }
.acvip-grid {
  display:grid; grid-template-columns:repeat(var(--acvip-cols,4),1fr); gap:14px;
}
.acvip-card { position:relative; border-radius:var(--acvip-radius); overflow:hidden; cursor:pointer; transition:transform .25s,box-shadow .25s; text-decoration:none; display:block; min-height:130px; background:linear-gradient(145deg,#111835,#0d1230); box-shadow:var(--acvip-card-shadow); border:1px solid rgba(255,255,255,.06); }
.acvip-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:var(--acvip-glow),var(--acvip-card-shadow); border-color:rgba(58,123,213,.4); text-decoration:none; }
.acvip-card.acvip-featured { grid-column:span 1; grid-row:span 2; min-height:280px; }
.acvip-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .35s; }
.acvip-card:hover .acvip-card-bg { transform:scale(1.06); }
.acvip-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.88) 100%); }
.acvip-card-accent  { position:absolute; bottom:0;left:0;right:0; height:3px; background:var(--acvip-card-color,var(--acvip-accent)); opacity:.8; transition:opacity .25s; }
.acvip-card:hover .acvip-card-accent { opacity:1; }
.acvip-card-body    { position:relative; z-index:2; padding:14px 14px 16px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.acvip-card-icon    { font-size:3rem; text-align:center; flex:1; display:flex; align-items:center; justify-content:center; padding-top:12px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.acvip-featured .acvip-card-icon { font-size:5rem; }
.acvip-card-name    { font-size:1rem; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); margin:0 0 2px; }
.acvip-featured .acvip-card-name { font-size:1.35rem; }
.acvip-card-arrow   { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:rgba(255,255,255,.15); border-radius:50%; font-size:.85rem; color:#fff; transition:background .2s; margin-top:6px; backdrop-filter:blur(4px); }
.acvip-card:hover .acvip-card-arrow { background:var(--acvip-accent); }
.acvip-badge-tag { position:absolute; top:10px; right:10px; z-index:3; padding:3px 9px; border-radius:20px; font-size:.68rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; backdrop-filter:blur(6px); }
.acvip-badge-tag.hot  { background:linear-gradient(135deg,#ff4444,#ff8800); color:#fff; }
.acvip-badge-tag.new  { background:linear-gradient(135deg,#00c851,#007e33); color:#fff; }
.acvip-badge-tag.live { background:linear-gradient(135deg,#aa00ff,#6200ea); color:#fff; animation:acvip-pulse 1.5s infinite; }
.acvip-badge-tag.default { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.3); }
.acvip-card-jackpot { font-size:.78rem; color:#ffd700; font-weight:700; font-variant-numeric:tabular-nums; text-shadow:0 0 8px rgba(255,215,0,.6); margin-bottom:2px; }
.acvip-card-featured-label { font-size:.7rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }

/* ============================================================
   GAMES BLOCK  [acvip_games]
   ============================================================ */
.acvip-games-block {
  background: var(--acvip-bg);
  border-radius: 20px;
  padding: 22px 18px 24px;
  font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color: var(--acvip-text);
  margin-bottom: 24px;
}

/* Header row */
.acvip-games-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.acvip-games-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800;
}
.acvip-games-title-icon { font-size: 1.3rem; }
.acvip-games-header-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.acvip-see-more-link { color:rgba(255,255,255,.6); font-size:.85rem; text-decoration:none; transition:color .2s; white-space:nowrap; }
.acvip-see-more-link:hover { color:#fff; }

/* Game grid */
.acvip-game-grid {
  display: grid;
  grid-template-columns: repeat(var(--acvip-game-cols, 6), 1fr);
  gap: 12px;
}

/* Game Card */
.acvip-game-card {
  position: relative;
  border-radius: var(--acvip-radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.acvip-game-card:hover { transform: translateY(-4px); }
.acvip-game-card-inner {
  display: block; text-decoration: none; color: var(--acvip-text);
  background: #111835; border-radius: var(--acvip-radius); overflow: hidden;
}
.acvip-game-card-inner:hover { text-decoration: none; color: var(--acvip-text); }

/* Thumb */
.acvip-game-thumb {
  position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--acvip-radius) var(--acvip-radius) 0 0;
  background: linear-gradient(145deg, #1a2044, #0d1230);
}
.acvip-game-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.acvip-game-card:hover .acvip-game-thumb img { transform: scale(1.07); }
.acvip-game-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900; color: rgba(255,255,255,.35);
  background: linear-gradient(145deg,#1a2878,#0d1560);
}

/* Hover overlay */
.acvip-game-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
  border-radius: var(--acvip-radius) var(--acvip-radius) 0 0;
}
.acvip-game-card:hover .acvip-game-overlay { opacity: 1; }
.acvip-play-btn {
  background: var(--acvip-accent);
  color: #fff; font-size: .8rem; font-weight: 700;
  padding: 8px 18px; border-radius: 40px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(58,123,213,.5);
}

/* Badge */
.acvip-game-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 6px;
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.acvip-badge-live  { background: #e53935; color: #fff; display:flex; align-items:center; gap:4px; }
.acvip-badge-hot   { background: linear-gradient(135deg,#ff4444,#ff8800); color:#fff; }
.acvip-badge-new   { background: linear-gradient(135deg,#00c851,#007e33); color:#fff; }
.acvip-live-dot    { width:6px; height:6px; background:#fff; border-radius:50%; animation:acvip-pulse 1.2s infinite; flex-shrink:0; }

/* Heart / Favourite */
.acvip-fav-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 30px; height: 30px; border: none; cursor: pointer;
  background: rgba(0,0,0,.4); border-radius: 50%; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
  backdrop-filter: blur(4px);
}
.acvip-fav-btn svg { width: 16px; height: 16px; color: rgba(255,255,255,.7); transition: color .2s, fill .2s; }
.acvip-fav-btn:hover { transform: scale(1.15); background: rgba(0,0,0,.6); }
.acvip-fav-btn.is-fav svg { fill: #ef4444; color: #ef4444; }
.acvip-fav-btn.pop { animation: acvip-fav-pop .3s ease; }
@keyframes acvip-fav-pop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* Game name row */
.acvip-game-info {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.acvip-game-name  { font-size: .78rem; font-weight: 700; color: #fff; line-height: 1.3; }
.acvip-game-price { font-size: .7rem; color: #ffd700; font-weight: 600; }

/* See-more button */
.acvip-more-btn-wrap { text-align:center; margin-top:16px; }
.acvip-btn-see-more {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2); border-radius: 30px;
  padding: 9px 32px; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s; backdrop-filter:blur(4px);
}
.acvip-btn-see-more:hover { background:rgba(255,255,255,.15); color:#fff; }

/* Provider filter dropdown */
.acvip-provider-filter { position: relative; }
.acvip-pf-btn {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: 6px 14px; font-size: .8rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .2s;
}
.acvip-pf-btn:hover, .acvip-pf-btn.active { background: var(--acvip-accent); border-color:var(--acvip-accent); color:#fff; }
.acvip-pf-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: #1a2044; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 6px; min-width: 180px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  display: none;
}
.acvip-provider-filter.open .acvip-pf-dropdown { display: block; animation: acvip-slide-up .18s ease; }
.acvip-pf-option {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: rgba(255,255,255,.7);
  padding: 7px 12px; border-radius: 6px; font-size: .82rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.acvip-pf-option:hover, .acvip-pf-option.active { background: var(--acvip-accent); color: #fff; }

/* ============================================================
   PARTNERS BAR  [acvip_partners]
   ============================================================ */
.acvip-partners-bar {
  display: flex; align-items: center; gap: 0;
  background: #0d1230;
  border-radius: 12px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin-bottom: 20px;
}
.acvip-partners-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 130px; padding: 14px 16px; gap: 4px;
  background: linear-gradient(135deg,#1a2878,#0d1560);
  border-right: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.acvip-partners-label-icon { font-size: 1.5rem; }
.acvip-partners-label-text { color: rgba(255,255,255,.75); font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.3; }
.acvip-partners-logos { flex: 1; overflow: hidden; position: relative; height: 60px; }
.acvip-partners-logos::before,
.acvip-partners-logos::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none;
}
.acvip-partners-logos::before { left: 0;  background: linear-gradient(90deg, #0d1230, transparent); }
.acvip-partners-logos::after  { right: 0; background: linear-gradient(-90deg, #0d1230, transparent); }
.acvip-partners-track {
  display: flex; align-items: center; gap: 32px; height: 100%;
  animation: acvip-scroll-logos 28s linear infinite;
  white-space: nowrap; padding: 0 20px;
}
.acvip-partners-bar:hover .acvip-partners-track { animation-play-state: paused; }
@keyframes acvip-scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.acvip-partner-item {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-decoration: none; transition: opacity .2s;
  min-width: 80px;
}
.acvip-partner-item:hover { opacity: .75; }
.acvip-partner-item img { height: 24px; max-width: 100px; object-fit: contain; filter: brightness(0) invert(1); opacity: .6; transition: opacity .2s; }
.acvip-partner-item:hover img { opacity: 1; }
.acvip-partner-name { color: rgba(255,255,255,.5); font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }

/* ============================================================
   SHARED ANIMATIONS
   ============================================================ */
@keyframes acvip-pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes acvip-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes acvip-shimmer  { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .acvip-game-grid { --acvip-game-cols: 4; }
}
@media (max-width: 1024px) {
  .acvip-grid { --acvip-cols: 3; }
  .acvip-card.acvip-featured { grid-row: span 1; min-height:160px; }
  .acvip-game-grid { --acvip-game-cols: 4; }
}
@media (max-width: 768px) {
  .acvip-grid { --acvip-cols: 2; gap:10px; }
  .acvip-game-grid { --acvip-game-cols: 3; gap:8px; }
  .acvip-casino-block, .acvip-games-block { padding:16px 12px 20px; }
  .acvip-partners-label { min-width: 90px; padding: 10px; }
  .acvip-partners-label-text { font-size:.65rem; }
}
@media (max-width: 480px) {
  .acvip-grid { --acvip-cols: 2; gap:8px; }
  .acvip-game-grid { --acvip-game-cols: 2; gap:8px; }
  .acvip-card { min-height:95px; }
  .acvip-games-header { flex-direction:column; align-items:flex-start; }
  .acvip-partners-bar { flex-direction:column; height:auto; }
  .acvip-partners-label { width:100%; flex-direction:row; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .acvip-partners-logos { width:100%; }
}