/* static/css/user/base.css */

:root {
  --primary-color: #4a90e2;
  --primary-hover: #357ABD; 
  --gradient-1: #4a90e2;
  --gradient-2: #526cd0;
  --bg-dark: #0B1120;
  --bg-glass: rgba(19, 30, 58, 0.5);
  --bg-glass-light: rgba(255, 255, 255, 0.05);
  --border-glass: rgba(255, 255, 255, 0.1);
  --text-light: #f1f5f9;
  --text-muted: #cbd5e1; 
  --border-radius-lg: 0.75rem;
  --border-radius-md: 0.5rem;
  --font-body: 'Inter', 'Vazirmatn', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  direction: rtl;
  padding-top: 80px; /* Spacer for fixed navbar */
  min-height: 100vh;
  overflow-x: hidden;
}

.main-content {
  padding-bottom: 80px; /* Spacer for footer */
  position: relative;
  /* z-index was removed to fix modal bug */
}

/* --- Animated Gradient BG --- */
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  z-index: -1; 
  background: radial-gradient(at 20% 20%, #4a90e2 0%, transparent 25%),
              radial-gradient(at 80% 20%, #526cd0 0%, transparent 25%),
              radial-gradient(at 20% 80%, #3a50a0 0%, transparent 25%),
              radial-gradient(at 80% 80%, #4a90e2 0%, transparent 25%);
  animation: gradient-move 20s ease infinite;
}

@keyframes gradient-move {
  0%   { transform: translate(-25%, -25%); }
  50%  { transform: translate(0%, 0%); }
  100% { transform: translate(-25%, -25%); }
}

/* ================================
   NEW NAVBAR STYLES
================================ */
.main-navbar.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-glass);
  padding: 0.75rem 0;
}

.navbar-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* 1. Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-light) !important;
  transition: color 0.3s ease;
  padding: 0;
}
.navbar-brand:hover {
  color: var(--primary-color) !important;
}

.navbar-logo {
  height: 32px; /* Adjust height as needed (28px - 40px is standard) */
  width: auto;  /* Maintains aspect ratio */
  object-fit: contain;
  display: block;
}

.navbar-brand:hover .navbar-logo {
  filter: brightness(1.2); /* Makes the logo slightly brighter on hover */
  transition: filter 0.3s ease;
}

.navbar-logo-masked {
    width: 28px; /* Adjust size as needed (the old icon was approx 24px) */
    height: 28px;
    display: inline-block;

    /* MAGIC PART 1: Set the background color to the current text color.
       This allows it to turn blue automatically on hover. */
    background-color: currentColor;

    /* MAGIC PART 2: Use the SVG as a mask to cut out the shape */
    -webkit-mask-image: var(--logo-url);
    mask-image: var(--logo-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-position: center;
}

/* 2. Mobile Toggler */
.navbar-toggler {
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
}
.navbar-toggler:focus {
  box-shadow: 0 0 5px var(--primary-color);
}
.navbar-toggler i {
  color: var(--text-light);
  font-size: 1.25rem;
}

/* 3. Collapsible Area (for mobile) */
.navbar-collapse {
  transition: all 0.3s ease-in-out;
}

.nav-item {
  margin: 0 0.25rem;
}

.nav-link {
  color: var(--text-muted) !important;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


.nav-link i {
  width: 16px; /* Ensures icons are aligned */
  text-align: center;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-light) !important;
  background-color: var(--bg-glass-light);
}

/* 3b. User Actions (Right Side) */
.navbar-user-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* DYNAMIC WALLET STYLES 
*/
.wallet-display {
  display: flex;
  align-items: center;
  background-color: var(--bg-glass-light);
  border: 1px solid var(--border-glass);
  border-radius: 50px; /* Pill shape */
  padding: 0.4rem 0.75rem;
  color: var(--text-light);
  transition: all 0.4s ease;
  overflow: hidden; /* Important for animation */
  cursor: pointer;
}
.wallet-display:hover {
  background-color: var(--bg-glass); /* Darken on hover */
}
.wallet-display i.fa-wallet {
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: all 0.4s ease;
}
.wallet-display:hover i.fa-wallet {
  color: var(--primary-color); /* Highlight icon on hover */
}

/* Hide text and button by default */
.wallet-display span,
.wallet-display .btn-charge {
  opacity: 0;
  max-width: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  white-space: nowrap;
  overflow: hidden;
}
.wallet-display span {
  font-weight: 600;
  font-size: 0.95rem;
}
.wallet-display small {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.btn-charge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Prevent button from shrinking */
}
.btn-charge:hover {
  background-color: var(--primary-hover);
  transform: scale(1.1);
}

/* Show text and button on hover */
.wallet-display:hover span,
.wallet-display:hover .btn-charge {
  opacity: 1;
  max-width: 150px; /* Allow them to expand */
  visibility: visible;
  margin-right: 0.5rem; /* Add spacing when visible */
}
/* Ensure button width is fixed */
.wallet-display:hover .btn-charge {
  max-width: 24px; 
}


/* Profile Dropdown */
.profile-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}
.profile-dropdown-toggle::after {
  display: none !important; /* Hide Bootstrap's default caret */
}
.profile-dropdown-toggle i.fa-chevron-down {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}
.profile-dropdown-toggle:hover i.fa-chevron-down {
  transform: translateY(2px);
}
.profile-dropdown-toggle .profile-name-nav {
  color: var(--text-light);
  font-weight: 500;
}

