/* static/css/list-requests.css (UPDATED - COMPONENT SAFE) */
:root {
  --rukn-orange: #ff7a18;
  --rukn-orange-light: #fdba74;
  --rukn-gray: #f3f4f6;
  --muted: #6b7280;
  --rukn-green: #16a34a;
  --rukn-green-700: #15803d;
  --rukn-green-50: #ecfdf5;
  --rukn-green-100: #d1fae5;
  --rukn-green-200: #a7f3d0;
  --rukn-green-light: #d1fae5;
}

/* Scope page styling (NO global body leak) */
.list-requests-page {
  font-family: "Cairo", sans-serif;
  background: #F1F1F1;
  color: #111827;
  line-height: 1.6;
  min-height: 100%;
}

/* container shell */
.list-requests-page .container-box {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  margin-bottom: 20px;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  position: relative;
  overflow: visible;
}
.list-requests-page .container-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background: linear-gradient(90deg,var(--rukn-green),var(--rukn-green-light));
  opacity:.9;
  z-index:1;
  pointer-events:none;
}
.list-requests-page .container-box > *{ position:relative; z-index:2; }

.list-requests-page input[type="checkbox"],
.list-requests-page input[type="radio"]{
  accent-color: var(--rukn-green) !important;
}

.list-requests-page .filter-select:focus,
.list-requests-page .filter-input:focus{
  border-color: var(--rukn-green) !important;
  box-shadow: 0 0 0 3px rgba(255,122,24,.25) !important;
  outline:none !important;
  background: rgba(22,163,74,.04) !important;
}

/* no scrollbar */
.list-requests-page .no-scrollbar::-webkit-scrollbar{ display:none; }
.list-requests-page .no-scrollbar{ scrollbar-width:none; }

/* filter title */
.list-requests-page .filter-title{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#444;
  margin: 10px 0 8px;
}
.list-requests-page .filter-input,
.list-requests-page .filter-select{
  width:100%;
  border:2px solid rgb(231,232,234);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  background:#fff;
  transition:.25s;
}

/* Segmented */
.list-requests-page .seg-btn{
  display:flex;
  width:100%;
  border:2px solid rgb(231,232,234);
  border-radius:99px;
  padding:4px 1px;
  overflow:hidden;
  background: var(--rukn-gray);
}
.list-requests-page .seg-btn input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.list-requests-page .seg-btn label{
  flex:1;
  padding:6px 8px;
  margin:0 2px;
  font-size:11px;
  font-weight:900;
  text-align:center;
  color:#6b7280;
  cursor:pointer;
  user-select:none;
  line-height:1.8;
  transition:.15s ease;
  white-space:nowrap;
  border-radius:99px;
}
.list-requests-page .seg-btn input:checked + label{
  color:#fff;
  background: var(--rukn-green);
}
.list-requests-page .seg-btn label:hover{
  color:#fff;
  background: var(--rukn-green);
}
.list-requests-page .seg-btn input:checked + label:hover{
  background: var(--rukn-green-700);
}

/* ===== Separator ===== */
.list-requests-page .page-sep{
  position:relative;
  padding:22px 0 6px;
  margin:10px 0 24px;
}
.list-requests-page .page-sep::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(to left,transparent,rgba(22,163,74,.35),transparent);
}
.list-requests-page .page-sep::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(to left,transparent,rgba(22,163,74,.18),transparent);
}
.list-requests-page .sep-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,122,24,.20);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
}
.list-requests-page .sep-dot{
  width:9px;height:9px;
  border-radius:999px;
  background: linear-gradient(180deg,var(--rukn-green),var(--rukn-green-light));
  box-shadow: 0 0 0 4px rgba(255,122,24,.10);
}
.list-requests-page .sep-title{
  font-weight:900;
  color:#111827;
  font-size:16px;
}
.list-requests-page .sep-sub{
  color:#6b7280;
  font-size:13px;
  margin-top:8px;
  max-width:64ch;
}

/* ===== VIP container ===== */
.list-requests-page .vip-shell{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(900px 280px at 85% 0%, rgba(22,163,74,.12), transparent 55%),
    linear-gradient(180deg,#ffffff,#fffaf6);
  border: 1px solid rgba(255,122,24,.22);
  box-shadow: 0 26px 70px rgba(15,23,42,.12);
}
.list-requests-page .vip-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  background: linear-gradient(90deg,var(--rukn-green),rgba(22,163,74,.35),rgba(255,122,24,.55));
  opacity:.95;
}

