/* =========================================================
   Ali Pay BD — Site-wide UI/UX + Performance Boost
   Loaded on every layout (public, user, admin, auth).
   Upgrades existing Bootstrap buttons/icons/cards sitewide
   without needing to edit every single view file.
   ========================================================= */

:root{
  --ub-primary: #6777ef;
  --ub-primary-2: #8e9bff;
  --ub-accent: #25d366;
  --ub-radius: 12px;
  --ub-shadow: 0 8px 20px -6px rgba(103,119,239,.35);
  --ub-ease: cubic-bezier(.22,1,.36,1);
}

*{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Top loading progress bar (perceived speed) ---------- */
#ub-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--ub-accent), var(--ub-primary));
  z-index: 999999; transition: width .25s var(--ub-ease), opacity .3s ease;
  box-shadow: 0 0 8px rgba(103,119,239,.6);
}
#ub-progress.ub-done{ opacity: 0; }

/* ---------- Global button polish (Bootstrap .btn used everywhere) ---------- */
.btn{
  position: relative;
  overflow: hidden;
  border-radius: var(--ub-radius);
  transition: transform .18s var(--ub-ease), box-shadow .18s var(--ub-ease), filter .18s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0) scale(.97); }
.btn:focus-visible{ outline: 2px solid var(--ub-primary); outline-offset: 2px; }
.btn-primary, .btn-success, .btn-info, .btn-danger, .btn-warning{
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.25);
}

/* ripple */
.ub-ripple{
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55);
  transform: scale(0); animation: ub-ripple-anim .55s ease-out forwards;
}
@keyframes ub-ripple-anim{ to{ transform: scale(2.6); opacity: 0; } }

/* ---------- Icon buttons (circular, used for actions/social/nav) ---------- */
.icon-btn, .ub-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ub-primary), var(--ub-primary-2));
  color: #fff !important; border: none; text-decoration: none !important;
  box-shadow: 0 6px 14px -4px rgba(103,119,239,.55);
  transition: transform .22s var(--ub-ease), box-shadow .22s ease;
}
.icon-btn:hover, .ub-icon-btn:hover{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 22px -6px rgba(103,119,239,.65);
  color: #fff;
}
.icon-btn i, .ub-icon-btn i{ transition: transform .22s ease; }
.icon-btn:hover i, .ub-icon-btn:hover i{ transform: scale(1.12); }

/* icons inside nav/menu links get a subtle lift on hover */
.nav-link i, .dropdown-item i, .sidebar-menu a i, .navbar a i{
  transition: transform .2s var(--ub-ease);
}
.nav-link:hover i, .dropdown-item:hover i, .sidebar-menu a:hover i{
  transform: translateX(2px) scale(1.08);
}

/* ---------- Card lift + smooth entrance ---------- */
.card, .stat-card, .box{
  transition: transform .25s var(--ub-ease), box-shadow .25s var(--ub-ease);
}
.card:hover{
  box-shadow: 0 14px 28px -12px rgba(20,20,43,.18);
}

/* reveal-on-scroll (driven by ui-boost.js IntersectionObserver) */
.ub-reveal{ opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ub-ease), transform .5s var(--ub-ease); }
.ub-reveal.ub-in{ opacity: 1; transform: translateY(0); }

/* ---------- Image lazy-load fade-in ---------- */
img[loading="lazy"]{ transition: opacity .35s ease; }
img.ub-img-loading{ opacity: 0; }
img.ub-img-loaded{ opacity: 1; }

/* ---------- Skeleton shimmer (use while data loads via ajax) ---------- */
.ub-skeleton{
  position: relative; overflow: hidden; background: #eef0f7; border-radius: 8px; color: transparent !important;
}
.ub-skeleton::after{
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: ub-shimmer 1.3s infinite;
}
@keyframes ub-shimmer{ 100%{ transform: translateX(100%); } }

/* ---------- Sidebar: native scroll (niceScroll plugin removed from
   scripts.js - it was forcing 60 reflows per submenu click). Covers both
   the user and admin panels since this file loads on both layouts. ---------- */
.main-sidebar{
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(74,108,247,.35) transparent;
}
.main-sidebar::-webkit-scrollbar{ width: 6px; }
.main-sidebar::-webkit-scrollbar-track{ background: transparent; }
.main-sidebar::-webkit-scrollbar-thumb{ background: rgba(74,108,247,.3); border-radius: 10px; }
.main-sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(74,108,247,.5); }
.main-sidebar #sidebar-wrapper{ padding-right: 8px; margin-right: -8px; box-sizing: border-box; }

/* Reserve space for feather icons so they don't pop in / shift layout
   once feather.replace() swaps them for inline SVGs after page load. */
[data-feather]{ width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

/* ---------- Buttons w/ icon spacing helper ---------- */
.btn i + span, .btn span + i, .btn i{ vertical-align: middle; }
.btn i:first-child:not(:last-child){ margin-right: 6px; }
.btn i:last-child:not(:first-child){ margin-left: 6px; }