.profile-avatar-nav,
.profile-avatar-fallback-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-glass);
}
.profile-avatar-fallback-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-glass-light);
  color: var(--text-muted);
  font-size: 1rem;
}

/* Glass Dropdown Menu */
.dropdown-menu-glass {
  background: #1e293b; /* Darker, less transparent */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  margin-top: 0.75rem !important;
}
.dropdown-item {
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius-md);
  transition: all 0.3s ease;
  display: flex; 
  align-items: center; 
}
.dropdown-item i {
  font-size: 0.9rem;
  margin-left: 0.75rem;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
  transition: all 0.3s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text-light);
  background-color: var(--primary-color);
}
.dropdown-item:hover i,
.dropdown-item:focus i {
  color: var(--text-light);
}

.dropdown-divider {
  border-top: 1px solid var(--border-glass);
}

.dropdown-item-danger {
  color: #f87171;
}
.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
  background-color: #dc3545;
  color: #fff;
}
.dropdown-item-danger i {
  color: #f87171;
}
.dropdown-item-danger:hover i,
.dropdown-item-danger:focus i {
  color: #fff;
}

/* Logged-out Button */
.btn-login-nav {
  background-color: var(--primary-color);
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-login-nav:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
}


/* ================================
    MOBILE BOTTOM NAV STYLES
================================ */
.mobile-bottom-nav {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Standard height for bottom nav */
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-glass);
    z-index: 1000;
    
    /* For the links inside */
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start; /* Align to top of bar */
    padding-top: 10px; /* Give some space from the top edge */
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.75rem; /* Smaller text for icons */
    font-weight: 500;
    transition: color 0.3s ease;
    flex-basis: 20%; /* Evenly space 4-5 items */
    text-align: center;
}

.mobile-nav-link i {
    font-size: 1.25rem; /* Larger icon */
    width: 24px; /* Fixed width */
    height: 24px; /* Fixed height */
    line-height: 24px; /* Center icon */
}

.mobile-nav-link:hover,
.mobile-nav-link.active { /* Add 'active' class support */
    color: var(--text-light);
}

/* Style for the Avatar in Bottom Nav */
.profile-avatar-bottom-nav {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-glass);
}

/* ================================
    NAVBAR RESPONSIVENESS
================================ */
@media (max-width: 991.98px) {
    
    /* 1. HIDE the original top navbar */
    .main-navbar.navbar {
        display: none;
    }
    
    /* 2. SHOW the new bottom navbar */
    .mobile-bottom-nav {
        display: flex;
    }
    
    /* 3. HIDE the original footer */
    /* This assumes your footer is a <footer> tag */
    footer {
        display: none;
    }

    /*
     * 3b. HIDE THE NEW FLOATING FOOTER
     */
    .floating-footer-fab {
        display: none;
    }

    /* 4. Adjust body/main padding */
    body {
        padding-top: 0; /* Remove top space from old navbar */
    }
    
    .main-content {
        /* Add padding for the new 70px bottom nav */
        /* and remove the original 80px footer padding */
        padding-bottom: 90px; /* 70px for nav + 20px extra space */
    }
}


