/* Custom overrides extracted from index.php */
/* Keep only small overrides here; use templatemo-glossy-touch.css for main styling */
.btn-login-nav{ border:1px solid rgba(255,255,255,.4); color:#fff; background: rgba(0,0,0,.35); border-radius:10px; padding:6px 14px; }
.btn-login-nav:hover{ background:#0f1115; }
.navbar.topbar{ background:#24004D; border-bottom:1px solid rgba(255,255,255,.12); position:relative; z-index: 2000; }
.navbar .nav-link{ color: rgba(255,255,255,.9); }
.navbar .nav-link:hover{ color:#fff; }
.navbar .dropdown-menu{ z-index: 2050; }
/* Fallback visibility for dropdown (in case Bootstrap CSS rule is missing) */
.dropdown-menu { display: none; }
.dropdown-menu.show { display: block; }
/* Login dropdown theme: neutral gray */
#loginDropdown .dropdown-menu{
  background: #2b2f36; /* neutral dark gray */
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
#loginDropdown .dropdown-menu label{ color:#e5e7eb; }
#loginDropdown .dropdown-menu .form-control{ background:#1f242b; border-color:#3a434f; color:#fff; }
#loginDropdown .dropdown-menu .form-control::placeholder{ color:#b8c0ca; }
#loginDropdown .dropdown-menu .alert{ background:#3a3f46; color:#f0f2f5; border-color:#515761; }
#loginDropdown .dropdown-menu a{ color:#cbd5e1; }
#loginDropdown .dropdown-menu a:hover{ color:#e5e7eb; text-decoration: underline; }
/* Gray button for login submit */
#loginDropdown .dropdown-menu .btn-primary{
  background-color:#4b5563; /* gray */
  border-color:#4b5563;
}
#loginDropdown .dropdown-menu .btn-primary:hover{
  background-color:#374151; /* darker gray */
  border-color:#374151;
}
.hero .title{ color:#fff; }
.hero .subtitle{ color: rgba(255,255,255,.9); }
.modal-content{ background:#0f1115 !important; color:#fff; border:1px solid #1f2937; }
.modal-header, .modal-body { background:#0f1115 !important; }
.input-flat { background:#1d2127 !important; border: 1px solid #2c323a !important; color:#fff; }
.input-flat:focus { background:#232a32 !important; border-color:#3a424d !important; box-shadow:none; }
.form-control::placeholder { color:#a9b0b8; opacity:1; }
.modal-backdrop.show { opacity: .85; }
/* Brand text: white + animated glow */
.navbar-brand { color:#fff !important; }
.navbar-brand .brand-text { color:#fff !important; font-weight:800; letter-spacing:.5px; white-space:nowrap; text-shadow: 0 0 6px rgba(255,255,255,.25); animation: brandGlow 2.6s ease-in-out infinite; }
@keyframes brandGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,.25), 0 0 0 rgba(255,255,255,0); }
  50% { text-shadow: 0 0 10px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.25); }
}
/* About section (match backup/index.php look & feel) */
.about-section{ max-width:1100px; margin:20px auto; }
.about-hero h3{ color:#fff; font-weight:800; text-align:center; letter-spacing:.3px; }
.about-grid{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; justify-content:center; }
.about-card{ background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,.25); width:320px; max-width:100%; }
.about-card-standalone{ margin-top:16px; padding:0; }
/* Keep standalone card (GAME SOURCE CODES SELLER) full-width like original */
.about-card.about-card-standalone{ width:100%; max-width:none; }
.about-card-link{ display:flex; flex-direction:column; align-items:center; text-decoration:none; padding:18px; color:#e5e7eb; width:100%; }
.about-card-icon{ font-size:26px; margin-bottom:8px; }
.about-card h4{ color:#fff; font-weight:800; margin:4px 0 6px; text-align:center; }
.about-card p{ color:#cbd5e1; margin:0; text-align:center; font-size:14px; }
@media (max-width: 575.98px){ .about-card{ width:260px; } }
/* Center SweetAlert modal perfectly */
.swal-overlay{ display:flex !important; align-items:center !important; justify-content:center !important; }
.swal-modal{ margin:0 !important; }
/* Chatbox styles */
.cbx-card{ background:#0f1115; border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.25); margin:14px auto 24px; max-width:980px; }
.cbx-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; color:#fff; font-weight:800; border-bottom:1px solid rgba(255,255,255,.08); }
.cbx-tools i{ color:#a3b0c2; margin-left:10px; }
.cbx-body{ background:#121722; color:#e5e7eb; height:320px; overflow:auto; padding:8px 10px; }
.cbx-msg{ display:flex; align-items:flex-start; gap:10px; padding:6px 4px; }
.cbx-avatar{ width:28px; height:28px; border-radius:6px; background:#1f2937; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; border:1px solid rgba(255,255,255,.12); }
.cbx-user{ color:#9ecbff; font-weight:800; margin-right:6px; }
.cbx-text{ color:#e5e7eb; word-break: break-word; }
.cbx-foot{ display:flex; align-items:center; gap:8px; padding:8px; border-top:1px solid rgba(255,255,255,.08); background:#0e1622; border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.cbx-input{ flex:1 1 auto; background:#17202b; color:#fff; border:1px solid #233146; border-radius:10px; padding:8px 10px; }
.cbx-btn{ background:#1e90ff; color:#fff; border:none; padding:8px 14px; border-radius:10px; font-weight:800; }
.cbx-muted{ color:#cbd5e1; padding:10px 14px; }
/* Products slider */
.product-slider{ overflow:hidden; position:relative; }
.slider-track{ display:flex; gap:16px; width:max-content; will-change: transform; animation: scrollLeft 28s linear infinite; }
.product-link{ display:block; color:inherit; text-decoration:none; }
.product-card{ width:260px; max-width:260px; }
.product-card img{ width:100%; height:220px; object-fit:contain; background:#0f1115; border-radius:8px; padding:8px; border:1px solid rgba(255,255,255,.08); }
.product-slider:hover .slider-track{ animation-play-state: paused; }
/* Seamless leftward loop: duplicate items and move from 0 to -50% */
@keyframes scrollLeft{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 575.98px){ .product-card{ width:220px; max-width:220px; } .product-card img{ height:180px; } }
/* Forum preview */
.fp-wrapper { background:#1c232e; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.fp-header { background: linear-gradient(90deg, #ff6a3d, #ff2e7e, #7c3aed); color:#fff; padding:10px 14px; font-weight:800; letter-spacing:.3px; }
.fp-table { width:100%; border-collapse:collapse; }
.fp-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.06); color:#d6d9df; }
.fp-row:hover { background:#202938; }
.fp-col-title { flex: 1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; }
.fp-col-title .fp-icon { width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#a7b1be; }
.fp-title { color:#fff; font-weight:800; margin:0; }
.fp-meta { font-size:12px; opacity:.9; }
.fp-col-count { width:80px; text-align:center; color:#cbd5e1; font-weight:700; }
.fp-col-last { width:260px; display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.fp-avatar { width:28px; height:28px; border-radius:50%; background:#2f3948; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:900; border:1px solid rgba(255,255,255,.15); }
.fp-lastmeta { display:flex; flex-direction:column; text-align:right; line-height:1.15; }
.fp-lastmeta .who { color:#9ecb71; font-size:12px; font-weight:800; }
.fp-lastmeta .when { color:#94a3b8; font-size:12px; }
@media (max-width: 768px){ .fp-col-last{ width:160px;} .fp-col-count{ width:60px;} }
/* Blogger preview */
.bp-wrapper { background:#1c232e; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.bp-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background: linear-gradient(90deg, #1e90ff, #7c3aed); color:#fff; font-weight:800; letter-spacing:.3px; }
.bp-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; padding:14px; }
.bp-card { background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px; color:#d6d9df; height:100%; display:flex; flex-direction:column; }
.bp-title { color:#fff; font-weight:800; margin:0 0 6px; text-decoration:none; }
.bp-meta { font-size:12px; color:#94a3b8; margin-bottom:8px; }
.bp-link { margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:#9ecbff; text-decoration:none; }
.bp-empty { padding:14px; color:#cbd5e1; }
/* Reviews section */
.rv-wrapper{ background:#1c232e; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.rv-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background: linear-gradient(90deg, #0ea5e9, #7c3aed); color:#fff; font-weight:800; letter-spacing:.3px; }
.rv-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; padding:14px; }
.rv-card{ background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px; color:#d6d9df; }
.rv-user{ color:#fff; font-weight:800; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.rv-star{ color:#fbbf24; }
.rv-text{ margin:0; color:#cbd5e1; white-space:pre-wrap; }
.rv-form{ padding:14px; border-top:1px solid rgba(255,255,255,.08); background:#0e1622; }
.rv-form .form-control{ background:#17202b; color:#fff; border-color:#233146; }
.rv-form .form-control::placeholder{ color:#9aa6b2; }
/* Stats */
.stats-wrapper{ background:#1c232e; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.stats-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background: linear-gradient(90deg, #0ea5e9, #7c3aed); color:#fff; font-weight:800; letter-spacing:.3px; }
.stats-title{ font-weight:800; color:#fff; }
.stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; padding:14px; }
.stat-card{ background:#0f1115; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:20px 16px; color:#d6d9df; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.stat-icon{ width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#1f2937; color:#fbbf24; font-size:26px; border:1px solid rgba(255,255,255,.12); margin-bottom:8px; }
.stat-number{ font-size:32px; font-weight:800; color:#f59e0b; line-height:1; }
.stat-label{ margin-top:6px; color:#cbd5e1; font-weight:600; }
@media (max-width: 768px){ .stats-grid{ grid-template-columns: 1fr; }
}

/* Mobile navigation: center items and keep dropdowns usable */
@media (max-width: 991.98px){
  /* Ensure collapsed area centers content ONLY when open/animating */
  .navbar .navbar-collapse.show,
  .navbar .navbar-collapse.collapsing{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; }
  /* Center nav list (both index topbar and header include) */
  .navbar .navbar-nav{ width:100%; flex-direction:column; align-items:center; justify-content:center; }
  /* Center each link text */
  .navbar .navbar-nav .nav-link{ text-align:center; }
  /* Keep dropdown items readable and centered */
  .navbar .dropdown-menu{ text-align:center; }
  /* Avoid right group pushing off-canvas on mobile */
  .navbar .ml-lg-auto,
  .navbar .ml-auto{ margin-left:0 !important; }
  /* Center brand and logo */
  .navbar .navbar-brand{ margin-left:auto; margin-right:auto; text-align:center; }
  .navbar .navbar-brand img{ display:block; margin:0 auto; }
  /* Center the login dropdown block */
  #loginDropdown{ width:100%; display:flex; justify-content:center; margin-top:8px; }
  /* Center its dropdown menu */
  #loginDropdown .dropdown-menu{ left:50% !important; right:auto !important; transform: translateX(-50%); }
}

/* Admin product form: shift file label text 20% to the left (keep Browse button on right) */
#product-form .custom-file-label {
  padding-right: 20% !important; /* visually shifts centered text left */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}