/*!
 * PTMS Browse Overrides (scoped + compatible with portal.css / Bootstrap 5)
 * Load AFTER portal.css
 *
 * Usage (recommended):
 *   <div class="app-content pt-3 p-md-3 p-lg-4 ptms-browse">
 *     ...
 *   </div>
 */

/* ========= Scope ========= */
.ptms-browse{
  /* Use site theme colors from Bootstrap vars (portal.css sets these) */
  --ptms-bg: var(--bs-body-bg, #fff);
  --ptms-card-bg: rgba(255,255,255,.86);
  --ptms-border: rgba(15,23,42,.10);
  --ptms-text: var(--bs-body-color, #0f172a);
  --ptms-muted: rgba(15,23,42,.62);

  /* Prefer existing theme accents */
  --ptms-primary: var(--bs-primary, #0d6efd);
  --ptms-success: var(--bs-success, #198754);
  --ptms-danger:  var(--bs-danger,  #dc3545);
  --ptms-warning: var(--bs-warning, #ffc107);

  --ptms-radius: 18px;
  --ptms-radius-lg: 22px;
  --ptms-shadow: 0 18px 40px rgba(16,24,40,.10);
  --ptms-shadow-soft: 0 10px 26px rgba(16,24,40,.08);

  --ptms-focus: 0 0 0 .25rem rgba(var(--bs-primary-rgb, 13,110,253), .22);
}

/* Background aurora */
.ptms-browse{
  background:
    radial-gradient(900px 500px at 12% 10%, rgba(var(--bs-primary-rgb, 13,110,253), .14), transparent 60%),
    radial-gradient(900px 550px at 88% 18%, rgba(var(--bs-success-rgb, 25,135,84), .12), transparent 60%),
    radial-gradient(900px 650px at 50% 100%, rgba(var(--bs-warning-rgb, 255,193,7), .10), transparent 60%),
    #f6f8fc;
  min-height: 100vh;
}

/* Better container width without breaking portal.css containers */
.ptms-browse .container-xl{ max-width: 1240px; }

/* Typography rhythm */
.ptms-browse h1,.ptms-browse h2,.ptms-browse h3,.ptms-browse h4{
  letter-spacing: -.02em;
  color: var(--ptms-text);
}
.ptms-browse .small,
.ptms-browse .text-muted{ color: var(--ptms-muted) !important; }

/* ========= App cards ========= */
.ptms-browse .app-card{
  border: 1px solid var(--ptms-border) !important;
  border-radius: var(--ptms-radius-lg) !important;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ptms-shadow-soft);
  overflow: hidden;
}
.ptms-browse .app-card-header{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
}
.ptms-browse .app-card-title{
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Sidebar logo shadow only (safe) */
.ptms-browse .app-card-header a img{
  filter: drop-shadow(0 10px 14px rgba(16,24,40,.10));
}

/* Status line */
.ptms-browse .status-bg{
  margin-top: .5rem;
  padding: .55rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
}

/* Sticky actions bar (keep visible) */
.ptms-browse .sticky-search-actions{
  position: sticky;
  top: 12px;
  z-index: 5;
  border-radius: 16px;
  padding: .6rem .6rem;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(16,24,40,.08);
}

/* Buttons */
.ptms-browse .btn{
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ptms-browse .btn:focus{ box-shadow: var(--ptms-focus) !important; }

.ptms-browse .app-btn-primary{
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 13,110,253),1), rgba(var(--bs-primary-rgb, 13,110,253),.88));
  border: 0;
  box-shadow: 0 12px 22px rgba(var(--bs-primary-rgb, 13,110,253), .22);
  color: #fff;
}
.ptms-browse .app-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(var(--bs-primary-rgb, 13,110,253), .26);
}
.ptms-browse .app-btn-secondary{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.12);
}
.ptms-browse .app-btn-secondary:hover{
  background: rgba(15,23,42,.06);
}

/* Inputs */
.ptms-browse .form-control,
.ptms-browse .form-select{
  border-radius: 14px;
  border-color: rgba(15,23,42,.14);
  background: rgba(255,255,255,.90);
}
.ptms-browse .form-control:focus,
.ptms-browse .form-select:focus{
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .45);
  box-shadow: var(--ptms-focus);
}
.ptms-browse .form-label{
  font-weight: 800;
  color: rgba(15,23,42,.78);
}

/* Switch labels */
.ptms-browse .form-check.form-switch{
  /* padding: .45rem .5rem; */
  padding-left: 45px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ptms-browse .form-check.form-switch:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.85);
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .18);
}
.ptms-browse .form-check-input{ cursor: pointer; }
.ptms-browse .form-check-input:focus{ box-shadow: var(--ptms-focus); }

