/* ======================================= */
/* SAFE GLOBAL TRANSITIONS                 */
/* ======================================= */

body,
button,
a,
.card,
.nav-link,
.modal-content {

  transition: background-color .25s ease,
              color .25s ease,
              box-shadow .25s ease,
              transform .25s ease;

}


/* ======================================= */
/* TAB STYLING (SCOPED SAFE)               */
/* ======================================= */

.app-tabs .nav-pills {

  background: rgba(25,135,84,0.08);
  padding: 6px;
  border-radius: 30px;

}

.app-tabs .nav-pills .nav-link {

  background-color: var(--bs-success);
  color: #fff;

  border-radius: 25px;
  font-weight: 500;
  margin: 2px;

  transform: scale(0.96);

  transition: all .3s ease;

}

.app-tabs .nav-pills .nav-link:hover {

  filter: brightness(1.1);
  transform: translateY(-1px);

}

.app-tabs .nav-pills .nav-link.active {

  background-color: var(--bs-primary) !important;
  color: #fff !important;

  transform: scale(1.05);

  box-shadow: 0 6px 14px rgba(13,110,253,0.35);

}

.app-tabs .nav-pills .nav-link:active {
  transform: scale(0.96);
}


/* ======================================= */
/* MOBILE TAB LAYOUT                       */
/* ======================================= */

@media (max-width:576px){

  .app-tabs .nav-pills{
    gap:8px;
  }

  .app-tabs .nav-item{
    flex:1;
  }

  .app-tabs .nav-link{
    font-size:.9rem;
    padding:10px 8px;
    border-radius:20px;
  }

  .app-tabs .nav-link i{
    display:block;
    font-size:1.1rem;
    margin-bottom:2px;
  }

}


/* ======================================= */
/* SWEETALERT MODAL STYLE                  */
/* ======================================= */

.swal2-popup{
  border-radius:14px;
  animation:modalPop .35s ease;
}

.swal2-title{
  font-weight:600;
}

.swal2-popup .swal2-confirm{
  border-radius:999px !important;
  padding:10px 26px !important;
  font-weight:600;
}


/* ======================================= */
/* SWEETALERT ANIMATION                    */
/* ======================================= */

@keyframes modalPop{

  from{
    transform:scale(.9);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }

}


/* ======================================= */
/* DARK MODE SWEETALERT                    */
/* ======================================= */

[data-bs-theme="dark"] .swal2-popup{

  background:#1f2937;
  color:#f3f4f6;

  box-shadow:0 15px 40px rgba(0,0,0,.6);

}

[data-bs-theme="dark"] .swal2-title{
  color:#fff;
}

[data-bs-theme="dark"] .swal2-html-container{
  color:#d1d5db;
}

[data-bs-theme="dark"] .swal2-confirm{
  background-color:var(--bs-success) !important;
}


/* ======================================= */
/* AI NUMBER BADGES                        */
/* ======================================= */

.ai-results{

  display:flex;
  flex-wrap:wrap;

  gap:10px;

  justify-content:center;
  margin-top:10px;

}

.ai-number{

  background:rgba(25,135,84,.15);

  border:1px solid rgba(25,135,84,.35);

  padding:8px 14px;

  border-radius:10px;

  font-weight:600;
  font-size:1.1rem;

}

[data-bs-theme="dark"] .ai-number{

  background:rgba(25,135,84,.25);
  border-color:rgba(25,135,84,.5);

}


/* ======================================= */
/* MODAL POLISH                            */
/* ======================================= */

.modal-content{
  border-radius:12px;
}

.modal-header{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.modal-footer{
  border-top:1px solid rgba(0,0,0,.08);
}


/* ======================================= */
/* PRICING CARDS                           */
/* ======================================= */

.pricing-card{
  transition:all .35s ease;
}

.pricing-card:hover{

  transform:translateY(-6px) scale(1.02);
  box-shadow:0 10px 28px rgba(0,0,0,.18);

}


/* ======================================= */
/* QR DISPLAY                              */
/* ======================================= */

.qr-box{

  padding:14px;

  background:#fff;

  border-radius:12px;

  display:inline-block;

  box-shadow:0 6px 18px rgba(0,0,0,.12);

}

.qr-box img{

  max-width:340px;   /* bigger QR */
  width:100%;
  height:auto;

}
@media (max-width:576px){

.qr-box img{
  max-width:260px;
}

}

[data-bs-theme="dark"] .qr-box{
  background:#1f2937;
}


/* ======================================= */
/* SWEETALERT DARK HELPER CLASS            */
/* ======================================= */

.swal-dark{
  background:#1f2937 !important;
  color:#f3f4f6 !important;
}

.swal-dark .swal2-title{
  color:#fff;
}

.swal-dark .swal2-html-container{
  color:#d1d5db;
}


/* ======================================= */
/* THEME TOGGLE ICON COLORS                */
/* ======================================= */

#themeToggle i {
  transition: color .3s ease, transform .3s ease;
}

