/* ============================
   PLACEHOLDER TEXT
=============================== */
.form-control::placeholder {
    color: var(--text, #222);
    opacity: 0.6;
}

/* ============================
   SIDEBAR GLOBAL STYLES
=============================== */
.sidebar-wrapper {
    padding: 1rem;
    background: transparent;
    height: 100%;          
    min-height: 100%;        
    display: block;
    width: 280px; /* default width */
}

.sidebar-wrapper-inner {
    position: sticky;
    top: 82px;
    margin: 0;
    padding: 0;
    height: 100%;          
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================
   SIDEBAR CARD
=============================== */
.sidebar-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,245,245,0.75));
  border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  margin-bottom: 1.2rem;
  transition: all .18s ease;
  border: 1px solid rgba(0,0,0,0.04);
  color: var(--text, #222);
}

.sidebar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

[data-theme="dark"] .sidebar-card,
.dark .sidebar-card {
  background: linear-gradient(180deg, rgba(18,24,38,0.75), rgba(18,24,38,0.55));
  border: 1px solid rgba(255, 255, 255, 0.116);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  color: #e8e8e8;
}

/* ============================
   SIDEBAR TITLES
=============================== */
.sidebar-title {
  position: relative;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .75rem;
  color: var(--text, #222);
  letter-spacing: .3px;
  width: max-content;
  line-height: 3;
  background: var(--bg-soft); /* your desired background color */
  padding: 0 .3rem; /* optional padding */
}

/* Custom underline */
.sidebar-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px; /* controls spacing from text */
  width: 100%;
  height: 2px; /* thickness */
  background: var(--accent, #007bff); /* underline color */
  border-radius: 2px;
}


[data-theme="dark"] .sidebar-title,
.dark .sidebar-title{
  color: #e8e8e8;
}
[data-theme="dark"] .btn-a {
  color: #e8e8e8;
  margin-top: 10px;
  margin-bottom: 10px;
  outline-color: #b8bcc4 solid 2px;
  
}
.btn-a {
  background-color: #007bff;
  color: #e8e8e8;
}
.btn-a:hover {
  background-color: #2767ff;
  color: #fff;
}
/* ============================
   SIDEBAR LIST LINKS
=============================== */
.sidebar-list {
    list-style: none; /* remove bullets */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: max-content;
}

.sidebar-list li a {
  display: block;
  padding: .5rem .7rem;
  border-radius: 8px;
  color: var(--muted, #555);
  font-size: .9rem;
  transition: all .15s ease;
  text-decoration: none;
  width: 100%;
}

.sidebar-list li a:hover {
  color: var(--text, #111);
  background: rgba(52, 120, 246, 0.08);
  transform: translateX(4px);
}

[data-theme="dark"] .sidebar-list li a {
  color: #b8bcc4;
}

[data-theme="dark"] .sidebar-list li a:hover {
  background: rgba(52, 120, 246, 0.15);
  color: #fff;
}

/* ============================
   FILTER PANEL INPUTS
=============================== */
.filter-panel input,
.filter-panel select,
.filter-panel button {
  width: 100% !important;
  color: var(--text, #222);
  background-color: var(--bg, #fff);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
}

.filter-panel input::placeholder {
  color: var(--text, #888);
}

[data-theme="dark"] .filter-panel input,
[data-theme="dark"] .filter-panel select,
.dark .filter-panel input,
.dark .filter-panel select {
  background-color: #1a1f2b;
  border: 1px solid rgba(255,255,255,0.15);
  color: #e8e8e8;
}

[data-theme="dark"] .filter-panel input::placeholder,
.dark .filter-panel input::placeholder {
  color: #bbb;
}

.filter-panel button {
  background-color: #3478f6;
  color: #fff;
}

[data-theme="dark"] .filter-panel button,
.dark .filter-panel button {
  background-color: #4a90ff;
  color: #fff;
}
.filter-close {
  display: none !important;
}
.filter-text {
  display: none;
}
/* ============================
   MOBILE RESPONSIVE
=============================== */
@media (max-width: 991px) {
    .sidebar-wrapper {
        width: 100%; /* full width on mobile */
    }

    .sidebar-card {
        display: none !important;
    }

    .filter-button {
        display: block;
        width: 50%;
        margin-bottom: 1rem;
        background: #7a0000f5;
        color: #ffffff;
        font-size: 10px;
        text-align: center;
        padding: 0.5rem 0;
        border-radius: 6px;
        cursor: pointer;
    }

    .filter-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 80%;
        background: var(--bg, #fff);
        z-index: 9999;
        overflow-y: auto;
        padding: 1rem;
        box-shadow: 4px 0 14px rgba(0,0,0,0.2);
        border-right: 1px solid rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        transform: translateX(-100%);
    }

    .filter-panel.active {
        display: block;
        transform: translateX(0);
    }

    .filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 9998;
    }

    .filter-overlay.active {
        display: block;
    }

    .sidebar-wrapper-inner {
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* SHOW ONLY ON MOBILE */
    @media (max-width:600px) {
        .filter-button {
            display: block !important;
        }
        .filter-close {
            display: block !important;
            font-size: 2.5rem;
            text-align: right;
        }
        .filter-close:hover {
            color: red;
        }
    }

}
/* ============================
   Sidebar Promo Card
   ============================ */
.promo-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.promo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(2,6,23,0.12);
}

.promo-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.promo-media img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.promo-card:hover img {
  transform: scale(1.05);
}

.promo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px;
  transition: background 0.3s ease;
}

.promo-overlay h5 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.promo-overlay p {
  font-size: 1rem;
  margin-bottom: 12px;
  font-weight: 500;
}

.promo-overlay .btn {
  font-size: 0.875rem;
  padding: 6px 12px;
  border-radius: 8px;
}

/* Dark mode */
[data-theme="dark"] .promo-overlay {
  background: linear-gradient(180deg, rgba(10,12,20,0.5), rgba(10,12,20,0.75));
}

[data-theme="dark"] .promo-overlay h5,
[data-theme="dark"] .promo-overlay p {
  color: #f0f0f5;
}