/* Rules list: collapsed by default */
.ptms-browse #rulesBox{
  border-radius: 16px;
  padding: .6rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.55);
  max-height: 220px;
  overflow: hidden;
}
.ptms-browse #rulesBox.expanded{
  max-height: none;
}

/* Top loading */
.ptms-browse #top-loading{
  position: sticky;
  top: 0;
  z-index: 999;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  padding: .6rem .8rem;
  margin-bottom: .75rem;
  box-shadow: 0 10px 22px rgba(16,24,40,.08);
  display: none;
}
.ptms-browse #top-loading .bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
}
.ptms-browse #top-loading .bar > div{
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb, 13,110,253), .45),
    rgba(var(--bs-primary-rgb, 13,110,253), 1),
    rgba(var(--bs-success-rgb, 25,135,84), .9)
  );
  animation: ptmsLoadingMove 1s infinite linear;
}
@keyframes ptmsLoadingMove{
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ========= Result cards layout ========= */
.ptms-browse .app-card.app-card-basic.p-2.shadow-sm.h-100{
  padding: 12px !important;
}

.ptms-browse #cards{ justify-content: flex-start; }
.ptms-browse #cards.single-result{ justify-content: flex-start; }

/* Make card columns wider on desktop for readability */
@media (min-width: 768px){
  .ptms-browse #cards > .col-sm-6.col-lg-4{
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 3 cards on lg+ */
@media (min-width: 992px){
  .ptms-browse #cards > .col-sm-6.col-lg-4{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Card surface (your JS uses: .p-3.border.rounded-3.h-100) */
.ptms-browse #cards .p-3.border.rounded-3.h-100{
  padding: 16px !important;
  border-radius: var(--ptms-radius) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(var(--bs-primary-rgb, 13,110,253), .09), transparent 50%),
    rgba(255,255,255,.86);
  box-shadow: var(--ptms-shadow-soft);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
  overflow: hidden;
}
.ptms-browse #cards .p-3.border.rounded-3.h-100:hover{
  transform: translateY(-2px);
  box-shadow: var(--ptms-shadow);
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .18) !important;
}
/* subtle shine */
.ptms-browse #cards .p-3.border.rounded-3.h-100::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(var(--bs-primary-rgb, 13,110,253), .10) 35%, transparent 70%);
  transform: translateX(-40%);
  opacity: 0;
  transition: opacity .18s ease, transform .25s ease;
  pointer-events:none;
}
.ptms-browse #cards .p-3.border.rounded-3.h-100:hover::before{
  opacity: 1;
  transform: translateX(0%);
}

.ptms-browse #cards .p-3.border.rounded-3.h-100 .fw-bold.fs-6{
  font-size: 16px !important;
  font-weight: 900 !important;
}
.ptms-browse #cards .p-3.border.rounded-3.h-100 .small.text-muted{
  font-size: 12.5px;
  line-height: 1.35;
}

/* Criteria blocks */
.ptms-browse .criteria-wrap{
  margin-top: .75rem;
  padding: 10px 12px !important;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.65);
}
.ptms-browse .criteria-title{
  font-weight: 900;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,.55);
}
.ptms-browse .badge-gap{ display:flex; flex-wrap:wrap; gap:.35rem; }

/* Badges */
.ptms-browse .badge{
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.01em;
  padding: .38rem .55rem;
}
.ptms-browse .badge.bg-danger{ background: rgba(var(--bs-danger-rgb, 220,53,69), .92) !important; }
.ptms-browse .badge.bg-secondary{ background: rgba(var(--bs-secondary-rgb, 108,117,125), .92) !important; }
.ptms-browse .badge.bg-success{ background: rgba(var(--bs-success-rgb, 25,135,84), .92) !important; }
.ptms-browse .badge.bg-warning{ background: rgba(var(--bs-warning-rgb, 255,193,7), .95) !important; }
.ptms-browse .badge.bg-primary{ background: rgba(var(--bs-primary-rgb, 13,110,253), .95) !important; }