.bi-moon-stars-fill {
  color: #ffc107;
}

.bi-sun-fill {
  color: #ffc107;
}

#themeToggle:hover i {
  color: #ffdd57;
  transform: rotate(20deg);
}


/* ======================================= */
/* NAVBAR MENU HOVER (FIXED)               */
/* ======================================= */

.navbar-nav .nav-link {

  display:inline-flex;
  align-items:center;
  gap:6px;

  width:auto !important;

  padding:6px 12px;

  border-radius:6px;

  transition:background-color .25s ease, color .25s ease;

  color:#ffffff !important;   /* bright white */

}
.navbar-nav .nav-link i{
opacity:.9;
}

.navbar-nav .nav-link:hover{

  background-color:#ffc107;
  color:#000 !important;

}

.navbar-nav .nav-link.active{

  background-color:#ffc107;
  color:#000 !important;

}


/* ======================================= */
/* MOBILE NAVBAR FIX                       */
/* ======================================= */

@media (max-width:991px){

  .navbar-nav .nav-link{

    display:inline-flex;
    width:auto !important;

  }

}


/* ======================================= */
/* PAYMENT QR CARD                         */
/* ======================================= */

.payment-card{

max-width:520px;

margin:auto;

padding:28px 22px;

border-radius:14px;

background:var(--bs-body-bg);

border:1px solid var(--bs-border-color);

box-shadow:0 8px 25px rgba(0,0,0,.06);

}


/* WARNING */

.payment-warning{

background:rgba(255,193,7,.12);

border-radius:8px;

padding:10px 12px;

color:var(--bs-body-color);

}


/* DARK MODE IMPROVEMENT */

[data-bs-theme="dark"] .payment-card{

background:#1e242b;

border-color:#2c343c;

box-shadow:0 8px 25px rgba(0,0,0,.45);

}

[data-bs-theme="dark"] .payment-warning{

background:rgba(255,193,7,.15);

}


/* MOBILE IMPROVEMENT */

@media (max-width:576px){

.payment-card{

padding:22px 16px;

}

.qr-box img{

max-width:220px;

}

}

/* ======================================= */
/* PREMIUM UI MICRO INTERACTIONS           */
/* ======================================= */

.card,
.pricing-card,
.payment-card,
.modal-content {

  transition: transform .25s ease,
              box-shadow .25s ease;

}

.card:hover,
.pricing-card:hover,
.payment-card:hover {

  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);

}


/* DARK MODE SHADOW */

[data-bs-theme="dark"] .card:hover,
[data-bs-theme="dark"] .pricing-card:hover,
[data-bs-theme="dark"] .payment-card:hover {

  box-shadow: 0 14px 36px rgba(0,0,0,.6);

}

/* ======================================= */
/* NAVBAR TYPOGRAPHY SCALE                 */
/* ======================================= */

.navbar-brand{

  font-size:1.45rem;
  font-weight:700;

  display:flex;
  align-items:center;
  gap:8px;

}

.navbar-brand img{

  height:42px;
  width:auto;

}

.navbar-nav .nav-link{

  font-size:1.15rem;
  font-weight:500;

}

.navbar .dropdown-toggle{

  font-size:1.15rem;
  font-weight:500;

}

/* Default (light mode) */
.logout-link {
    color: #ffd7db !important; /* pale red */
}

/* Dark mode */
[data-bs-theme="dark"] .logout-link {
  color: #ffd7db !important; /* pale red */
}

/* Hover for both modes */
.logout-link:hover {
    background-color: #ffd60a !important; /* yellow */
    color: #000000 !important; /* black text */
}