/* ================================
   EXISTING TOAST STYLES
================================ */
.toast-container {
  z-index: 1100 !important;
}
.toast {
  background-color: #1e293b; /* Darker glass */
  color: var(--text-light);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-md);
  border-right-width: 4px; /* RTL */
}
.toast-header {
  color: var(--text-light);
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-glass);
}
.toast.border-success { border-right-color: #34d399; }
.toast.border-danger  { border-right-color: #f87171; }
.toast.border-warning { border-right-color: #fbbf24; }
.toast.border-info    { border-right-color: #60a5fa; }
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}




/* ================================
   INPUT PLACEHOLDER STYLING
================================ */
::placeholder {
  color: rgba(241, 245, 249, 0.642) !important; /* Brighter than text-muted (#cbd5e1) */
  opacity: 1; /* Ensures full visibility */
}

input::placeholder,
textarea::placeholder {
  color: rgba(241, 245, 249, 0.8);
  opacity: 1;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: rgba(255, 255, 255, 0.9); /* Even brighter on focus */
}




/* ================================
   STYLISH ALERT STYLES (v2)
================================ */
/* (Add this to the end of base.css) */

/* 1. Define the pulse animation */
@keyframes pulse-red-glow {
  0% {
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3), 0 0 5px rgba(220, 53, 69, 0.2) inset;
  }
  50% {
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.6), 0 0 10px rgba(220, 53, 69, 0.4) inset;
  }
  100% {
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3), 0 0 5px rgba(220, 53, 69, 0.2) inset;
  }
}

/* 2. Style for the Alert Box */
.alert-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--border-radius-md);
  color: var(--text-light);
  margin-top: 1.5rem; /* Add spacing */
  /* Remove padding-right, as the button is no longer in the corner */
}

/* 3. Animated "Glow" for different alerts */
.alert-glass-animated.alert-danger {
  color: #f87171;
  border-left-color: #dc3545 !important;
  border-left-width: 4px;
  /* Apply the animation */
  animation: pulse-red-glow 2.5s infinite;
}
.alert-glass.alert-info {
  border-left-color: var(--primary-color) !important; 
  border-left-width: 4px;
}
.alert-glass.alert-primary {
  color: #60a5fa;
  border-left-color: #0d6efd !important;
  border-left-width: 4px;
}

/* 4. New Button Group */
.alert-button-group {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Space between the buttons */
  flex-shrink: 0; /* Prevent buttons from wrapping */
}

/* 5. New Animated "Pay Debt" Button */
.btn-alert-pulse {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #f87171, #dc3545);
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
  transition: all 0.3s ease;
  animation: pulse-red-glow 2.5s infinite 0.5s; /* 0.5s delay */
  white-space: nowrap; /* Prevent text wrapping */
}
.btn-alert-pulse:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}
.btn-alert-pulse i {
  font-size: 0.8rem;
}

/* 6. New "Connect Telegram" Button */
.btn-alert-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  border: none;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn-alert-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.5);
}
.btn-alert-primary i {
  font-size: 0.8rem;
}


/* 7. ✅ NEW STYLISH CLOSE BUTTON */
.btn-alert-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 1rem;
  transition: all 0.3s ease;
}
.btn-alert-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 8. ❌ REMOVE OLD BOOTSTRAP OVERRIDE */
/* Delete or comment out this old rule */
/*
.alert-glass .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.25rem 1rem;
  z-index: 2;
  filter: invert(1) grayscale(100%) brightness(200%);
}
*/



/* ================================
   WALLET DEBT STYLES
================================ */
/* (Add this near the other .wallet-display styles in base.css) */

.wallet-display.has-debt {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.4);
}

.wallet-display.has-debt span {
  color: #f87171; /* Light red */
}

.wallet-display.has-debt i.fa-wallet {
  color: #f87171;
}

/* Make the + button red to match */
.wallet-display.has-debt .btn-charge {
   background-color: #dc3545; /* Red */
}
.wallet-display.has-debt .btn-charge:hover {
   background-color: #bb2d3b; /* Darker red */
}