/* Beds badge pop */
.ptms-browse .criteria-wrap .badge.bg-success{
  box-shadow: 0 10px 18px rgba(var(--bs-success-rgb, 25,135,84), .18);
}

/* Empty state */
.ptms-browse #empty{
  border-radius: var(--ptms-radius-lg);
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.70);
  padding: 1.25rem !important;
}

/* Spinner size */
.ptms-browse #search-spinner .spinner-border{
  width: 2.2rem;
  height: 2.2rem;
}

/* Pagination */
.ptms-browse .pagination .page-link{
  border-radius: 12px !important;
  border-color: rgba(15,23,42,.12);
  color: rgba(15,23,42,.75);
}
.ptms-browse .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 13,110,253), 1), rgba(var(--bs-primary-rgb, 13,110,253), .86));
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .25);
  box-shadow: 0 12px 22px rgba(var(--bs-primary-rgb, 13,110,253), .22);
}

/* ========= Next available (mini card + chips) ========= */
.ptms-browse .na-card{
  margin-top: .35rem;
  padding: 12px 12px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(600px 240px at 15% 0%, rgba(var(--bs-primary-rgb, 13,110,253), .12), transparent 55%),
    rgba(255,255,255,.85) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 12px 26px rgba(16,24,40,.10) !important;
}
.ptms-browse .na-card.na-empty{
  background: rgba(255,255,255,.75) !important;
  border-style: dashed !important;
}

.ptms-browse .na-title{
  display:flex;
  align-items:center;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,.60) !important;
  margin-bottom: 10px !important;
}

.ptms-browse .na-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px !important;
}

.ptms-browse .na-chip{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--bs-primary-rgb, 13,110,253), .16) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 16px rgba(var(--bs-primary-rgb, 13,110,253), .10) !important;
  white-space: nowrap;
}
.ptms-browse .na-chip-date{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(var(--bs-primary-rgb, 13,110,253), .95) !important;
}
.ptms-browse .na-chip-beds{
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.72) !important;
}
.ptms-browse .na-chip-dot{ opacity: .35 !important; }

.ptms-browse .na-more{
  display:inline-flex;
  align-items:center;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  border: 1px dashed rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.55) !important;
  color: rgba(0,0,0,.60) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* Responsive tweak */
@media (max-width: 991.98px){
  .ptms-browse .sticky-search-actions{ top: 0; border-radius: 14px; }
  .ptms-browse .app-card{ border-radius: 18px !important; }
}

div#search-spinner {
    position: absolute;
    z-index: 1;
    background: ghostwhite;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(5px);
    justify-content: center;
    backdrop-filter: blur(5px);
}
/* ---------- Beds header: number replaces the icon ---------- */
.ptms-browse .beds-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.ptms-browse .beds-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  font-weight:800;
}

.ptms-browse .beds-kpi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:48px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  font-size:22px;
  font-weight:900;
  line-height:1;
  letter-spacing:.5px;
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 24px rgba(16,24,40,.08);
}

.ptms-browse .beds-kpi small{
  font-size:12px;
  font-weight:800;
  opacity:.8;
  margin-left:6px;
}

/* remove icon spacing if you keep the icon element in markup */
.ptms-browse .beds-title .bi{
  display:none !important;
}

/* Label + tooltip */
.ptms-browse .beds-label{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.1;
}
.ptms-browse .beds-label .main{
  font-size:1.25rem; /* close to h2 */
  font-weight:900;
}
.ptms-browse .beds-label .sub{
  font-size:.9rem;
  font-weight:700;
  opacity:.75;
}

/* Color variants for KPI */
.ptms-browse .beds-kpi--success{
  color:#198754;
  border-color:rgba(25,135,84,.25);
  background:rgba(25,135,84,.08);
}
.ptms-browse .beds-kpi--primary{
  color:#0d6efd;
  border-color:rgba(13,110,253,.25);
  background:rgba(13,110,253,.08);
}
.ptms-browse .beds-kpi--purple{
  color:#6f42c1;
  border-color:rgba(111,66,193,.25);
  background:rgba(111,66,193,.08);
}

/* Keep your existing pill (right side) but make it slightly smaller if you still use it anywhere */
.ptms-browse .beds-pill{
  min-width: 140px;
}
.ptms-browse .beds-num{
  font-size: 30px;
}
.na-chip-type{
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.8) !important;
}
.ptms-browse .form-check{
    min-height: unset !important;
}