/* ==========================================================================
   Medical Assistant (MA) – Medical Equipment page (medical-equipment.html)
   --------------------------------------------------------------------------
   Load AFTER style.css. Brand colours, fonts, radius and shadows come from
   the :root variables in style.css. The Rent / Buy popup, form, Select2 and
   Flatpickr styles are shared and live in style.css.

   1. Page tokens
   2. Filter & search toolbar
   3. Equipment cards
   4. Empty state
   5. Rental process
   6. Responsive
   ========================================================================== */

/* 1. Page tokens ----------------------------------------------------------- */
:root{
  --eq-radius:22px;
  --eq-thumb-height:210px;
  --eq-rent:var(--ma-secondary-dark);
  --eq-rent-bg:var(--ma-secondary-soft);
  --eq-buy:var(--ma-blue);
  --eq-buy-bg:#E6F0FD;
}

/* 2. Filter & search toolbar ---------------------------------------------- */
.eq-toolbar{background:#fff;border:1px solid var(--ma-border);border-radius:var(--ma-radius-lg);box-shadow:var(--ma-shadow-sm)}
.eq-filters .nav-link{font-family:var(--ma-font);font-weight:600;font-size:.9rem;color:var(--ma-primary);background:var(--ma-bg-soft);border:1px solid var(--ma-border);border-radius:50px;padding:9px 18px;transition:var(--ma-transition)}
.eq-filters .nav-link:hover{border-color:var(--ma-secondary);color:var(--ma-secondary-dark)}
.eq-filters .nav-link.active{background:var(--ma-primary);border-color:var(--ma-primary);color:#fff}
.eq-filters .nav-link .badge{font-weight:600;background:rgba(0,51,102,.08);color:inherit}
.eq-filters .nav-link.active .badge{background:rgba(255,255,255,.2)}
.eq-search .input-group-text{background:#fff;border:1.5px solid var(--ma-border);border-right:0;border-radius:14px 0 0 14px;color:var(--ma-muted)}
.eq-search .form-control{border-left:0;border-radius:0 14px 14px 0;height:50px}
.eq-search .form-control:focus{box-shadow:none;border-color:var(--ma-border)}
.eq-search:focus-within .input-group-text,.eq-search:focus-within .form-control{border-color:var(--ma-secondary)}
.eq-count{font-size:.88rem;color:var(--ma-text)}
.eq-count b{color:var(--ma-primary)}

/* 3. Equipment cards ------------------------------------------------------- */
.eq-card{position:relative;background:#fff;border:1px solid var(--ma-border);border-radius:var(--eq-radius);box-shadow:var(--ma-shadow);transition:var(--ma-transition);overflow:hidden}
.eq-card:hover{transform:translateY(-6px);box-shadow:var(--ma-shadow-lg)}
.eq-thumb{position:relative;height:var(--eq-thumb-height);background:linear-gradient(180deg,#fff 0%,var(--ma-bg-soft) 100%);border-bottom:1px solid var(--ma-border)}
.eq-thumb img{max-width:82%;max-height:170px;object-fit:contain;transition:transform .5s ease}
.eq-card:hover .eq-thumb img{transform:scale(1.05)}
.eq-thumb-icon{background:linear-gradient(160deg,var(--ma-secondary-softer) 0%,var(--ma-secondary-soft) 100%)}
.eq-thumb-icon .eq-glyph{width:110px;height:110px;border-radius:50%;background:#fff;color:var(--ma-secondary-dark);font-size:3rem;box-shadow:0 0 0 12px rgba(255,255,255,.55),var(--ma-shadow-sm)}
.eq-avail{position:absolute;left:14px;top:14px}
.eq-avail span{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:50px}
.eq-avail .is-rent{color:var(--eq-rent);background:var(--eq-rent-bg)}
.eq-avail .is-buy{color:var(--eq-buy);background:var(--eq-buy-bg)}
.eq-cat{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ma-secondary-dark)}
.eq-card h3{font-size:1.12rem;font-weight:600;margin:6px 0 8px}
.eq-card p{font-size:.86rem;line-height:1.65}
.eq-points li{font-size:.82rem;color:var(--ma-primary);font-weight:500}
.eq-points i{color:var(--ma-secondary)}
.eq-actions .btn-eq{flex:1;height:44px;border-radius:12px;font-family:var(--ma-font);font-weight:600;font-size:.88rem;border:1.5px solid transparent;transition:var(--ma-transition)}
.eq-actions .btn-eq-rent{background:var(--eq-rent-bg);border-color:#BFE6E4;color:var(--eq-rent)}
.eq-actions .btn-eq-rent:hover{background:var(--ma-secondary);border-color:var(--ma-secondary);color:#fff}
.eq-actions .btn-eq-buy{background:var(--ma-primary);color:#fff}
.eq-actions .btn-eq-buy:hover{background:var(--ma-primary-light);color:#fff}
.eq-item.is-hidden{display:none!important}

/* 4. Empty state ----------------------------------------------------------- */
.eq-empty{border:1.5px dashed #9ED9D6;border-radius:var(--eq-radius);background:var(--ma-secondary-softer)}
.eq-empty i{font-size:2.4rem;color:var(--ma-secondary)}

/* 5. Rental process -------------------------------------------------------- */
.eq-process{background:linear-gradient(180deg,var(--ma-bg-soft) 0%,#fff 100%)}
.eq-step{position:relative;background:#fff;border:1px solid var(--ma-border);border-radius:var(--eq-radius);box-shadow:var(--ma-shadow-sm);text-align:center}
.eq-step .eq-step-no{position:absolute;right:16px;top:14px;font-size:2.2rem;font-weight:700;line-height:1;color:var(--ma-secondary-soft)}
.eq-step .eq-step-icon{width:64px;height:64px;border-radius:50%;background:var(--ma-primary);color:#fff;font-size:1.5rem;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--ma-secondary)}
.eq-step h3{font-size:1.05rem;font-weight:600}
.eq-step p{font-size:.86rem;line-height:1.65}
@media (min-width:992px){
  .eq-steps > .col:not(:last-child) .eq-step::after{content:"";position:absolute;right:-26px;top:58px;width:28px;border-top:2px dashed var(--ma-secondary)}
}

/* Feature cards on this page use h3 (SEO heading order) – match homepage h5 style */
.feature-card h3{font-size:1.05rem;font-weight:600;margin:16px 0 8px}

/* 6. Responsive ------------------------------------------------------------ */
@media (max-width:575.98px){
  :root{--eq-thumb-height:190px}
  .eq-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .eq-filters .nav-link{white-space:nowrap}
}