.list-requests-page .vip-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 10px;
}
@media (min-width:640px){
  .list-requests-page .vip-head{ padding:22px 22px 12px; }
}
.list-requests-page .vip-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.list-requests-page .vip-icon{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,122,24,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.list-requests-page .vip-h2{
  font-weight:900;
  font-size:18px;
  color:#111827;
  line-height:1.2;
}
@media (min-width:640px){
  .list-requests-page .vip-h2{ font-size:20px; }
}
.list-requests-page .vip-sub{
  margin-top:4px;
  font-size:12.5px;
  color:#6b7280;
  max-width:60ch;
}
.list-requests-page .vip-controls{ display:flex; gap:10px; }
.list-requests-page .vip-btn{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,122,24,.20);
  color:#111827;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  transition: transform .15s ease, background .15s ease;
}
.list-requests-page .vip-btn:hover{
  transform: translateY(-1px);
  background:#f6fff8;
}
.list-requests-page .vip-body{
  position:relative;
  z-index:2;
  padding:6px 14px 14px;
}
@media (min-width:640px){
  .list-requests-page .vip-body{ padding:8px 18px 18px; }
}
.list-requests-page .vip-body::before{
  content:"";
  position:absolute;
  inset:10px 10px 12px;
  border-radius:22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  pointer-events:none;
  z-index:0;
}
.list-requests-page .vip-body > *{ position:relative; z-index:1; }

.list-requests-page .vip-dots{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  direction:rtl;
}
.list-requests-page .vip-dot{
  width:10px;height:10px;
  border-radius:999px;
  background: rgba(17,24,39,.18);
  border: 1px solid rgba(255,122,24,.18);
  transition: width .2s ease, background .2s ease, transform .2s ease;
}
.list-requests-page .vip-dot.is-active{
  width:28px;
  background: rgba(22,163,74,.85);
}
.list-requests-page .vip-dot:hover{ transform:scale(1.12); }

/* VIP RTL rail */
.list-requests-page .vip-rtl-rail{
  direction: rtl;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-stop: always;
  scroll-behavior: auto;
}

/* Desktop 4 cards */
@media (min-width: 1280px){
  .list-requests-page .vip-rtl-rail{
    overflow-x:hidden;
    scroll-snap-type:none;
    touch-action:auto;
  }
  .list-requests-page .vip-rtl-rail > .featured-card{
    flex: 0 0 calc((100% - (20px * 3)) / 4);
    scroll-snap-align: none;
  }
}

/* Mobile/tablet 1 card */
@media (max-width: 1279px){
  .list-requests-page .vip-rtl-rail{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    touch-action: pan-x;
    scroll-behavior:auto;
  }
  .list-requests-page .vip-rtl-rail > .featured-card{
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

@media (max-width: 639px){
  .list-requests-page .vip-dots{ display:none !important; }
}

/* ===== Mobile Filter Dock + Sheet ===== */
@media (max-width: 767px){
  .list-requests-page { padding-bottom: 96px; }
}

.list-requests-page .mf-dock{
  position:fixed;
  left:14px; right:14px;
  bottom:14px;
  z-index:9999;
  border-radius:22px;
  background:#fff;
  border:0;
  box-shadow: 0 16px 46px rgba(15,23,42,.16);
  overflow:hidden;
}
.list-requests-page .mf-row{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:6px;
  padding:10px;
  direction: rtl;
}
.list-requests-page .mf-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px;
  border-radius:16px;
  border:1px solid transparent;
  color:#111827;
  transition:.18s ease;
  user-select:none;
}
.list-requests-page .mf-item svg{ width:20px;height:20px; }
.list-requests-page .mf-item .lbl{
  font-size:11px;
  font-weight:900;
  color:#374151;
  line-height:1;
}
.list-requests-page .mf-item.is-active{
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.22);
}
.list-requests-page .mf-item.is-active svg{ color: var(--rukn-green); }

