/* ============================================================================= UNIFIED PROVIDER PROFILE CARDS — Tasks No.4, No.5, No.6 ----------------------------------------------------------------------------- Standardises ALL 8 provider profile cards to ONE uniform system. Reference / standard = the RADIOLOGY center card (.rad-center-card). Every other provider card (Doctor, Hospital, Nurse, Lab, Pharmacy, Surgical store, Ambulance) is reshaped to the SAME size, layout, spacing, image size, name / rating / verified-badge / button position and the SAME brand colour scheme (teal), so the whole app looks like a single uniform design system. Layout rule (responsive): • Mobile : 2 profile cards per row • Desktop : 4 profile cards per row Loaded LAST in so it overrides earlier per-service CSS. CSS only — no JS/markup logic is changed, so nothing else is affected. ========================================================================== */ :root{ /* Single uniform brand colour scheme for every provider card */ --ppc-brand: #14b8a6; /* teal — the app brand colour */ --ppc-brand-dark: #0d9488; --ppc-brand-soft: rgba(20,184,166,.14); --ppc-brand-border: rgba(20,184,166,.30); --ppc-surface: #0d1f2a; /* uniform card background */ --ppc-surface-2: #16323d; /* uniform image / avatar placeholder bg */ --ppc-line: #1e3a4a; /* uniform card border */ --ppc-text: #e2e8f0; /* uniform primary text */ --ppc-muted: #93a4b3; /* uniform secondary text */ --ppc-star: #f5b301; /* uniform rating star colour */ --ppc-radius: 14px; /* uniform card corner radius */ --ppc-pad: 12px; /* uniform card padding */ --ppc-gap: 12px; /* uniform grid gap (mobile) */ --ppc-gap-lg: 18px; /* uniform grid gap (desktop) */ --ppc-img-h: 96px; /* uniform image height (mobile) */ --ppc-img-h-lg: 120px; /* uniform image height (desktop) */ --ppc-min-h: 238px; /* uniform minimum card height */ } /* ----------------------------------------------------------------------------- 1) UNIFORM GRID — 2 per row (mobile) / 4 per row (desktop) Applies to every provider listing grid across all services. -------------------------------------------------------------------------- */ .ads-list, /* Doctors */ .nurse-grid, /* Nurses */ .rad-centers-grid, /* Radiology (ref) */ .lab-grid, /* Labs */ .nh-grid, /* Hospitals */ .pharm-store-grid, /* Pharmacies */ .surg-store-grid, /* Surgical stores */ .amb-grid{ /* Ambulance */ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--ppc-gap) !important; align-items: stretch !important; /* every card same height in a row */ padding: 16px !important; } /* Loading / empty placeholders always span the full row */ .ads-list .ads-loading, .ads-list .ads-empty, .nurse-grid .ads-loading, .nurse-grid .ads-empty, .rad-centers-grid .rad-empty, .nh-grid .nh-loading, .nh-grid .nh-empty, .pharm-store-grid .ads-loading, .pharm-store-grid .ads-empty{ grid-column: 1 / -1 !important; } @media (min-width: 768px){ .ads-list, .nurse-grid, .rad-centers-grid, .lab-grid, .nh-grid, .pharm-store-grid, .surg-store-grid, .amb-grid{ grid-template-columns: repeat(4, 1fr) !important; /* 4 per row */ gap: var(--ppc-gap-lg) !important; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 18px 24px !important; } } /* ----------------------------------------------------------------------------- 2) UNIFORM CARD SHELL — identical box for every provider All 8 provider cards share: same bg, border, radius, padding, min-height, vertical flex layout and hover behaviour (radiology reference). -------------------------------------------------------------------------- */ .doc-list-card, .np-card, .rad-center-card, .lab-card, .nh-card, .pharm-store-card, .surg-store-card{ background: var(--ppc-surface) !important; border: 1px solid var(--ppc-line) !important; border-radius: var(--ppc-radius) !important; padding: var(--ppc-pad) !important; margin: 0 !important; cursor: pointer; display: flex !important; flex-direction: column !important; min-height: var(--ppc-min-h) !important; height: 100% !important; overflow: hidden !important; transition: transform .15s, border-color .2s, box-shadow .2s !important; } .doc-list-card:hover, .np-card:hover, .rad-center-card:hover, .lab-card:hover, .nh-card:hover, .pharm-store-card:hover, .surg-store-card:hover{ border-color: var(--ppc-brand) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.35) !important; } /* ----------------------------------------------------------------------------- 3) UNIFORM IMAGE / AVATAR — same size & position (top of card, full width) -------------------------------------------------------------------------- */ .rad-center-img, .nh-card-img, .pharm-store-top, .np-top, .dlc-avatar{ width: 100% !important; height: var(--ppc-img-h) !important; min-height: var(--ppc-img-h) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--ppc-surface-2) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 8px 0 !important; position: relative !important; flex-shrink: 0 !important; } .rad-center-img img, .nh-card-img img, .pharm-store-logo img, .np-avatar img, .dlc-avatar img{ width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; } /* Icon / initial fallbacks sit centred at a uniform size */ .rad-center-img > i, .nh-card-img > i, .pharm-store-logo, .np-avatar, .dlc-avatar-fallback{ font-size: 30px !important; color: var(--ppc-brand) !important; width: auto !important; height: auto !important; background: transparent !important; } .np-avatar, .pharm-store-logo{ width: 60px !important; height: 60px !important; border-radius: 14px !important; background: var(--ppc-brand-soft) !important; font-size: 24px !important; font-weight: 800; color: var(--ppc-brand) !important; overflow: hidden !important; } /* Rate / delivery corner tags overlay the uniform image band (like rad badges) */ .np-rate, .pharm-store-delivery{ position: absolute !important; top: 6px !important; right: 6px !important; z-index: 3 !important; background: var(--ppc-brand) !important; color: #04201d !important; font-size: 10px !important; font-weight: 800 !important; padding: 3px 7px !important; border-radius: 6px !important; line-height: 1.2 !important; } @media (min-width: 768px){ .rad-center-img, .nh-card-img, .pharm-store-top, .np-top, .dlc-avatar{ height: var(--ppc-img-h-lg) !important; min-height: var(--ppc-img-h-lg) !important; } } /* ----------------------------------------------------------------------------- 4) UNIFORM BODY — name, rating, meta, badges take the same slots -------------------------------------------------------------------------- */ .rad-center-info, .nh-card-body, .pharm-store-body, .np-info, .dlc-info, .dlc-top{ padding: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } /* doctor card is horizontal by default → force vertical like the reference */ .dlc-top{ flex-direction: column !important; gap: 8px !important; } /* Uniform name */ .rad-center-name, .nh-card-name h3, .pharm-store-name, .np-info h4, .dlc-name{ font-size: 14px !important; font-weight: 700 !important; color: var(--ppc-text) !important; line-height: 1.3 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Uniform sub-text / specialty / city / address */ .nh-card-name p, .pharm-store-city, .pharm-store-hours, .np-spec, .dlc-spec{ font-size: 11.5px !important; color: var(--ppc-muted) !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Uniform rating (same colour + position for every card) */ .rad-center-rating, .nh-star, .pharm-store-rating, .np-meta, .dlc-rating{ font-size: 11.5px !important; color: var(--ppc-star) !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 5px !important; font-weight: 600; } .rad-center-rating i, .nh-star i, .pharm-store-rating i, .np-meta i, .dlc-rating i{ font-size: 11px !important; color: var(--ppc-star) !important; } .dlc-rating b{ color: var(--ppc-text) !important; } .dlc-rating span, .np-meta span{ color: var(--ppc-muted) !important; } /* Uniform verified badge */ .nh-verified, .rad-verified, .ppc-verified{ color: #22c55e !important; font-size: 13px !important; } /* Uniform chips / badges / tags -> single brand style */ .rad-badge, .nh-tag, .np-chips span, .pharm-store-delivery, .dlc-meta span{ font-size: 10.5px !important; padding: 3px 8px !important; border-radius: 6px !important; background: var(--ppc-brand-soft) !important; color: var(--ppc-brand) !important; border: 1px solid var(--ppc-brand-border) !important; font-weight: 600 !important; white-space: nowrap; } .rad-center-badges, .nh-tags, .np-chips, .dlc-meta{ display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin: 6px 0 0 0 !important; } /* ----------------------------------------------------------------------------- 5) UNIFORM ACTION — the button / view-link pinned to the bottom, same style margin-top:auto keeps it at the same vertical position on every card. -------------------------------------------------------------------------- */ .rad-center-view, .nh-card-foot, .pharm-store-view, .dlc-cta, .np-book{ margin-top: auto !important; padding-top: 10px !important; } /* Link-style actions (radiology reference, pharmacy) */ .rad-center-view, .pharm-store-view, .nh-bookbtn{ display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--ppc-brand) !important; } /* Button-style actions (doctor, nurse) → uniform full-width brand button */ .dlc-cta, .np-book{ width: 100% !important; background: var(--ppc-brand) !important; color: #04201d !important; border: none !important; border-radius: 10px !important; padding: 9px 10px !important; font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer; text-align: center; font-family: inherit; } .dlc-cta:hover, .np-book:hover{ background: var(--ppc-brand-dark) !important; } /* Hospital foot row keeps its two-part layout but with brand colours */ .nh-card-foot{ display: flex !important; justify-content: space-between !important; align-items: center !important; } .nh-beds{ font-size: 11.5px !important; color: var(--ppc-muted) !important; } .nh-beds i{ color: var(--ppc-brand) !important; } /* ----------------------------------------------------------------------------- 6) NEUTRALISE per-service colour overrides so the scheme is uniform (e.g. purple registration text, --hospital accent, distance pills, etc.) -------------------------------------------------------------------------- */ .nh-dist, .pharm-store-dist, .rad-center-rating, .pharm-store-city i, .pharm-store-hours i, .nh-card-name p i, .dlc-meta i, .np-meta .fa-location-dot{ color: var(--ppc-muted) !important; } /* Favourite / online dots keep working but sit over the uniform image */ .dlc-fav, .nh-fav{ position: absolute !important; top: 8px !important; right: 8px !important; z-index: 2; } .dlc-avail{ position: absolute !important; bottom: 6px !important; left: 6px !important; background: var(--ppc-brand) !important; color: #04201d !important; font-size: 9px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: 5px !important; z-index: 2; } .np-online{ z-index: 2; } /* Keep the doctor avatar's fav button anchored to the whole card, not avatar */ .doc-list-card{ position: relative !important; } .nh-card{ position: relative !important; }