/* assets/appfeel.css?v=11 */

/* ===========================
   One frosted modern theme
   (single source of truth)
   =========================== */

:root{
  /* “frosted slate” */
  --glass-bg: rgba(15, 23, 42, .58);
  --glass-border: rgba(255,255,255,.14);
  --glass-blur: 14px;
  --glass-shadow: 0 14px 40px rgba(0,0,0,.22);

  --nav-text: rgba(255,255,255,.88);
  --nav-muted: rgba(255,255,255,.66);

  --nav-active-bg: rgba(255,255,255,.12);
  --nav-active-text: rgba(255,255,255,.98);
}

/* Top nav (fixed) */
#appTopNav{
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

/* Brand + buttons */
#appTopNav .nav-brand{
  color: var(--nav-text) !important;
  letter-spacing: .2px;
}

#appTopNav .btn-nav{
  color: var(--nav-text);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
#appTopNav .btn-nav:hover{
  background: rgba(255,255,255,.10);
}
#appTopNav .btn-danger{
  border-color: rgba(255,255,255,.18);
}

/* hard-kill any legacy footer tabs if they still exist somewhere */
.app-tabs,
nav.app-tabs{
  display:none !important;
}

/* Top nav spacer (because navbar is fixed-top now) */
.app-topnav-spacer{
  height: 56px;
}
@media (min-width: 992px){
  .app-topnav-spacer{ height: 64px; }
}

/* leave space for bottom nav on mobile */
body.has-appfeel-bottomnav{
  padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
}

/* bottom nav container (SLIM) */
.appfeel-bottomnav{
  position: fixed !important;
  left: 0; right: 0;
  bottom: 0 !important;
  z-index: 1200;

  /* ✅ slimmer */
  padding: 4px 10px calc(6px + env(safe-area-inset-bottom, 0px));

  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* inner layout */
.appfeel-bottomnav-inner{
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* items */
.appfeel-bottomnav .bn-item{
  text-decoration: none !important;
  color: var(--nav-muted);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  /* ✅ slimmer */
  padding: 6px 4px;

  border-radius: 12px;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

.appfeel-bottomnav .bn-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.appfeel-bottomnav .bn-txt{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12px;
  line-height: 1;
}

/* active */
.appfeel-bottomnav .bn-item.active{
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
}

/* tap feedback */
.appfeel-bottomnav .bn-item:active{
  transform: scale(.985);
}

/* desktop: no bottom nav */
@media (min-width: 992px){
  .appfeel-bottomnav{ display:none; }
  body.has-appfeel-bottomnav{ padding-bottom: 0; }
}

/* ===========================
   Search Overlay (Feed Search)
   =========================== */

.appfeel-overlay{
  position: fixed;
  inset: 0;
  z-index: 1400; /* above bottom nav + cards */
  display: none;
}

.appfeel-overlay.show{ display:block; }

.appfeel-overlay .ov-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(6px);
}

.appfeel-overlay .ov-panel{
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  overflow: hidden;
}

/* keep overlay panel nicely below fixed top nav */
@media (max-width: 991.98px){
  .appfeel-overlay .ov-panel{
    top: calc(56px + 10px + env(safe-area-inset-top, 0px));
  }
}

.ov-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ov-title{
  font-weight: 800;
  font-size: 14px;
  color: rgba(15, 23, 42, .85);
  letter-spacing: .2px;
}

.ov-close{
  margin-left: auto;
  border: 0;
  background: transparent;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 23, 42, .70);
}
.ov-close:active{ transform: scale(.98); }
.ov-close:hover{ background: rgba(2,132,199,.08); }

.ov-body{ padding:12px; }

.ov-body .input-group{
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.ov-body .input-group .input-group-text{ border:0; background:#fff; }
.ov-body .input-group .form-control{ border:0; box-shadow:none !important; }
.ov-body .input-group .btn{ border:0; }

.ov-hint{
  font-size: 12px;
  color: rgba(15, 23, 42, .60);
  margin-top: 8px;
}