.list-requests-page .mf-sheet{
  position:fixed;
  left:14px; right:14px;
  bottom: calc(var(--mf-dock-h, 86px) + 18px);
  z-index:9998;
  border-radius:22px;
  background:#fff;
  border:0;
  box-shadow: 0 18px 52px rgba(15,23,42,.22);
  overflow:hidden;
  transform: translateY(18px);
  opacity:0;
  pointer-events:none;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
.list-requests-page .mf-sheet.is-open{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}
.list-requests-page .mf-grab{
  display:flex;
  justify-content:center;
  padding:10px 0 2px;
}
.list-requests-page .mf-grab span{
  width:44px;height:5px;
  border-radius:999px;
  background: rgba(17,24,39,.14);
}
.list-requests-page .mf-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 8px;
  direction: rtl;
}
.list-requests-page .mf-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.list-requests-page .mf-ico{
  width:38px;height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  border: 1px solid rgba(0,0,0,.04);
}
.list-requests-page .mf-h3{
  font-size:14px;
  font-weight:900;
  color:#111827;
  line-height:1.2;
}
.list-requests-page .mf-sub{
  margin-top:2px;
  font-size:12px;
  color:#6b7280;
}
.list-requests-page .mf-close{
  width:40px;height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
.list-requests-page .mf-body{
  padding:6px 12px 12px;
  max-height: min(42dvh, 340px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.list-requests-page .mf-actions{
  padding:10px 12px 12px;
  display:flex;
  gap:10px;
  direction: rtl;
  border-top: 1px solid rgba(17,24,39,.06);
  background:#fff;
}
.list-requests-page .mf-btn{
  flex:1;
  border-radius:16px;
  padding:12px 12px;
  font-weight:900;
  font-size:13px;
  transition:.18s ease;
}
.list-requests-page .mf-btn.primary{
  background: var(--rukn-green);
  color:#fff;
}
.list-requests-page .mf-btn.primary:hover{
  background: var(--rukn-green-700);
}
.list-requests-page .mf-btn.ghost{
  background:#fff;
  color:#111827;
  border: 1px solid var(--rukn-green-50);
}
.list-requests-page .mf-btn.ghost:hover{
  background: var(--rukn-green-50);
}

.list-requests-page .mf-body .filter-title{
  font-size:12.5px;
  margin:10px 0 8px;
}
.list-requests-page .mf-body .filter-input,
.list-requests-page .mf-body .filter-select{
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
}

/* ===========================
   FIX: Keep desktop filters visible while scrolling
   =========================== */

@media (max-width: 767px){
  .list-requests-page #filtersBox{
    display:none !important;
  }
}

@media (min-width: 768px) {
  .list-requests-page #filtersBox {
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow: auto;
    z-index: 30;
  }
}

/* Force desktop visibility (guards against any accidental global hide rules) */
@media (min-width: 1024px) {
  .list-requests-page #filtersBox {
    display: block !important;
  }
}

/* ======================================================================
   Category dropdown (select-like trigger + collapsible tree panel)
   ====================================================================== */

.list-requests-page .cat-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.list-requests-page .cat-dropdown-wrap {
  position: relative;
}

.list-requests-page .cat-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 2px solid rgb(231, 232, 234);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #111827;
  cursor: pointer;
  text-align: right;
  transition: border-color .25s, box-shadow .25s;
}

.list-requests-page .cat-dropdown-trigger:hover,
.list-requests-page .cat-dropdown-trigger:focus {
  border-color: var(--rukn-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
  outline: none;
}

.list-requests-page .cat-dropdown-trigger[aria-expanded="true"] {
  border-color: var(--rukn-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.list-requests-page .cat-dropdown-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-requests-page .cat-dropdown-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.list-requests-page .cat-dropdown-trigger[aria-expanded="true"] .cat-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--rukn-green);
}

.list-requests-page .cat-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 2px solid var(--rukn-green);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 4px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.list-requests-page .cat-tree-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}

.list-requests-page .cat-tree-item:hover {
  background: rgba(22, 163, 74, 0.08);
}

.list-requests-page .cat-tree-item.is-selected {
  background: rgba(22, 163, 74, 0.12);
  color: var(--rukn-green);
  font-weight: 700;
}

.list-requests-page .cat-tree-label {
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.4;
}

.list-requests-page .cat-tree-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #9ca3af;
  transition: transform 0.2s ease, background 0.12s, color 0.12s;
}

.list-requests-page .cat-tree-arrow:hover {
  background: rgba(0,0,0,.06);
  color: #374151;
}

.list-requests-page .cat-tree-arrow.is-open {
  transform: rotate(90deg);
  color: var(--rukn-green);
}

.list-requests-page .cat-l2 { padding-inline-start: 12px; }
.list-requests-page .cat-l3 { padding-inline-start: 24px; }
}