inside buttons stay inline */
.btn a, .btn a:hover { color: inherit; text-decoration: none; }
/* Star ratings */
.rating-stars { color: #F5A623; font-size: 1.1rem; letter-spacing: 1px; }
.rating-stars .star.filled { color: #F5A623; }
.rating-stars .star { color: #D5DCE3; }
/* Reviews summary */
.reviews-summary-overview {
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 18px;
margin-bottom: 16px;
}
.reviews-avg-block {
text-align: center;
border-right: 1px solid var(--border-soft);
padding-right: 18px;
}
.reviews-avg-block .avg {
font-size: 2.4rem;
font-weight: 800;
color: var(--heading-dark);
line-height: 1;
}
@media (max-width: 768px) {
.reviews-summary-overview { grid-template-columns: 1fr; }
.reviews-avg-block { border-right: 0; border-bottom: 1px solid var(--border-soft); padding-bottom: 14px; padding-right: 0; }
}
/* Mobile contact bar */
.mobile-contact-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
background: #fff;
border-top: 1px solid var(--border-soft);
padding: 8px 12px;
box-shadow: 0 -4px 14px rgba(0,0,0,.08);
z-index: 30;
gap: 8px;
}
@media (max-width: 768px) {
.mobile-contact-bar { display: flex; }
/* ROUND 32 — only pad the body when the fixed contact bar actually exists
(provider profile). On every other page the old unconditional 60px body
padding left a blank strip UNDER the footer — the footer must touch the
bottom edge of the phone screen. */
body:has(.mobile-contact-bar) { padding-bottom: 60px; }
}
.mobile-contact-bar .btn { flex: 1; }
/* End of modern UI overhaul */
/* ---------------------------------------------------------------------
27. Customer quick-action cards
--------------------------------------------------------------------- */
.customer-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.cqa-card {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 16px 18px;
text-decoration: none;
color: inherit;
transition: transform .15s, box-shadow .15s, border-color .15s;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
}
.cqa-card:hover {
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(33,102,142,.14);
border-color: var(--brand-blue);
color: inherit;
}
.cqa-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.cqa-text { display: flex; flex-direction: column; min-width: 0; }
.cqa-text strong { color: var(--heading-dark); font-size: .98rem; margin-bottom: 2px; }
.cqa-text span { color: var(--muted); font-size: .82rem; }
/* ---------------------------------------------------------------------
28. Provider panel — campaign cards
--------------------------------------------------------------------- */
.campaign-card {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
transition: box-shadow .15s, transform .15s;
flex-wrap: wrap;
}
.campaign-card:hover { box-shadow: 0 6px 18px rgba(33,102,142,.12); transform: translateY(-1px); }
.campaign-card .cc-info { flex: 1 1 240px; min-width: 0; }
.campaign-card .cc-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
/* ---------------------------------------------------------------------
29. Provider advertising wrap
--------------------------------------------------------------------- */
.run-ad-wrap {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
overflow: hidden;
margin: 14px 0;
box-shadow: 0 4px 14px rgba(33,102,142,.06);
max-width: 900px;
}
.run-ad-header {
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
padding: 22px 26px;
}
.run-ad-header h1 { color: #fff; margin: 0 0 4px; }
.run-ad-header p { margin: 0; opacity: .9; font-size: .9rem; }
/* ---------------------------------------------------------------------
30. Admin dashboard polish
--------------------------------------------------------------------- */
.admin-layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
.admin-main {
padding: 22px 26px;
background: var(--bg-light);
min-width: 0;
overflow-x: hidden;
}
@media (max-width: 992px) {
.admin-layout { grid-template-columns: 1fr; }
}
.dash-layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
.dash-main {
padding: 22px 26px;
background: var(--bg-light);
min-width: 0;
overflow-x: hidden;
}
@media (max-width: 992px) {
.dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.admin-main, .dash-main { padding: 14px 14px 14px 14px !important; padding-top: 64px !important; }
}
/* ---------------------------------------------------------------------
31. Hero search polish (homepage)
--------------------------------------------------------------------- */
.hero-search input {
flex: 1;
border: 0;
background: transparent;
outline: none;
padding: 12px 16px;
font-size: 1rem;
font-family: inherit;
color: var(--body-text);
min-width: 0;
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search button {
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border: 0;
border-radius: 999px;
padding: 12px 22px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s;
white-space: nowrap;
}
.hero-search button:hover { background: linear-gradient(135deg, var(--brand-blue-hover), #1E5A7E); }
/* ---------------------------------------------------------------------
32. Section / hero spacing on mobile
--------------------------------------------------------------------- */
@media (max-width: 540px) {
.section { padding: 24px 0 !important; }
.section-title { font-size: 1.3rem !important; }
.hero-healthcare { padding: 28px 0 !important; }
.services-hero { padding: 32px 0 36px !important; }
}
/* End of modern UI overhaul part 2 */
/* =====================================================================
MODERN UI OVERHAUL — Part 3 (search/phone fixes)
===================================================================== */
/* ---------------------------------------------------------------------
33. Sidebar close (×) button — phone only, sits top-right of sidebar
--------------------------------------------------------------------- */
.sidebar-close-btn {
display: none;
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
transition: background .15s, transform .15s;
}
.sidebar-close-btn:hover {
background: rgba(255,255,255,.25);
transform: rotate(90deg);
}
@media (max-width: 992px) {
.sidebar-close-btn { display: inline-flex; }
/* Pad the top of the sidebar content so the close button doesn't overlap the title */
.admin-sidebar, .dash-sidebar { padding-top: 56px; }
.admin-sidebar > h3, .dash-sidebar > h3 { margin-top: 8px; }
}
/* ---------------------------------------------------------------------
34. Search page — 3 cards per row like home page
--------------------------------------------------------------------- */
.search-results {
display: grid;
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px;
}
@media (max-width: 992px) {
.search-results { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
}
@media (max-width: 540px) {
.search-results { grid-template-columns: 1fr !important; gap: 12px; }
}
/* Ensure each card is the same height — title + meta lines clamp cleanly */
.search-results .provider-card {
display: flex;
flex-direction: column;
}
.search-results .provider-card .pc-body {
flex: 1;
display: flex;
flex-direction: column;
}
.search-results .provider-card .card-cta {
margin-top: auto;
padding-top: 8px;
}
/* ---------------------------------------------------------------------
35. Header — show site wordmark on phone (un-hide)
--------------------------------------------------------------------- */
@media (max-width: 480px) {
.site-logo-text {
display: inline-flex !important;
flex-direction: column;
line-height: 1;
}
.site-logo-text .brand-wm.header {
font-size: .82rem !important;
}
.site-logo-img { height: 32px; }
.site-header .container.header-row {
padding: 6px 12px;
gap: 8px;
}
/* Shrink wordmark a bit on very tiny phones (<360px) but keep visible */
@media (max-width: 360px) {
.site-logo-text .brand-wm.header { font-size: .72rem !important; }
}
}
/* ---------------------------------------------------------------------
36. Header search bar — centered alignment
--------------------------------------------------------------------- */
.site-header .container.header-row {
justify-content: flex-start;
}
.header-search-bar {
margin-left: auto;
margin-right: auto;
flex: 1 1 320px;
}
/* When no nav-toggle / search-toggle is needed (desktop), keep search
centered between logo and nav */
@media (min-width: 993px) {
.header-search-bar {
margin-left: auto;
margin-right: 0;
}
.site-nav { margin-left: auto; }
}
/* ---------------------------------------------------------------------
37. Admin tables — never wrap rows; horizontal scroll if too wide
--------------------------------------------------------------------- */
table.data {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
table.data thead, table.data tbody {
display: table;
width: 100%;
table-layout: auto;
}
table.data thead { width: max-content; min-width: 100%; }
table.data tbody { width: max-content; min-width: 100%; }
table.data tr { display: table-row; }
table.data th, table.data td {
display: table-cell;
white-space: nowrap;
padding: 12px 16px;
}
/* Allow description / long-text cells to wrap if they have a .wrap class */
table.data td.wrap, table.data th.wrap {
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* A prettier horizontal scrollbar for tables */
table.data::-webkit-scrollbar { height: 8px; }
table.data::-webkit-scrollbar-track { background: var(--bg-light); border-radius: 4px; }
table.data::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }
table.data::-webkit-scrollbar-thumb:hover { background: var(--muted-text); }
/* ---------------------------------------------------------------------
38. Admin topbar — keep on one row, allow wrap on tiny phones
--------------------------------------------------------------------- */
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.admin-topbar {
flex-direction: row;
flex-wrap: wrap;
padding: 10px 14px;
}
.admin-topbar h1 { font-size: 1.05rem; }
}
/* ---------------------------------------------------------------------
39. Admin form-grid — never let a single input wrap to 2nd row
--------------------------------------------------------------------- */
.grid.cols-2, .grid.cols-3, .grid.cols-4 {
display: grid;
gap: 14px;
}
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
.grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
40. Admin cards layout — never wrap individual cards awkwardly
--------------------------------------------------------------------- */
.dash-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
@media (max-width: 540px) {
.dash-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
.dash-cards { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
41. Admin action-bar — keep buttons on one row, scroll if needed
--------------------------------------------------------------------- */
.form-actions, .action-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* ---------------------------------------------------------------------
42. Phone — topbar sits below the mobile menu toggle
--------------------------------------------------------------------- */
@media (max-width: 992px) {
.admin-main, .dash-main {
padding-top: 64px !important;
}
}
/* ---------------------------------------------------------------------
43. Phone — make all panel sidebars full-height with close button
--------------------------------------------------------------------- */
@media (max-width: 992px) {
.admin-sidebar, .dash-sidebar {
height: 100vh !important;
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ---------------------------------------------------------------------
44. Phone — keep header text + search toggle + nav toggle all visible
--------------------------------------------------------------------- */
@media (max-width: 768px) {
.site-header .container.header-row {
flex-wrap: nowrap;
overflow: visible;
}
.site-logo {
flex: 0 1 auto;
min-width: 0;
max-width: 60%;
overflow: hidden;
}
.site-logo-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ---------------------------------------------------------------------
45. Reduce mobile sidebar width on very narrow phones
--------------------------------------------------------------------- */
@media (max-width: 480px) {
.admin-sidebar, .dash-sidebar {
width: 85vw !important;
max-width: 320px;
}
}
/* End of modern UI overhaul part 3 */
/* =====================================================================
MODERN UI OVERHAUL — Part 4 (secondary header, footer, hero border)
===================================================================== */
/* ---------------------------------------------------------------------
46. Hide the OLD floating 3-dot toggle button everywhere
--------------------------------------------------------------------- */
.admin-menu-toggle,
.dash-menu-toggle {
display: none !important;
}
/* ---------------------------------------------------------------------
47. Secondary panel header — replaces the floating 3-dot button.
Sits at the top of admin-main / dash-main, contains:
[More Options button] [Page Title] [Actions]
The More Options button opens the sidebar (same JS handler).
--------------------------------------------------------------------- */
/* PC: hide the secondary header + More Options button entirely.
The sidebar is always visible on PC (grid layout), so they're redundant. */
.panel-secondary-header { display: none; }
.panel-more-btn { display: none; }
/* Phone/tablet (<=992px): show the secondary header + More Options button. */
@media (max-width: 992px) {
.panel-secondary-header {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
background: #fff;
border-bottom: 1px solid var(--border-soft);
box-shadow: 0 2px 6px rgba(33,102,142,.04);
position: sticky;
top: 0;
z-index: 100;
flex-wrap: wrap;
}
.panel-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border: 0;
border-radius: 10px;
font-size: .88rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: transform .12s, box-shadow .15s, background .15s;
box-shadow: 0 2px 6px rgba(33,102,142,.2);
white-space: nowrap;
flex-shrink: 0;
}
.panel-more-btn:hover {
background: linear-gradient(135deg, var(--brand-blue-hover), #1E5A7E);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(33,102,142,.3);
}
.panel-more-btn .pmb-icon {
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
}
.panel-more-btn .pmb-label {
font-size: .88rem;
}
.psh-title {
flex: 1 1 auto;
min-width: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--heading-dark);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.psh-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
}
.psh-user {
font-size: .82rem;
color: var(--muted);
white-space: nowrap;
}
}
/* The actual page content sits below the secondary header */
.admin-content,
.dash-content {
padding: 22px 26px;
}
@media (max-width: 768px) {
.admin-content, .dash-content { padding: 14px; }
}
/* On phone, the More Options button is compact (icon only) */
@media (max-width: 540px) {
.panel-secondary-header {
padding: 10px 12px;
gap: 10px;
}
.panel-more-btn {
padding: 7px 11px;
font-size: .82rem;
}
.panel-more-btn .pmb-label { display: none; }
.panel-more-btn .pmb-icon { font-size: 1.2rem; }
.psh-title { font-size: 1rem; }
.psh-user { display: none; }
}
/* Keep the panel-main scrollable area below the sticky secondary header */
.admin-main, .dash-main {
padding: 0 !important;
background: var(--bg-light);
}
/* The OLD .admin-topbar is hidden on phone (secondary header takes over),
but shown on PC as a simple page-title + actions bar. */
@media (max-width: 992px) {
.admin-topbar { display: none !important; }
}
@media (min-width: 993px) {
.admin-topbar {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 26px;
background: #fff;
border-bottom: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.admin-topbar h1 {
margin: 0;
font-size: 1.3rem;
color: var(--heading-dark);
}
}
/* ---------------------------------------------------------------------
48. Sticky footer — page always fills viewport, footer sits at bottom
---------------------------------------------------------------------
NOTE: do NOT set height:100% on . Combined with the
viewport-level overflow-x clip at the top of this file it turns
into a fixed-height scroll container, which silently breaks
position:sticky for the site header (the header scrolled away with
the page instead of staying pinned). The sticky footer only needs
the body min-height below. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header { flex-shrink: 0; }
main {
flex: 1 0 auto;
width: 100%;
}
.site-footer {
flex-shrink: 0;
margin-top: 0;
}
/* For panel pages (admin/provider/customer) the layout uses .admin-layout
and .dash-layout which set their own min-height: 100vh. We need to ensure
the footer still sits BELOW them, not inside. */
.admin-layout, .dash-layout {
min-height: auto;
}
.admin-main, .dash-main {
min-height: auto;
}
/* ---------------------------------------------------------------------
49. Hero search — gray border on /search page and home hero
--------------------------------------------------------------------- */
.hero-search {
display: grid !important;
grid-template-columns: 2fr 2fr 1fr !important;
gap: 10px !important;
border: 2px solid #B8C4CC !important;
background: #fff !important;
padding: 10px !important;
border-radius: 14px !important;
box-shadow: 0 2px 8px rgba(33,102,142,.06) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.hero-search:focus-within {
border-color: var(--brand-blue) !important;
box-shadow: 0 0 0 3px rgba(33,102,142,.14), 0 2px 8px rgba(33,102,142,.08) !important;
}
.hero-search input,
.hero-search button {
box-sizing: border-box !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* On the /search page (inside .section .container) wrap the form
nicely with a label so it's clear what the 2 inputs do */
.section .hero-search {
margin-top: 12px;
margin-bottom: 14px;
max-width: 100%;
}
/* On phone / tablet, the grid collapses to a single column so the 2
inputs + button stack vertically — no horizontal overflow. */
@media (max-width: 768px) {
.hero-search {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 14px !important;
}
.hero-search input {
width: 100% !important;
padding: 12px 14px !important;
font-size: 16px !important; /* prevents iOS auto-zoom */
border: 1px solid #E1E8EE !important;
border-radius: 10px !important;
background: #fff !important;
}
.hero-search input:focus {
border-color: var(--brand-blue) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(33,102,142,.14) !important;
}
.hero-search button {
width: 100% !important;
padding: 13px 18px !important;
font-size: 1rem !important;
border-radius: 10px !important;
}
}
/* Home hero — keep the existing unsplash background but ensure the
search box has the gray border regardless of context */
.hero-healthcare .hero-search {
background: #fff !important;
}
/* ---------------------------------------------------------------------
50. Search page — clean section heading
--------------------------------------------------------------------- */
.section > .container > h1 {
margin-bottom: 6px;
font-size: 1.8rem;
}
/* ---------------------------------------------------------------------
51. Panel pages — ensure the page can scroll naturally with sticky
secondary header at top
--------------------------------------------------------------------- */
.admin-main, .dash-main {
overflow: visible;
}
/* The sidebar z-index must stay above the sticky secondary header */
@media (max-width: 992px) {
.admin-sidebar, .dash-sidebar { z-index: 10002 !important; }
.admin-sidebar-backdrop, .dash-sidebar-backdrop { z-index: 10001 !important; }
.panel-secondary-header { z-index: 50; }
}
/* ---------------------------------------------------------------------
52. Footer — slightly tighter on phone
--------------------------------------------------------------------- */
@media (max-width: 540px) {
.site-footer { padding: 28px 0 14px; }
.footer-grid { gap: 18px; }
.footer-brand-col p { font-size: .85rem; }
.footer-bottom { font-size: .75rem; padding-top: 12px; }
}
/* End of modern UI overhaul part 4 */
/* =====================================================================
MODERN UI OVERHAUL — Part 5 (phone avatar center, overlay, admin dash)
===================================================================== */
/* ---------------------------------------------------------------------
53. Phone — center provider PROFILE PAGE cover avatar + fix verify tick
(this is the public provider profile page, NOT search result cards)
--------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Stack the cover grid vertically: avatar on top (centered), info below */
.provider-cover-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
justify-items: center !important; /* center the avatar column */
text-align: center !important;
}
/* Center the avatar wrap (contains avatar + verify tick) */
.provider-avatar-wrap {
display: flex !important;
justify-content: center !important;
align-items: center !important;
position: relative !important;
width: auto !important;
}
/* Slightly smaller avatar on phone so it fits nicely centered */
.provider-avatar {
width: 96px !important;
height: 96px !important;
font-size: 2rem !important;
}
/* Verify tick — sit at the bottom-right of the avatar, properly anchored */
.verify-tick {
position: absolute !important;
bottom: 4px !important;
right: 4px !important;
width: 28px !important;
height: 28px !important;
font-size: .82rem !important;
border-width: 2px !important;
}
/* Center the info block (name, service title, meta, actions) */
.provider-cover-info {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}
.provider-cover-name {
justify-content: center !important;
font-size: 1.4rem !important;
}
.provider-cover-meta {
justify-content: center !important;
}
.provider-cover-actions {
justify-content: center !important;
}
/* The overlay itself — center its flex contents */
.provider-cover-overlay {
align-items: flex-end !important; /* keep content at bottom of cover */
}
.provider-cover-inner {
text-align: center !important;
}
.cover-crumbs {
justify-content: center !important;
text-align: center !important;
}
}
/* On very small phones, make the avatar a bit smaller still */
@media (max-width: 480px) {
.provider-avatar {
width: 84px !important;
height: 84px !important;
font-size: 1.8rem !important;
}
.verify-tick {
width: 24px !important;
height: 24px !important;
font-size: .72rem !important;
bottom: 2px !important;
right: 2px !important;
}
.provider-cover-name { font-size: 1.2rem !important; }
}
/* ---------------------------------------------------------------------
54. Phone — fix header-search-overlay going out of screen
--------------------------------------------------------------------- */
@media (max-width: 768px) {
.header-search-overlay {
position: fixed !important; /* fixed to viewport, not header */
top: var(--header-h, 64px) !important; /* just below the header */
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
transform: none !important; /* kill the translateX(-50%) */
border-radius: 14px !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
}
.header-search-overlay input {
width: 100% !important;
min-width: 0 !important;
font-size: 16px !important; /* prevents iOS auto-zoom */
padding: 10px 8px !important;
}
.header-search-overlay button {
flex-shrink: 0 !important;
padding: 9px 14px !important;
font-size: .85rem !important;
}
}
@media (max-width: 480px) {
.header-search-overlay {
left: 6px !important;
right: 6px !important;
padding: 6px 8px !important;
}
}
/* ---------------------------------------------------------------------
55. Admin sidebar — add Dashboard link at the very top
--------------------------------------------------------------------- */
/* (markup change in admin/index.php — no CSS needed, the existing
.admin-sidebar a styles cover it) */
/* ---------------------------------------------------------------------
56. PC — make hero-search input borders clearly visible (ash color)
--------------------------------------------------------------------- */
.hero-search input {
border: 1px solid #B8C4CC !important; /* ash gray, visible on white */
background: #fff !important;
}
.hero-search input:focus {
border-color: var(--brand-blue) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(33,102,142,.14) !important;
}
.hero-search button {
border: 0 !important;
}
/* End of modern UI overhaul part 5 */
/* =====================================================================
MODERN UI OVERHAUL — Part 6 (reviews carousel)
===================================================================== */
/* ---------------------------------------------------------------------
Reviews carousel — horizontal sliding, one review per view.
Works on PC, tablet, and phone. Swipe + prev/next buttons + dots.
--------------------------------------------------------------------- */
.reviews-carousel {
position: relative;
display: flex;
align-items: stretch;
gap: 8px;
margin-top: 8px;
}
/* Navigation buttons (prev / next) */
.reviews-nav-btn {
flex: 0 0 44px;
background: #fff;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 50%;
color: var(--brand-blue, #21668E);
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s, transform .12s;
box-shadow: 0 2px 6px rgba(33,102,142,.08);
align-self: center;
padding: 0;
height: 44px;
width: 44px;
}
.reviews-nav-btn:hover:not(:disabled) {
background: var(--brand-blue, #21668E);
color: #fff;
border-color: var(--brand-blue, #21668E);
transform: scale(1.06);
}
.reviews-nav-btn:disabled {
opacity: .35;
cursor: not-allowed;
}
/* Viewport — clips the sliding track to one review at a time */
.reviews-viewport {
flex: 1 1 auto;
overflow: hidden;
border-radius: 14px;
min-width: 0;
}
/* Track — holds all review slides horizontally, slides via transform */
.reviews-track {
display: flex;
transition: transform .35s ease;
height: 100%;
}
/* Each slide — one review, takes full viewport width */
.review-slide {
flex: 0 0 100%;
min-width: 0;
padding: 0 4px;
box-sizing: border-box;
}
/* The review card itself */
.review-item {
height: 100%;
padding: 18px 20px;
background: #fff;
border: 1px solid #eef2f6;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(33,102,142,.06);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.review-item .review-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.review-item .review-author {
font-weight: 700;
color: var(--heading-dark, #173B4F);
font-size: 1rem;
}
.review-item .review-stars {
display: inline-flex;
gap: 1px;
}
.review-item .review-date {
margin-left: auto;
font-size: .8rem;
color: var(--muted, #888);
white-space: nowrap;
}
.review-item .review-title {
display: block;
margin: 4px 0 8px;
font-size: 1.02rem;
color: var(--heading-dark, #173B4F);
}
.review-item .review-body {
margin: 6px 0 0;
color: var(--body-text, #4B6470);
line-height: 1.6;
font-size: .92rem;
flex: 1;
overflow-wrap: break-word;
word-break: break-word;
}
/* Carousel meta — dots + counter, below the carousel */
.reviews-carousel-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 14px;
flex-wrap: wrap;
}
.reviews-dots {
display: flex;
gap: 6px;
align-items: center;
}
.review-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 0;
background: #D5DCE3;
cursor: pointer;
padding: 0;
transition: background .15s, transform .15s, width .15s;
}
.review-dot:hover { background: var(--brand-blue, #21668E); transform: scale(1.2); }
.review-dot.active {
background: var(--brand-blue, #21668E);
width: 24px;
border-radius: 999px;
}
.reviews-counter {
font-size: .82rem;
color: var(--muted, #888);
font-weight: 600;
white-space: nowrap;
}
.reviews-counter #reviewCurrent {
color: var(--brand-blue, #21668E);
font-weight: 700;
}
/* Old .reviews-list (vertical) — neutralize in case it's still referenced */
.reviews-list { display: none; }
/* Provider panel — vertical reviews list (provider/reviews page).
Uses its own class because legacy .reviews-list is hidden above. */
.provider-reviews-list {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Review body clamp — long review bodies (legacy 2000-char reviews) are
clamped to a fixed height with a fade-out gradient and a "Read more"
button, so every review card fits the profile page layout. */
.review-body.review-body-clamp {
position: relative;
max-height: 132px;
overflow: hidden;
}
.review-body.review-body-clamp.clamped::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 44px;
background: linear-gradient(rgba(255,255,255,0), #ffffff 82%);
pointer-events: none;
}
.review-body.review-body-clamp.expanded {
max-height: none;
overflow: visible;
}
.review-body.review-body-clamp.expanded::after { display: none; }
/* "Read more / Show less" toggle button under a clamped review */
.review-read-more {
align-self: flex-start;
margin-top: 6px;
background: none;
border: none;
padding: 2px 0;
color: var(--brand-blue, #21668E);
font-size: .85rem;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
}
.review-read-more:hover { text-decoration: underline; }
/* Summary bar — responsive tweaks */
.reviews-summary-bar {
flex-wrap: wrap;
gap: 10px;
}
.reviews-summary-count {
margin-left: auto;
font-size: .85rem;
}
/* ---------------------------------------------------------------------
Phone responsive — carousel tweaks
--------------------------------------------------------------------- */
@media (max-width: 768px) {
.reviews-carousel {
gap: 6px;
}
.reviews-nav-btn {
flex: 0 0 38px;
width: 38px;
height: 38px;
font-size: 1.5rem;
}
.review-item {
padding: 14px 16px;
}
.review-item .review-header {
gap: 8px;
}
.review-item .review-author {
font-size: .92rem;
}
.review-item .review-date {
font-size: .72rem;
}
.review-item .review-body {
font-size: .88rem;
}
.reviews-summary-bar {
padding: 10px 12px;
font-size: .9rem;
}
.reviews-summary-count {
width: 100%;
text-align: center;
margin-left: 0;
}
}
@media (max-width: 540px) {
.reviews-carousel {
/* On very small phones, the nav buttons sit outside the viewport */
gap: 4px;
}
.reviews-nav-btn {
flex: 0 0 34px;
width: 34px;
height: 34px;
font-size: 1.3rem;
}
.review-item {
padding: 12px 14px;
border-radius: 12px;
}
.review-item .review-header {
/* Stack: author+stars on top, date below */
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.review-item .review-date {
margin-left: 0;
}
.reviews-carousel-meta {
gap: 10px;
margin-top: 10px;
}
.review-dot {
width: 7px;
height: 7px;
}
.review-dot.active { width: 20px; }
}
/* On very tiny phones (<=360px), keep buttons but shrink slightly */
@media (max-width: 360px) {
.reviews-nav-btn {
flex: 0 0 30px;
width: 30px;
height: 30px;
font-size: 1.2rem;
}
.review-item {
padding: 10px 12px;
}
}
/* End of modern UI overhaul part 6 */
/* =====================================================================
MODERN UI OVERHAUL — Part 7 (admin provider view + campaign create fix)
===================================================================== */
/* ---------------------------------------------------------------------
57. Admin provider view — gallery keyword display + responsive hero
--------------------------------------------------------------------- */
.admin-gallery-grid .agt {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius-sm, 10px);
overflow: hidden;
border: 1px solid var(--border, #DCECF2);
background: var(--light-blue, #F1FAFD);
}
.admin-gallery-grid .agt img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-gallery-grid .agt-kw {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 6px 8px;
background: linear-gradient(180deg, transparent, rgba(15,23,42,.75));
display: flex;
flex-wrap: wrap;
gap: 3px;
max-height: 50%;
overflow: hidden;
}
.admin-gallery-grid .agt-kw .tag.sm {
font-size: .68rem;
padding: 2px 6px;
background: rgba(255,255,255,.9);
color: var(--brand-blue, #21668E);
border: 0;
}
/* Admin provider hero — responsive on phone */
@media (max-width: 768px) {
.admin-provider-hero {
grid-template-columns: 64px 1fr !important;
padding: 16px 18px !important;
gap: 12px !important;
}
.admin-provider-hero .aph-avatar {
width: 64px !important;
height: 64px !important;
font-size: 1.4rem !important;
}
.admin-provider-hero .aph-info h2 {
font-size: 1.1rem !important;
}
.admin-provider-hero .aph-info .aph-meta {
font-size: .82rem !important;
}
.admin-provider-hero .aph-status {
grid-column: 1 / -1 !important;
text-align: left !important;
}
}
@media (max-width: 540px) {
.admin-provider-hero {
grid-template-columns: 56px 1fr !important;
padding: 14px 14px !important;
}
.admin-provider-hero .aph-avatar {
width: 56px !important;
height: 56px !important;
font-size: 1.2rem !important;
}
.admin-provider-hero .aph-info h2 {
font-size: 1rem !important;
}
.admin-gallery-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Admin media grid — responsive */
@media (max-width: 540px) {
.admin-media-grid { grid-template-columns: 1fr !important; }
}
/* Admin docs table — horizontal scroll on phone (inherits from global
table.data rule, but ensure the action buttons don't wrap weirdly) */
.admin-docs-table .doc-actions {
white-space: nowrap;
}
.admin-docs-table .doc-name-cell {
white-space: normal;
}
/* ---------------------------------------------------------------------
58. Campaign create — use full panel width like other pages
--------------------------------------------------------------------- */
.run-ad-wrap {
max-width: 100% !important;
width: 100% !important;
margin: 0 0 18px 0 !important;
}
/* On phone, tighten the run-ad-header padding */
@media (max-width: 768px) {
.run-ad-header {
padding: 18px 16px !important;
}
.run-ad-header h1 {
font-size: 1.3rem !important;
}
.run-ad-header p {
font-size: .85rem !important;
}
}
@media (max-width: 540px) {
.run-ad-header {
padding: 16px 14px !important;
}
.run-ad-header h1 {
font-size: 1.15rem !important;
}
.form-card {
padding: 0 !important;
margin-bottom: 14px !important;
}
.form-card > *:not(h3) {
margin-left: 14px !important;
margin-right: 14px !important;
}
.form-card > h3 {
padding: 12px 14px !important;
font-size: .95rem !important;
}
.form-card h3 .fc-num {
width: 26px !important;
height: 26px !important;
font-size: .8rem !important;
}
.placement-options {
grid-template-columns: 1fr !important;
}
.ad-image-upload {
grid-template-columns: 1fr !important;
}
.ad-image-preview {
width: 100% !important;
height: 180px !important;
}
.location-combo {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.budget-presets {
flex-wrap: wrap;
gap: 6px;
}
.budget-pill {
padding: 5px 12px !important;
font-size: .8rem !important;
}
}
/* End of modern UI overhaul part 7 */
/* =====================================================================
MODERN UI OVERHAUL — Part 8 (campaign create form-card fixes)
Ensures all form-card content has proper padding, grid gaps, and
responsive stacking. Inputs/selects/date pickers get internal padding
so typed text doesn't touch input borders.
===================================================================== */
/* ---------------------------------------------------------------------
59. Form-card — ensure global box-sizing + consistent spacing
--------------------------------------------------------------------- */
.form-card,
.form-card *,
.form-card *::before,
.form-card *::after {
box-sizing: border-box;
}
/* The form-card itself has NO padding (header stretches edge-to-edge).
All body content gets 24px horizontal margins (set above).
Here we ensure the vertical rhythm is consistent. */
.form-card > *:not(h3) {
margin-top: 16px;
}
.form-card > *:not(h3):first-of-type {
margin-top: 22px; /* a bit more breathing room after the header */
}
.form-card > *:not(h3):last-child {
margin-bottom: 24px;
}
/* ---------------------------------------------------------------------
60. Placement options — proper gap + responsive
--------------------------------------------------------------------- */
.form-card .placement-options {
gap: 14px;
}
.placement-card {
padding: 16px 16px !important;
}
/* ---------------------------------------------------------------------
61. Location combo — proper gap on desktop, stacks on phone
--------------------------------------------------------------------- */
.form-card .location-combo {
gap: 14px;
}
.location-combo .form-row {
margin: 0 !important;
}
/* ---------------------------------------------------------------------
62. Budget presets — comfortable gaps
--------------------------------------------------------------------- */
.form-card .budget-presets {
gap: 8px;
margin-top: 10px;
}
/* ---------------------------------------------------------------------
63. Grid inside form-card — proper column gaps, stack on phone
--------------------------------------------------------------------- */
.form-card .grid.cols-2,
.form-card .grid.cols-3,
.form-card .grid.cols-4 {
gap: 16px;
margin-top: 4px;
}
.form-card .grid .form-row {
margin: 0 !important;
}
/* ---------------------------------------------------------------------
64. Inputs / selects / date pickers — internal padding so typed
text doesn't touch the input borders
--------------------------------------------------------------------- */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="number"],
.form-card input[type="url"],
.form-card input[type="tel"],
.form-card input[type="date"],
.form-card input[type="file"],
.form-card select,
.form-card textarea {
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
font-size: .95rem;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 10px;
background: #fff;
color: var(--body-text, #4B6470);
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.form-card input[type="date"] {
padding: 10px 14px;
min-height: 44px;
}
.form-card select {
padding-right: 38px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
outline: none;
border-color: var(--brand-blue, #21668E);
box-shadow: 0 0 0 3px rgba(33,102,142,.14);
}
.form-card input::placeholder,
.form-card textarea::placeholder {
color: var(--muted-text, #71848D);
}
/* Labels inside form-card */
.form-card label {
display: block;
font-weight: 600;
color: var(--heading-dark, #173B4F);
margin-bottom: 6px;
font-size: .9rem;
}
.form-card .hint {
font-size: .82rem;
color: var(--muted-text, #71848D);
margin-top: 5px;
line-height: 1.4;
}
/* ---------------------------------------------------------------------
65. Form actions row — proper spacing for Cancel / Save buttons
--------------------------------------------------------------------- */
.form-card .form-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: 20px !important;
padding-top: 16px;
border-top: 1px solid var(--border-soft, #DCECF2);
}
/* ---------------------------------------------------------------------
66. Phone — stack all grids to 1 column, comfortable gaps
--------------------------------------------------------------------- */
@media (max-width: 768px) {
.form-card .placement-options {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.form-card .placement-card {
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
}
.form-card .grid.cols-2,
.form-card .grid.cols-3,
.form-card .grid.cols-4 {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.form-card .location-combo {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.form-card .ad-image-upload {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="number"],
.form-card input[type="url"],
.form-card input[type="tel"],
.form-card input[type="date"],
.form-card input[type="file"],
.form-card select,
.form-card textarea {
font-size: 16px !important; /* prevents iOS auto-zoom */
padding: 12px 14px !important;
}
}
@media (max-width: 540px) {
.form-card > *:not(h3) {
margin-left: 14px !important;
margin-right: 14px !important;
}
.form-card .placement-options,
.form-card .ad-image-upload,
.form-card .location-combo,
.form-card .grid,
.form-card .budget-presets,
.form-card .form-actions,
.form-card .auto-link-note {
margin-left: 14px !important;
margin-right: 14px !important;
}
.form-card > h3 {
padding: 12px 14px !important;
font-size: .92rem !important;
}
.form-card h3 .fc-num {
width: 24px !important;
height: 24px !important;
font-size: .78rem !important;
}
.form-card .form-actions {
flex-direction: column;
}
.form-card .form-actions .btn {
width: 100%;
}
}
/* End of modern UI overhaul part 8 */
/* =====================================================================
MODERN UI OVERHAUL — Part 9 (campaign create edge-case fixes)
Fixes the remaining border-touching issues:
1. .placement-options inside .form-row (double margin)
2. .hint after .location-combo touching border
3. .form-actions (Cancel/Save/Run Ad) outside form-card, touching
.run-ad-wrap edges
===================================================================== */
/* ---------------------------------------------------------------------
67. Placement-options inside a form-row — REMOVE the extra 24px
margin so it doesn't double up with the form-row's margin.
The form-row already provides the 24px side margin; the
placement-options just needs to fill the form-row's content area.
--------------------------------------------------------------------- */
.form-card .form-row .placement-options,
.form-card .form-row .location-combo,
.form-card .form-row .grid,
.form-card .form-row .budget-presets,
.form-card .form-row .ad-image-upload {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ---------------------------------------------------------------------
68. Hint text inside form-card — ensure it has proper margins
(it's a direct child of form-card in some sections)
--------------------------------------------------------------------- */
.form-card > .hint,
.form-card .form-row + .hint,
.form-card .location-combo + .hint,
.form-card .grid + .hint {
margin-left: 24px !important;
margin-right: 24px !important;
margin-top: 10px;
margin-bottom: 0;
box-sizing: border-box;
}
/* ---------------------------------------------------------------------
69. Form-actions OUTSIDE form-card (the Cancel/Save/Run Ad row)
It sits directly inside .run-ad-wrap, which has overflow:hidden
and no padding. Give the form-actions proper horizontal padding
so the buttons don't touch the container edges.
--------------------------------------------------------------------- */
.run-ad-wrap > form > .form-actions,
.run-ad-wrap .form-actions {
padding: 18px 24px;
margin: 0;
border-top: 1px solid var(--border-soft, #DCECF2);
background: #fff;
box-sizing: border-box;
}
/* On phone, tighten the form-actions padding */
@media (max-width: 768px) {
.run-ad-wrap > form > .form-actions,
.run-ad-wrap .form-actions {
padding: 14px 16px;
}
}
@media (max-width: 540px) {
.run-ad-wrap > form > .form-actions,
.run-ad-wrap .form-actions {
padding: 12px 14px;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.run-ad-wrap .form-actions > * {
width: 100%;
}
.run-ad-wrap .form-actions > div {
display: flex !important;
gap: 8px !important;
}
.run-ad-wrap .form-actions > div > * {
flex: 1;
}
}
/* ---------------------------------------------------------------------
70. Ensure the run-ad-wrap form has no extra margins that push
the form-actions out of alignment
--------------------------------------------------------------------- */
.run-ad-wrap > form {
margin: 0;
padding: 0;
}
/* End of modern UI overhaul part 9 */
/* =====================================================================
MODERN UI OVERHAUL — Part 10 (inner container for complex sections)
Adds a visible inner box around the Ad Placement + Ad Content fields
and the Location & Pin Code section, giving them visual separation
from the simpler form fields. Works on all screens but especially
useful on phone where the sections are taller.
===================================================================== */
/* ---------------------------------------------------------------------
71. .form-card-inner — inner container inside a form-card
Sits below the header bar, has its own background, border,
border-radius, and padding. Contains related form-rows grouped
together (e.g., all the Ad Content fields, or the Location fields).
Visible on ALL screens (PC + tablet + phone).
--------------------------------------------------------------------- */
.form-card .form-card-inner {
background: #F1F5F9;
border: 1px solid #CBD5E1;
border-radius: 12px;
padding: 20px 20px;
margin: 16px 24px 22px 24px !important;
box-sizing: border-box;
display: block;
box-shadow: inset 0 1px 3px rgba(15,23,42,.04);
}
/* On phone, tighten the inner container padding */
@media (max-width: 768px) {
.form-card .form-card-inner {
padding: 14px 14px;
margin: 14px 16px 18px 16px !important;
border-radius: 10px;
}
}
@media (max-width: 540px) {
.form-card .form-card-inner {
padding: 12px 12px;
margin: 12px 14px 16px 14px !important;
border-radius: 10px;
}
}
/* The first form-row inside the inner container doesn't need a top margin
(the container's padding provides the spacing) */
.form-card .form-card-inner > .form-row:first-child,
.form-card .form-card-inner > p:first-child {
margin-top: 0;
}
/* The last form-row inside the inner container doesn't need a bottom margin */
.form-card .form-card-inner > .form-row:last-child,
.form-card .form-card-inner > .hint:last-child {
margin-bottom: 0;
}
/* Ensure form-rows inside the inner container have proper vertical spacing */
.form-card .form-card-inner > .form-row {
margin-top: 14px;
margin-bottom: 14px;
}
.form-card .form-card-inner > .form-row:first-child {
margin-top: 0;
}
.form-card .form-card-inner > .form-row:last-child {
margin-bottom: 0;
}
/* The location-combo inside the inner container — remove its own margins
since the inner container provides the padding */
.form-card .form-card-inner > .location-combo {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* The hint inside the inner container — remove its own side margins */
.form-card .form-card-inner > .hint {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 10px;
}
/* The description paragraph inside the inner container */
.form-card .form-card-inner > p.text-muted {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* End of modern UI overhaul part 10 */
/* =====================================================================
57. Provider profile — UI corrections
(a) Cover action buttons: correct hover states. The modern .btn:hover
(gradient bg + #fff text) tied/overrode the cover-specific rules and
made "Unlock to see WhatsApp, Email & Website" white-on-white.
(b) Breadcrumb pinned to the LOWER side of the cover banner (inside
the banner, below the avatar/info grid — phone + desktop).
(c) Reviews carousel: slides sized to the viewport (track has no inline
N*100% width any more; JS steps -100% per slide).
===================================================================== */
/* (a) Cover action buttons — full normal + hover states */
.provider-cover-actions .btn {
background: rgba(255,255,255,.96);
color: var(--brand-blue);
border: 1px solid rgba(255,255,255,.9);
box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
.provider-cover-actions .btn:hover {
background: var(--brand-blue);
color: #fff;
border-color: var(--brand-blue);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15,23,42,.30);
}
.provider-cover-actions .btn:active { transform: translateY(0); }
.provider-cover-actions .btn.secondary {
background: rgba(255,255,255,.92);
color: var(--brand-blue);
border: 1px solid rgba(255,255,255,.75);
}
.provider-cover-actions .btn.secondary:hover {
background: #fff;
color: var(--brand-blue-hover);
border-color: var(--brand-blue);
box-shadow: 0 4px 12px rgba(15,23,42,.22);
}
.provider-cover-actions .btn-whatsapp,
.provider-cover-actions .btn.btn-whatsapp {
background: #25D366;
color: #fff;
border: 1px solid #25D366;
}
.provider-cover-actions .btn-whatsapp:hover,
.provider-cover-actions .btn.btn-whatsapp:hover {
background: #1da851;
color: #fff;
border-color: #1da851;
box-shadow: 0 6px 16px rgba(37,211,102,.35);
}
/* (b) Breadcrumb — LOWER side of the cover banner (phone + desktop).
Sits inside the dark cover overlay, under the avatar/info grid,
as a translucent white pill so it reads over any cover photo. */
.provider-page-crumbs {
margin: 22px 0 0;
padding: 10px 16px 12px;
background: rgba(15, 23, 42, .40);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 10px;
color: rgba(255, 255, 255, .85);
font-size: .85rem;
overflow-wrap: break-word;
word-break: break-word;
}
.provider-page-crumbs a { color: #fff; font-weight: 600; }
.provider-page-crumbs a:hover { color: #CFE8F7; text-decoration: underline; }
.provider-page-crumbs span { color: #fff; font-weight: 600; }
@media (max-width: 768px) {
.provider-page-crumbs { text-align: center; margin-top: 16px; }
}
/* (c) Reviews carousel — slides take exactly one viewport each.
The track no longer carries an inline N*100% width: it stays
viewport-wide and slides overflow to the right (clipped by the
overflow:hidden viewport). translateX(-100%) then steps one slide. */
.reviews-track { width: 100%; }
.review-slide { flex: 0 0 100%; }
/* =====================================================================
58. Review "Read more" POPUP — full review with X (close) button
Tapping "Read more" on a clamped review opens this modal: the
complete review (author, stars, date, title, full text), scrollable
when long. Close via the round X button, backdrop click or Esc.
Above every other UI layer (sidebars sit at 10002).
===================================================================== */
.review-modal {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10004;
display: none;
}
.review-modal.open { display: block; }
.review-modal-backdrop {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(15, 23, 42, .58);
}
.review-modal-dialog {
position: relative;
margin: 6vh auto 0;
width: min(600px, calc(100vw - 40px));
max-height: 84vh;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(15, 23, 42, .45);
overflow: hidden;
animation: reviewModalIn .18s ease-out;
}
@keyframes reviewModalIn {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* Round X (cross) close button — top-right, always visible while open */
.review-modal-close {
flex: 0 0 auto;
align-self: flex-end;
margin: 12px 12px 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-soft, #DCECF2);
background: #F2F8FC;
color: var(--brand-blue, #21668E);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.review-modal-close:hover {
background: var(--brand-blue, #21668E);
color: #fff;
border-color: var(--brand-blue, #21668E);
transform: rotate(90deg);
}
.review-modal-close:focus-visible {
outline: 3px solid rgba(33, 102, 142, .35);
outline-offset: 2px;
}
.review-modal-scroll {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 24px 24px;
}
/* Lock page scroll while the popup is open */
body.review-modal-open { overflow: hidden; }
/* The review card rendered inside the popup — flat, no shadow, full width */
.review-modal-content .review-item {
border: none;
box-shadow: none;
padding: 4px 0 0;
height: auto;
}
.review-modal-content .review-item .review-body {
max-height: none;
overflow: visible;
}
/* Phone — popup nearly full-width, bigger X touch target */
@media (max-width: 540px) {
.review-modal-dialog {
margin: 3vh auto 0;
width: calc(100vw - 24px);
max-height: 88vh;
border-radius: 14px;
}
.review-modal-close { width: 44px; height: 44px; margin: 10px 10px 0; }
.review-modal-scroll { padding: 4px 18px 18px; }
.review-modal-content .review-item { padding: 2px 0 0; }
}
/* End of modern UI overhaul part 11 */
/* =====================================================================
59. ADMIN TABLES — text / column overflow fixes
---------------------------------------------------------------------
Problem: section 37 forced `white-space: nowrap` on every table.data
cell and `width: max-content` on thead/tbody, so one long email,
URL or business name stretched a table to 30,000+ px. The text went
far outside the screen and outside its column, and every following
column was pushed out of view.
Fix:
- table.data renders as ONE real table again (thead + tbody share the
same column grid, so headers always line up with their data)
- cells wrap text instead of nowrap; long unbreakable tokens
(emails, URLs, hashes) may break anywhere
- detail tables (label/value rows, no thead): labels stay on one line
and the label column shrinks; values wrap
- short code columns (status / points / actions / phone) stay on
one line where there is room
- on phones the table element becomes a horizontal scroll container
(rows stay aligned — the browser wraps the row groups in one
anonymous table inside it), so wide lists scroll instead of
pushing text off the screen
===================================================================== */
table.data {
display: table;
width: 100%;
table-layout: auto;
white-space: normal;
overflow-x: visible;
border-collapse: collapse;
}
table.data thead,
table.data tbody {
display: table-row-group;
width: auto;
min-width: 0;
table-layout: auto;
}
table.data tr { display: table-row; }
table.data th,
table.data td {
display: table-cell;
white-space: normal;
vertical-align: top;
min-width: 0; /* neutralizes old `.data th/td {min-width:100px}` phone rule */
overflow-wrap: anywhere; /* emails / URLs / hashes break when needed */
word-break: break-word; /* legacy fallback */
}
/* Detail tables: | Label | value |
|---|
(no thead) */
table.data tbody th {
white-space: nowrap;
width: 1%; /* shrink-to-fit label column */
padding-right: 16px;
}
/* Short single-token columns in list tables keep one line */
table.data th.col-phone, table.data td.col-phone,
table.data th.col-points, table.data td.col-points,
table.data th.col-status, table.data td.col-status,
table.data th.col-actions, table.data td.col-actions,
table.data th.doc-actions, table.data td.doc-actions {
white-space: nowrap;
}
/* Providers list min-widths only apply where there is room */
@media (max-width: 900px) {
.admin-providers-table .col-business,
.admin-providers-table .col-service,
.admin-providers-table .col-location { min-width: 0; }
}
/* Phone — wide tables scroll inside their own frame. display:block +
overflow-x:auto makes the table element a scroll container; the row
groups keep their default table display, so the browser wraps them
in ONE anonymous table → headers always align with data. Every cell
gets a minimum width floor so columns stay readable (scroll, never
crush). Verified: sandbox replica + live page. */
@media (max-width: 640px) {
table.data {
display: block;
overflow-x: auto;
white-space: normal;
-webkit-overflow-scrolling: touch;
}
table.data thead,
table.data tbody { display: table-row-group; width: auto; min-width: 0; }
table.data tr { display: table-row; }
table.data th,
table.data td {
display: table-cell;
padding: 8px 9px;
font-size: .84rem;
min-width: 92px; /* readable column floor → scroll, not crush */
}
/* the providers-table col rules above carry higher specificity —
re-assert the floor with matching specificity */
table.data.admin-providers-table th,
table.data.admin-providers-table td { min-width: 92px; }
table.data tbody th { min-width: 0; } /* detail labels: 1% shrink rule above */
table.data th.col-status, table.data td.col-status,
table.data th.col-points, table.data td.col-points { white-space: normal; }
.admin-row-biz-name { max-width: 150px; }
}
/* Tag pills with very long keywords never blow out their container */
.tag,
.profile-keyword-cloud .tag,
.tag-list .tag {
max-width: 100%;
overflow-wrap: anywhere;
}
/* =====================================================================
60. AVATAR CIRCLES — uploaded images always centered
---------------------------------------------------------------------
A `background:` shorthand declared AFTER background-size/position
(see the original .cp-avatar rule) resets them to auto / 0% 0%, so
an uploaded photo was drawn at natural size anchored to the TOP-LEFT
corner of the circle — it looked off-center / "not centralized".
These late declarations win the cascade for every circle in the app
and pin the image to cover + center.
===================================================================== */
.provider-avatar,
.provider-card .pc-avatar,
.provider-card.v2 .pc-cover-block .pc-avatar-mini,
.profile-cover-inner .pc-avatar-large,
.pc-avatar-large,
.cp-avatar,
.admin-provider-hero .aph-avatar,
.admin-provider-row-avatar,
.admin-media-box .media-frame,
.image-preview-tile,
.gallery-thumb {
background-size: cover;
background-position: center;
}
/* Provider profile-edit: the avatar preview is a circle so the provider
sees exactly how the uploaded image is centered in the round frame. */
.image-preview-tile.avatar-circle {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 8px; /* centered in its form column */
background-color: var(--bg-light);
}
.image-preview-tile.avatar-circle.empty {
display: flex;
align-items: center;
justify-content: center;
font-size: .8rem;
text-align: center;
}
/* End of sections 59 + 60 */
/* =====================================================================
61. Meta pills / info headers — long tokens never push out of screen
(a 100-char email in a pill made the customer profile 30px wider
than the phone screen)
===================================================================== */
.cp-meta-pill,
.pc-meta-pill,
.profile-cover-inner .pc-meta-pill {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cp-info h2,
.pc-info-block h2 {
overflow-wrap: anywhere;
word-break: break-word;
}
/* End of section 61 */
/* =====================================================================
62. ADMIN TABLES — long text fits every viewport & font size
---------------------------------------------------------------------
Problem remaining after §59: on desktop (≥640px) the providers list
still exceeded the content area. Cause chain:
- fixed px min-widths on .col-business/.col-service/.col-location
plus nowrap code columns (phone/status/points/actions) whose
widths grow with the font size (browser text-size setting)
- .admin-main is overflow:visible (§51 — required by the sticky
secondary header), so the over-wide table dragged the WHOLE PAGE
off-screen: the Points/Actions columns became unreachable and
the row text ran past the right screen edge.
Fix v2 (container scroll frame — cross-browser safe):
- table.data stays a REAL table (display: table). The browser
computes ONE column grid for thead + tbody natively, so the
header cells ALWAYS line up with the data cells in every
browser (Chrome, Firefox, Safari, Edge). A display:block table
relies on anonymous-table fixup which not all engines share,
and headers can drift out of alignment with the body.
- The horizontal scroll frame is the table's CONTAINER: every
admin table is a direct child of .admin-content, .dash-content
or .card (verified across all pages). When a table's minimum
width exceeds the available space (big fonts, many columns),
the CONTAINER scrolls — the page itself never grows wider and
text never leaves the screen.
- providers column px floors neutralized at every size (cells wrap)
- .admin-row-biz-name cap is font-relative (ch) so the business
column scales with the text size instead of a fixed 220px
===================================================================== */
table.data {
display: table;
table-layout: auto;
width: 100%;
border-collapse: collapse;
}
table.data thead,
table.data tbody {
display: table-row-group;
width: auto;
min-width: 0;
}
table.data tr { display: table-row; }
table.data th,
table.data td {
display: table-cell;
min-width: 0;
}
/* Scroll frames = the tables' parent containers (admin + portals) */
.admin-content,
.dash-content,
.admin-content .card,
.dash-content .card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Slim styled scrollbar for the scroll frames */
.admin-content::-webkit-scrollbar,
.dash-content::-webkit-scrollbar,
.admin-content .card::-webkit-scrollbar,
.dash-content .card::-webkit-scrollbar { height: 8px; }
.admin-content::-webkit-scrollbar-track,
.dash-content::-webkit-scrollbar-track,
.admin-content .card::-webkit-scrollbar-track,
.dash-content .card::-webkit-scrollbar-track {
background: var(--bg-light);
border-radius: 4px;
}
.admin-content::-webkit-scrollbar-thumb,
.dash-content::-webkit-scrollbar-thumb,
.admin-content .card::-webkit-scrollbar-thumb,
.dash-content .card::-webkit-scrollbar-thumb {
background: var(--border-soft);
border-radius: 4px;
}
.admin-content::-webkit-scrollbar-thumb:hover,
.dash-content::-webkit-scrollbar-thumb:hover,
.admin-content .card::-webkit-scrollbar-thumb:hover,
.dash-content .card::-webkit-scrollbar-thumb:hover { background: var(--muted-text); }
/* Providers list: no fixed px floors at any viewport — the business
column shrinks via the 16ch name cap; cells wrap (§59); only
genuinely-too-wide tables scroll. */
.admin-providers-table .col-business { min-width: 0; }
/* Table headers are short single-line labels (Name / Type / City /
Actions...). Never wrap them mid-word ("TY / PE") — a column can
never be squeezed below its own header's word width; if the sum of
the column minimums exceeds the container, the container scrolls
instead of crushing the columns. */
table.data thead th {
white-space: nowrap;
overflow-wrap: normal;
word-break: keep-all;
}
/* Font-scaled floors keep the text columns from crushing to one-word
slivers at big font sizes (ch grows with the text size). */
.admin-providers-table .col-service,
.admin-providers-table .col-location { min-width: 10ch; }
/* Business-name truncation cap scales with the font, not fixed px */
.admin-row-biz-name { max-width: 16ch; }
/* Detail tables (label/value): the nowrap label may not exceed the
row's width when the font is very large — wrap it as a fallback */
table.data tbody th {
max-width: 220px;
overflow-wrap: anywhere;
}
@media (max-width: 640px) {
.admin-row-biz-name { max-width: 16ch; }
/* Re-assert the §59 phone cell floors AFTER the §62 base rules above
(same specificity — later wins): readable columns on phones, and
the container (.admin-content / .card) scrolls horizontally. */
table.data th,
table.data td { min-width: 92px; }
table.data.admin-providers-table th,
table.data.admin-providers-table td { min-width: 92px; }
table.data tbody th { min-width: 0; } /* detail labels: 1% shrink rule */
}
/* Customer directory — RESTORE the phone card layout (≤900px) that the
generic table rules (§59/§62, higher specificity) had silently
overridden: thead hidden, every row a stacked label:value card.
Re-asserted here with table.data.directory-table specificity so the
generic scroll-frame rules never beat it. */
@media (max-width: 900px) {
table.data.directory-table { display: block; overflow-x: visible; width: 100%; }
table.data.directory-table thead { display: none; }
table.data.directory-table tbody { display: block; width: 100%; min-width: 0; }
table.data.directory-table tr {
display: block;
width: 100%;
margin-bottom: 14px;
border: 1px solid #e3e8ef;
border-radius: 10px;
background: #fff;
padding: 8px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
table.data.directory-table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 6px 0;
border: 0;
border-bottom: 1px solid #f0f3f7;
text-align: right;
min-width: 0;
white-space: normal;
}
table.data.directory-table td:last-child { border-bottom: 0; }
table.data.directory-table td::before {
content: attr(data-label);
font-weight: 600;
color: var(--dark-navy, #173A5E);
font-size: .82rem;
text-align: left;
flex-shrink: 0;
}
table.data.directory-table td[data-label="Name"] {
flex-direction: column;
align-items: flex-start;
border-bottom: 2px solid #e3e8ef;
padding-bottom: 10px;
margin-bottom: 4px;
}
table.data.directory-table td[data-label="Name"]::before {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted, #888);
}
table.data.directory-table td[data-label="Actions"] {
justify-content: flex-start;
}
table.data.directory-table td[data-label="Actions"]::before { display: none; }
}
/* End of section 62 */
/* =====================================================================
63. Site header nav — never leaves the screen at big text sizes
---------------------------------------------------------------------
.site-nav was flex-wrap: nowrap. At large browser text sizes
(150%+) the logged-in nav (Home/Services/Locations/About/Contact/
Credits/Dashboard/Logout) grew ~11px wider than the viewport and
pushed the whole page off-screen. Items now wrap to a second line
(right-aligned) only when there genuinely isn't room — at normal
sizes nothing changes.
===================================================================== */
.site-nav {
flex-wrap: wrap;
justify-content: flex-end;
flex: 0 1 auto; /* may shrink below content width → items wrap */
min-width: 0; /* not just min-content */
}
/* 1201-1300px: the logged-in nav (8 items + credit pill) is ~50px over
capacity at full size — apply the same compaction the 993-1200 range
already uses, so the header stays on ONE line with a visible search. */
@media (max-width: 1300px) and (min-width: 993px) {
.site-nav { gap: 8px; }
.site-nav a { padding: 8px 10px; font-size: .85rem; }
.header-search-bar { flex: 0 0 220px; max-width: 260px; }
}
/* End of section 63 */
/* =====================================================================
64. ADMIN TABLES — single-line identity columns (Type / Name /
Business / Phone / PIN Code)
---------------------------------------------------------------------
These columns carry the identity values an admin scans row-by-row
(Customer Directory, IP Tracker, Providers, Customers, Locations).
Their text now ALWAYS renders on ONE line at FULL font size — never
wrapped, never shrunk, never truncated. Only cells tagged
td.cell-oneline are affected ("only for those columns"); every
other column keeps the §59/§62 wrapping behaviour. When one-line
content makes a table wider than its container, the container
scroll frame (§62) takes over — the page itself never overflows.
===================================================================== */
table.data th.cell-oneline,
table.data td.cell-oneline {
white-space: nowrap;
overflow-wrap: normal;
word-break: keep-all;
max-width: none;
}
/* NOTE (§66): the business-name "max-width: none" exception that used
to live here was removed — name columns are now CAPPED with an
ellipsis (td.cell-cap, §66) and the wide table is explored by
dragging (§67) instead of growing without limit. Type / Phone /
PIN Code identity columns keep the full one-line behaviour. */
/* Customer-directory phone card layout (≤900px): inside a card the
label:value row must stay wrappable so a long value never pushes
the card past the phone screen */
@media (max-width: 900px) {
table.data.directory-table td.cell-oneline {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
table.data.directory-table td.cell-oneline .admin-row-biz-name {
white-space: normal;
max-width: 100%;
}
}
/* End of section 64 */
/* =====================================================================
65. ADMIN SIDEBAR — the CURRENT section is always clearly visible
---------------------------------------------------------------------
Two problems fixed:
(a) Many lower sidebar links (Advertising group, Settings group,
Credit History, Unlocked Providers, Transactions, Database,
Menus, Pending…) had NO active-state detection — clicking them
highlighted nothing, so the current section was invisible.
(Fixed in admin/index.php: every link now gets its active
class from the URL segments.)
(b) The active highlight itself was a 25%-opacity tint — easy to
miss on the dark gradient. It is now an unmistakable marker:
bright accent bar + tinted row + bold text.
The sidebar is taller than the viewport (60+ links scrolling inside
its 100vh frame). A small inline script in admin/index.php centers
the active link in the sidebar on every page load, so sections
from the lower half of the menu are always brought into view.
===================================================================== */
.admin-sidebar a.active,
.dash-sidebar a.active {
background: linear-gradient(90deg,
rgba(123,204,228,.30) 0%,
rgba(33,102,142,.55) 55%,
rgba(33,102,142,.18) 100%);
color: #ffffff;
border-left-color: #7BCCE4;
border-left-width: 4px;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(123,204,228,.22);
}
/* Smooth glide when the auto-center script scrolls to the active item */
.admin-sidebar { scroll-behavior: smooth; }
/* End of section 65 */
/* =====================================================================
66. ADMIN TABLES — customer / provider names & descriptions capped
---------------------------------------------------------------------
User request: keep the customer/provider NAME and DESCRIPTION text
within a fixed limit instead of stretching the table. Cells tagged
td.cell-cap render their value on ONE line, full font size, capped
at a font-relative width (ch — grows with the browser text size);
text beyond the cap ends in an ellipsis (…). The FULL text is
always available in the native title tooltip (hover the mouse /
long-press on touch) and on the entity's detail page. Each column
picks its cap via a modifier class:
.cap-name 24ch customer / provider names
.cap-biz 56px + 24ch avatar + name stack (44px avatar)
.cap-md 30ch emails, reasons, transaction notes
.cap-desc 44ch review text / long descriptions
Together with §67 (drag-to-scroll) the tables stay compact and
whatever columns fall outside the viewport are reached by holding
the mouse / touch and dragging the table sideways.
===================================================================== */
table.data td.cell-cap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: var(--cell-cap, 34ch);
}
td.cell-cap.cap-name { --cell-cap: 24ch; }
td.cell-cap.cap-biz { --cell-cap: calc(56px + 24ch); }
td.cell-cap.cap-md { --cell-cap: 30ch; }
td.cell-cap.cap-desc { --cell-cap: 44ch; }
/* Single-line ellipsis utility for NESTED text (avatar stacks, name +
sub-line cells): the inner element carries the ellipsis dots, the
td cap above keeps the column itself narrow. */
.clamp-1 {
display: block;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Multi-line clamps (detail-page description blocks) */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Nested stacks inside capped cells must be allowed to shrink so the
inner ellipsis engages (flex children default to min-width:auto) */
table.data td.cell-cap .admin-row-business,
table.data td.cell-cap .admin-row-business-info { min-width: 0; max-width: 100%; }
table.data td.cell-cap .admin-row-biz-name,
table.data td.cell-cap .admin-row-owner { max-width: 100%; }
/* Customer-directory phone cards (≤900px): a capped value stays on
one line inside the card — the card itself can never overflow. */
@media (max-width: 900px) {
table.data.directory-table td.cell-cap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
}
/* End of section 66 */
/* =====================================================================
67. TABLE DRAG-TO-SCROLL — hold & drag any wide table sideways
---------------------------------------------------------------------
app.js marks every horizontally scrollable table container with
.table-scroll-frame (admin tables, provider/customer dash tables,
any scrollable public table). The mouse (or pen) then GRABS the
table and drags it left / right — the cursor shows grab / grabbing.
Touch devices already scroll the very same containers natively by
holding and dragging, so they are left untouched. A drag that moved
the table never fires a click afterwards — links and buttons stay
safe; a plain click (no movement) behaves exactly as before.
Mouse text-selection inside scrollable tables is owned by the drag
gesture (the full text is available in the title tooltips of the
§66 capped cells).
===================================================================== */
.admin-content,
.dash-content,
.admin-content .card,
.dash-content .card { overscroll-behavior-x: contain; }
.table-scroll-frame table { cursor: grab; }
.table-scroll-frame table a,
.table-scroll-frame table .btn,
.table-scroll-frame table button { cursor: pointer; }
/* While the pointer is held down: block accidental text selection */
.table-scroll-frame.drag-hold {
user-select: none;
-webkit-user-select: none;
}
/* Active drag: grabbing cursor everywhere + no selection */
.table-scroll-frame.dragging,
.table-scroll-frame.dragging * {
cursor: grabbing !important;
user-select: none;
-webkit-user-select: none;
}
/* End of section 67 */
/* =====================================================================
68. DASHBOARD STAT CARDS — ALWAYS ONE ROW + LOCATIONS PAGINATION
---------------------------------------------------------------------
The stat cards (Customers / Providers / Pending / Approved …) used to
live in a grid with auto-fit tracks, so on narrower screens or bigger
text sizes the Approved / Pending cards wrapped onto separate rows —
the dashboard looked bad. They are now a FLEX row with nowrap: every
card shrinks equally and the whole group ALWAYS stays on one row at
any viewport or text size. Placed last in the cascade (with !important
where earlier sections also used !important) so it wins over the
grid rules in sections 8 / 40 and every old media query.
===================================================================== */
.dash-cards {
display: flex !important;
flex-wrap: nowrap !important;
}
.dash-cards .dash-card {
flex: 1 1 0;
min-width: 0;
}
.dash-cards .dash-card .label {
overflow-wrap: anywhere;
}
/* Phone: keep the one-row promise but compact the cards so they fit */
@media (max-width: 540px) {
.dash-cards { gap: 8px !important; }
.dash-cards .dash-card { padding: 10px 8px !important; }
.dash-cards .dash-card .label {
font-size: .62rem !important;
letter-spacing: .02em !important;
}
.dash-cards .dash-card .value { font-size: 1.05rem !important; }
}
/* ---------------------------------------------------------------------
Public Locations page — Previous / Next pagination (12 per page)
--------------------------------------------------------------------- */
.loc-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 32px 0 10px;
}
.loc-pagination .loc-page-info {
color: var(--muted);
font-size: .95rem;
font-weight: 600;
}
/* End of section 68 */
/* =====================================================================
69. TABLE-ONLY SIDE SCROLL + ONE-LINE BADGES + USERNAMES + TOUCH DRAG
---------------------------------------------------------------------
Round 9 user requests:
(a) ONLY the table portion may scroll sideways — the admin panel
page itself must never move. §62-v2 had turned .admin-content /
.dash-content / .card into the scroll frames, which dragged the
ENTIRE content area (page title, filter forms, cards, pagination)
sideways together with the table. Now the table element itself is
the scroll frame again (the proven §59/§62-v1 pattern):
display:block + overflow-x:auto with thead/tbody kept as
table-row-group — the browser wraps all row groups in ONE
anonymous table, so headers always share the body's column grid.
(b) Status badges (Approved / Pending / Captured / Failed …) must
NEVER wrap their text onto a second line — white-space: nowrap.
(c) @username sub-lines: every admin table shows the account's
globally-unique username (the tracking ID) under the identity
value (§66 clamp utilities keep them one line + tooltip).
(d) Tap-and-drag: touch pointers join the §67 drag-to-scroll module.
touch-action: pan-y hands horizontal gestures to JS; vertical
swipes keep panning the page natively.
===================================================================== */
table.data {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.data thead,
table.data tbody { display: table-row-group; width: auto; min-width: 0; }
table.data tr { display: table-row; }
table.data th,
table.data td { display: table-cell; }
/* The v2 container frames retire: only table elements scroll now. */
.admin-content,
.dash-content,
.admin-content .card,
.dash-content .card { overflow-x: visible; }
/* Slim styled scrollbar under every horizontally scrollable table */
table.data { scrollbar-width: thin; }
table.data::-webkit-scrollbar { height: 8px; }
table.data::-webkit-scrollbar-track { background: var(--bg-light); border-radius: 4px; }
table.data::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }
table.data::-webkit-scrollbar-thumb:hover { background: var(--muted-text); }
/* Status badges: ALWAYS one line, never wrapped, never squashed */
.badge { white-space: nowrap; flex-shrink: 0; }
/* @username sub-line (unique account ID) used across all admin tables */
.cell-username {
color: var(--primary-blue);
font-size: .78rem;
font-weight: 600;
line-height: 1.25;
margin-top: 1px;
}
table.data td.cell-cap .cell-username { max-width: 100%; }
/* The drag frame is the TABLE itself now → grab cursor on the table
(§67's descendant selectors only covered wrapper frames) */
table.data.table-scroll-frame { cursor: grab; }
table.data.table-scroll-frame a,
table.data.table-scroll-frame .btn,
table.data.table-scroll-frame button { cursor: pointer; }
/* Touch drag: horizontal gestures on scrollable tables belong to the
§67 drag module (JS); vertical swipes keep panning the page. */
.table-scroll-frame { touch-action: pan-y; }
/* End of section 69 */
/* =====================================================================
70. FORM CHECKBOX / RADIO SIZE + PHONE HEADER STACKING FIXES
---------------------------------------------------------------------
Round 10 user reports:
(a) /admin/roles and /admin/credit-plans/create/ — the tick-mark
boxes (permissions checkboxes, "Active?" checkbox) rendered as
GIANT full-row rectangles. Root cause: the generic
".form-row input { width:100%; padding:11px 13px }" rules also
matched checkboxes — equal specificity + later source order beat
the global 20px square rule, stretching each box to the full
form-row width. The source rules now exclude checkbox/radio via
:not() (see sections 8 / 31 / 40); the rules below are a safety
net that pins the square sizing no matter what later rules try.
(b) Phone: with the mobile menu open (.site-nav.open) the sticky
.panel-secondary-header painted ON TOP of the dropdown and
covered its links. Both the site-header and the secondary header
carried z-index 50 — equal z leaves the decision to DOM order,
and the secondary header comes later, so it won. The header now
stacks at z-index 200 on phone/tablet (still below the sidebar
drawer at 10002, its backdrop at 10001, and modals at 9999+),
and the secondary header sticks BELOW the site header instead
of fighting with it for the same top: 0 line.
===================================================================== */
/* (a) Safety net — checkboxes & radios inside form rows are always
compact squares: never full-width, never padded. */
.form-row input[type="checkbox"],
.form-row input[type="radio"] {
width: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
min-height: 20px;
max-height: 20px;
padding: 0;
box-sizing: border-box;
flex-shrink: 0;
flex-grow: 0;
}
/* The intentionally larger terms checkbox on the registration forms
keeps its 28px square (and is re-capped so the safety net above
can never shrink it). */
.form-row .terms-check input[type="checkbox"],
.terms-check input[type="checkbox"] {
width: 28px;
min-width: 28px;
max-width: 28px;
height: 28px;
min-height: 28px;
max-height: 28px;
padding: 0;
}
/* Special radio contexts that live INSIDE .form-row keep their own
intended sizing (their original rules have equal specificity but
sit earlier in the file, so they are restated here to win):
- blog/page "Editing Mode" toggles — compact 18px visible radios
- ad "Placement" cards — 0×0 natively-hidden radios (label is the UI) */
.blog-mode-option input[type="radio"],
.page-mode-option input[type="radio"] {
width: 18px;
min-width: 18px;
max-width: 18px;
height: 18px;
min-height: 18px;
max-height: 18px;
}
.placement-option input[type="radio"] {
width: 0;
min-width: 0;
max-width: 0;
height: 0;
min-height: 0;
max-height: 0;
}
/* (b) Phone / tablet stacking: the site header (with the open
.site-nav dropdown) always paints ABOVE the sticky panel header. */
@media (max-width: 992px) {
.site-header { z-index: 200; }
/* Secondary header sticks directly below the site header, so both
bars stay visible and usable while scrolling panel pages. */
.panel-secondary-header { top: var(--header-h, 64px); }
}
/* End of section 70 */
/* =====================================================================
71. ROUND 11 — panel account chips, campaign pages, admin avatars
---------------------------------------------------------------------
User requests this round:
(a) Customer/provider dashboards get the SAME panel-secondary-header
treatment as the admin panel — each now shows the logged-in
account (avatar photo when available, initials otherwise) in
the header bar's .psh-actions slot.
(b) /provider/advertising/campaigns + /create/ UI polish: stats are
pill chips that WRAP on phone (the old single flex row squeezed
six stats into an unreadable strip), the "no image" placeholder
is a proper gradient tile with a camera glyph, and the native
file input is styled into a modern "Upload Image" button.
(c) Admin customers table shows the customer's real profile photo
in the avatar circle (initials only as fallback).
NOTE: the asset version query (?v=…) was bumped to r6 in this round
so browsers re-fetch the stylesheet — round 10's phone header fix
was invisible to clients still serving the cached r5 file.
===================================================================== */
/* (a) Account chip in the panel secondary header (customer + provider
dashboards). Avatar: 32px circle, photo or initials. The name hides
on very small phones but the avatar always stays visible. */
.psh-account {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 4px 12px 4px 5px;
background: #F1F6FA;
border: 1px solid var(--border-soft, #E1E8EE);
border-radius: 999px;
min-width: 0;
flex-shrink: 0;
}
.psh-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: var(--primary-blue, #21668E);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .85rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(33,102,142,.18);
}
.psh-avatar.is-initial {
background: linear-gradient(135deg, var(--soft-blue, #7BCCE4), var(--primary-blue, #21668E));
}
.psh-account-name {
font-size: .85rem;
font-weight: 600;
color: var(--heading-dark, #16324A);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
@media (max-width: 540px) {
.psh-account { padding: 3px; border-color: transparent; background: transparent; }
.psh-account-name { display: none; }
}
/* (b) Campaign cards — stats become wrapped pill chips so six values
stay readable on a 390px phone instead of one squeezed strip. */
.campaign-card .cc-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: .8rem;
}
.campaign-card .cc-stats .cc-stat {
background: #F1F6FA;
border: 1px solid #E1E8EE;
border-radius: 999px;
padding: 3px 11px;
color: var(--muted);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.campaign-card .cc-stats .cc-stat strong { color: var(--dark-navy, #16324A); }
/* Campaign title row: name + status badge wrap cleanly on narrow screens */
.campaign-card .cc-info h4 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Nicer "no image" tile for campaign cards */
.cc-noimg {
width: 60px;
height: 60px;
border-radius: 8px;
background: linear-gradient(135deg, #EAF2F8, #D4E4F0);
border: 1px solid #CBD9E4;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #8FA9BD;
}
/* Campaign create/edit — modern file upload control */
.ad-image-actions { min-width: 0; }
.ad-image-upload input[type="file"] {
font-size: .85rem;
color: var(--muted);
max-width: 100%;
}
.ad-image-upload input[type="file"]::file-selector-button {
font-family: inherit;
font-size: .85rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--brand-blue, #21668E), #2A87B8);
border: 0;
border-radius: 10px;
padding: 9px 16px;
margin: 0 12px 4px 0;
cursor: pointer;
box-shadow: 0 2px 6px rgba(33,102,142,.22);
transition: transform .12s, box-shadow .15s;
}
.ad-image-upload input[type="file"]::file-selector-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(33,102,142,.3);
}
.ad-image-preview {
border-radius: 12px;
background-color: #F1F6FA;
}
.ad-image-preview .placeholder-text { opacity: .8; }
/* Form bottom actions — stack neatly on phone (Cancel / Save Draft /
Run Ad all remain reachable with a thumb, full-width) */
@media (max-width: 540px) {
.form-card .form-actions,
.run-ad-wrap .form-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.run-ad-wrap .form-actions > div { display: flex; gap: 10px; }
.run-ad-wrap .form-actions > div > * { flex: 1 1 auto; }
}
/* (c) Admin customers — the avatar circle supports a real photo */
.admin-customer-avatar {
background-size: cover;
background-position: center;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(33,102,142,.15);
}
.admin-customer-avatar.is-photo { background: none; color: transparent; }
/* Admin customer detail — photo header above the info table */
.admin-cust-view-head {
display: flex;
align-items: center;
gap: 18px;
margin: 4px 0 18px;
flex-wrap: wrap;
}
.admin-cust-view-avatar {
width: 76px;
height: 76px;
border-radius: 50%;
background: linear-gradient(135deg, var(--soft-blue, #7BCCE4), var(--primary-blue, #21668E));
background-size: cover;
background-position: center;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(33,102,142,.18);
}
.admin-cust-view-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-navy, #16324A);
}
/* End of section 71 */
/* =====================================================================
72. ROUND 12 — unified ads (corner "Ad" label), provider gallery
lightbox, provider-profile text containment, provider dashboard
phone layout, sticky-header hardening.
---------------------------------------------------------------------
User requests this round:
(a) Sticky header works on every phone — the overflow-x
clip at the top of this file removed the body scroll-container
that used to break position:sticky on iOS Safari. The rules below
keep the header painted above page content while scrolling.
(b) Ads render INSIDE the normal provider lists — no separate
"Sponsored" section anywhere. Every ad card carries a small,
subtle gray "Ad" label in its cover corner instead.
(c) Provider gallery images open in a zoomable lightbox popup with
arrows, swipe, keyboard nav and easy closing.
(d) Provider profile: all primary/secondary text stays inside its
container — wrapping, clamping and min-width guards.
(e) /provider/dashboard/ responsive on phones — stat cards wrap
into a 2-column grid instead of one squeezed row.
===================================================================== */
/* (a) Sticky header hardening ------------------------------------------
The header is position:sticky (top of file + §1). It stays in the
normal flow, so page content can NEVER slide under it — no extra
body padding is needed. NOTE: no "contain" here — the mobile nav
dropdown + search overlay hang BELOW the header box and must not be
clipped. */
.site-header { position: sticky; top: 0; }
/* Any ancestor chain that could trap the sticky header is neutralized:
main must never clip or offset. */
main { transform: none !important; filter: none !important; }
/* (b) Unified ads — small gray "Ad" label --------------------------------
Round 13: the label sits on the LOWER side of the card — pinned to the
card's bottom-right corner, away from the profile info and never
intercepting clicks. (The span lives inside .pc-cover but anchors to
.provider-card, the nearest positioned ancestor.) */
.provider-card { position: relative; }
.ad-flag {
position: absolute;
bottom: 10px;
right: 10px;
top: auto;
z-index: 3;
font-size: .68rem;
font-weight: 600;
line-height: 1;
letter-spacing: .05em;
color: #5f6b76; /* subtle gray text */
background: rgba(255,255,255,.9);
border: 1px solid rgba(95,107,118,.28);
border-radius: 5px;
padding: 3px 7px;
pointer-events: none; /* clicks always reach the card */
box-shadow: 0 1px 3px rgba(22,50,74,.08);
}
/* Ads now look like every other card — the old blue highlight ring is
retired; the corner Ad label is the only (subtle) marker. */
.provider-card.sponsored {
border-color: var(--border-soft);
box-shadow: var(--shadow-sm);
}
.provider-card.sponsored:hover {
box-shadow: var(--shadow-md);
}
/* Keep the legacy .badge.sponsored usable in admin tables, but retire
it from provider cards (search / profile / locations / services). */
.search-results .provider-card .badge.sponsored,
.related-merged .provider-card .badge.sponsored { display: none; }
/* (c) Gallery lightbox ------------------------------------------------- */
.gallery-public-item {
cursor: zoom-in;
-webkit-tap-highlight-color: rgba(33,102,142,.12);
}
.gallery-public-item:focus-visible {
outline: 3px solid rgba(33,102,142,.45);
outline-offset: 2px;
}
.provider-lightbox {
position: fixed;
inset: 0;
z-index: 5000; /* above header (200) + contact bar */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s ease;
}
/* The [hidden] attribute MUST win over the display:flex above — without
this rule the lightbox rendered invisibly (opacity 0) but still covered
the whole page at z-index 5000 and swallowed every click. */
.provider-lightbox[hidden] { display: none !important; }
.provider-lightbox.open { opacity: 1; }
.provider-lightbox .pl-backdrop {
position: absolute;
inset: 0;
background: rgba(12,24,36,.86);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
cursor: pointer; /* "tap outside to close" affordance */
}
.provider-lightbox .pl-stage {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 46px 56px 64px; /* room for the controls */
box-sizing: border-box;
}
.provider-lightbox .pl-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 18px 60px rgba(0,0,0,.55);
cursor: zoom-in;
transition: transform .18s ease;
user-select: none;
-webkit-user-drag: none;
touch-action: none; /* JS owns touch: swipe + pan */
will-change: transform;
}
.provider-lightbox .pl-image.zoomed { transition: none; /* instant panning */ }
.provider-lightbox .pl-close,
.provider-lightbox .pl-nav {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.92);
color: #16324A;
border: 0;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,.35);
transition: transform .12s ease, background .15s ease;
font-family: inherit;
padding: 0; /* SVG glyph centers itself — no offsets */
}
.provider-lightbox .pl-close svg,
.provider-lightbox .pl-nav svg {
display: block;
margin: 0 auto;
}
.provider-lightbox .pl-close {
top: 14px;
right: 14px;
width: 42px;
height: 42px;
font-size: 1.5rem;
line-height: 1;
}
.provider-lightbox .pl-nav {
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
font-size: 2rem;
line-height: 1;
}
.provider-lightbox .pl-prev { left: 10px; }
.provider-lightbox .pl-next { right: 10px; }
.provider-lightbox .pl-close:hover,
.provider-lightbox .pl-nav:hover {
background: #fff;
transform: scale(1.07);
}
.provider-lightbox .pl-nav:hover { transform: translateY(-50%) scale(1.07); }
.provider-lightbox .pl-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
padding: 10px 14px 14px;
color: rgba(255,255,255,.92);
font-size: .85rem;
background: linear-gradient(transparent, rgba(10,20,30,.55));
}
.provider-lightbox .pl-counter {
font-weight: 700;
font-variant-numeric: tabular-nums;
background: rgba(255,255,255,.14);
padding: 2px 10px;
border-radius: 999px;
}
.provider-lightbox .pl-hint {
color: rgba(255,255,255,.55);
font-size: .74rem;
}
@media (max-width: 540px) {
/* Phones: smaller controls sit INSIDE the stage padding, full-height
swipe area, and the hint text stays out of the way. */
.provider-lightbox .pl-stage { padding: 40px 8px 56px; }
.provider-lightbox .pl-close { width: 36px; height: 36px; font-size: 1.25rem; top: 10px; right: 10px; }
.provider-lightbox .pl-nav { width: 38px; height: 38px; font-size: 1.6rem; top: auto; bottom: 96px; transform: none; }
.provider-lightbox .pl-nav:hover { transform: scale(1.07); }
.provider-lightbox .pl-hint { display: none; }
.provider-lightbox .pl-caption { padding-bottom: 12px; }
}
/* (d) Provider profile — text containment ----------------------------- */
.provider-cover-name,
.provider-cover-service-title,
.provider-cover-meta,
.meta-pill,
.breadcrumbs {
overflow-wrap: anywhere;
word-break: break-word;
}
.provider-cover-name .badge.verified { flex-shrink: 0; }
.meta-pill { max-width: 100%; min-width: 0; }
.profile-section h3 { overflow-wrap: anywhere; }
/* Contact card: long phone numbers, emails and website URLs must wrap
inside the buttons instead of bursting out of the card. */
.phone-revealed,
.lock-phone { min-width: 0; }
.phone-number,
.lock-phone .masked {
overflow-wrap: anywhere;
word-break: break-all;
letter-spacing: normal;
}
.phone-revealed .btn,
.lock-phone .btn,
.phone-revealed a {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
text-align: center;
justify-content: center;
}
/* Stat cards: long numbers never push the row wide. */
.provider-stats-row { min-width: 0; }
.provider-stat-card { min-width: 0; }
.provider-stat-card .num {
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
/* Service/keyword tags wrap inside tag lists (already flex-wrap). */
.tag-list { min-width: 0; }
/* Review carousel slide text stays inside its card. */
.review-slide,
.review-item { min-width: 0; max-width: 100%; }
.review-title,
.review-body { overflow-wrap: anywhere; }
/* Related cards on the profile page keep the 3/2/1-column grid. */
.related-merged { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 992px) { .related-merged { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .related-merged { grid-template-columns: 1fr; } }
/* (e) Provider dashboard — phone responsive --------------------------- */
/* §65 forces .dash-cards onto ONE row (the admin Approved/Pending
request). The PROVIDER dashboard has up to 7 stat cards — on a phone
that squeezed them into unreadable 40px strips. The -wrap modifier
lets them flow into a comfortable 2-column grid on small screens
while keeping the single-row look on desktop. */
.dash-cards-wrap { flex-wrap: wrap !important; }
.dash-cards-wrap .dash-card { flex: 1 1 150px; }
@media (max-width: 768px) {
.dash-cards-wrap .dash-card { flex: 1 1 44%; }
}
@media (max-width: 540px) {
.dash-cards-wrap .dash-card { flex: 1 1 44% !important; }
.dash-cards-wrap .dash-card .label {
font-size: .68rem !important; /* readable, no mid-word breaks */
letter-spacing: .02em !important;
overflow-wrap: anywhere;
}
.dash-cards-wrap .dash-card .value { font-size: 1.15rem !important; }
}
/* Quick Actions: buttons become comfortable full-width thumb targets
on phones (they were tiny squeezed pills). */
.quick-actions-card p { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions-card .btn { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 540px) {
.quick-actions-card p { flex-direction: column; }
.quick-actions-card .btn { width: 100%; text-align: center; }
}
/* End of section 72 */
/* =====================================================================
73. ROUND 13 — ad visibility hints (My Ads), ad label on the lower
side, lightbox control centering.
===================================================================== */
/* My Ads — live status hint line under the placement badge */
.campaign-card .cc-hint {
margin-top: 6px;
font-size: .78rem;
line-height: 1.45;
max-width: 560px;
padding: 5px 10px;
border-radius: 8px;
display: inline-block;
overflow-wrap: anywhere;
}
.campaign-card .cc-hint a { text-decoration: underline; font-weight: 600; }
.campaign-card .cc-hint-ok { background: #E8F6EE; color: #1E7A46; }
.campaign-card .cc-hint-warn { background: #FDF3E4; color: #9A6A15; }
.campaign-card .cc-hint-muted { background: #F1F5F9; color: #5F6B76; }
@media (max-width: 540px) {
.campaign-card .cc-hint { max-width: 100%; }
}
/* End of section 73 */
/* =====================================================================
74. TABLE SCROLL WRAPPER — headers always stretch full panel width
---------------------------------------------------------------------
User report (wide monitor): on admin Customer / Provider / Keywords
pages the table headers were squeezed into the left ~25% of the
panel with the rest of the row blank.
Cause: §69 turned the table element itself into the scroll frame
(display:block + overflow-x:auto). Inside a display:block table the
browser wraps thead+tbody in ONE anonymous table box that SHRINKS
TO FIT its content — it never stretches to the panel width. Any
table whose natural content is narrower than the panel (empty
keyword groups, short tables, wide monitors) collapses to a few
hundred pixels and the rest of the block stays blank.
Fix (§74, with the JS wrapper in app.js): every table.data is
wrapped in and becomes a REAL table
again —
• display:table + width:100% → headers always span the full
panel width; ONE native column grid, so header cells can never
drift out of alignment with body cells (works in every engine).
• The wrapper is the horizontal scroll frame → when content is
wider than the panel (mobile, big fonts, many columns) ONLY the
table region scrolls; the page itself never grows sideways.
• The §67/§69 tap-and-drag module finds the wrapper automatically
(dragFindFrame walks up to the nearest scrollable ancestor that
contains a table) — drag-to-scroll and the grab cursor keep
working exactly as before.
===================================================================== */
/* (a) The wrapper: the ONLY sideways scroll frame for tables ------- */
.table-scroll-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-y; /* horizontal gestures → §67 drag JS */
overscroll-behavior-x: contain;
margin: 12px 0; /* takes over the table's own margin */
scrollbar-width: thin;
}
.table-scroll-wrap::-webkit-scrollbar { height: 8px; }
.table-scroll-wrap::-webkit-scrollbar-track {
background: var(--bg-light);
border-radius: 4px;
}
.table-scroll-wrap::-webkit-scrollbar-thumb {
background: var(--border-soft);
border-radius: 4px;
}
.table-scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted-text); }
/* (b) The table: a real table again, always full width --------------
Same specificity as §69's rules but LATER in the file, so these
win the cascade. Applies to wrapped tables AND (JS-off fallback)
unwrapped ones — without JS a table simply renders as a normal
full-width table, which is readable and safe. */
table.data {
display: table;
table-layout: auto;
width: 100%;
overflow-x: visible;
border-collapse: collapse;
white-space: normal;
}
table.data thead,
table.data tbody {
display: table-row-group; /* native row groups — one grid */
width: auto;
min-width: 0;
}
table.data tr { display: table-row; }
table.data th,
table.data td { display: table-cell; }
/* Wrapped tables: margin moves to the wrapper (no double spacing) */
.table-scroll-wrap > table.data { margin: 0; }
/* (c) Keep §62's mobile readability floors --------------------------
On phones the cells keep their minimum width floor; the table's
min-content then exceeds the narrow viewport, the table grows past
100% and the WRAPPER scrolls (not the page). Neutralize §62's
display:block mobile override — the wrapper does the scrolling now. */
@media (max-width: 640px) {
table.data {
display: table;
overflow-x: visible;
}
table.data thead,
table.data tbody { display: table-row-group; }
table.data th,
table.data td {
min-width: 92px; /* readable column floor → scroll, not crush */
}
/* detail tables: label column stays shrink-to-fit */
table.data tbody th { min-width: 0; }
.admin-row-biz-name { max-width: 150px; }
}
/* (d) Grab cursor for drag-to-scroll: the JS marks the wrapper with
.table-scroll-frame; §69's rules targeted the table element, so
extend them to wrapper frames (descendant tables get the cursor). */
.table-scroll-wrap.table-scroll-frame { cursor: grab; }
.table-scroll-wrap.table-scroll-frame a,
.table-scroll-wrap.table-scroll-frame .btn,
.table-scroll-wrap.table-scroll-frame button { cursor: pointer; }
/* End of section 74 */
/* =====================================================================
ROUND 24/25 — HEADER SEARCH BAR (user-provided design — header only)
White pill-less bar: 52px tall, 1.5px #bce3f7 border, 14px radius,
icon-only brand-blue submit button. Scoped to .header-search-bar /
.header-search-overlay so the hero search is NOT affected. Placed at
the end of the stylesheet so it wins over all older header rules.
ROUND 25 FIX — the mobile overlay previously got `display:flex;
position:static` from this block, which overrode the base
`.header-search-overlay { display:none }` rule (higher specificity,
later in file) → the overlay form was rendered INLINE in the header
row on EVERY screen size. That is the "two search bars at the top"
bug. Now:
- the shared block below carries ONLY the visual skin (no
display/position), and
- the desktop bar opts in with display:flex, while
- the overlay keeps display:none until .header-search-toggle adds
.open (existing JS), and drops down BELOW the header as before.
===================================================================== */
/* ---- Shared visual skin (no display / no position here) ---- */
.header-search-bar.search-bar-ui,
.header-search-overlay.search-bar-ui {
align-items: stretch;
height: 52px;
background-color: #ffffff;
border: 1.5px solid #bce3f7;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(33, 102, 142, 0.05);
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* ---- Desktop inline bar: always flex on desktop ---- */
.header-search-bar.search-bar-ui {
display: flex;
flex: 0 1 440px;
min-width: 220px;
width: 100%;
max-width: 440px;
position: static;
/* ROUND 26 — center the bar in the header row. The shared skin above
sets `margin: 0` (needed by the absolutely-positioned overlay), which
silently cancelled the old `.header-search-bar` auto-margin centering
(section 36) — the bar ended up glued to the logo. Auto margins split
the free space evenly on both sides → logo left, bar centered in the
remaining space, nav flush right. */
margin-left: auto;
margin-right: auto;
}
/* ≤992px: inline bar hides, icon toggle takes over (existing rules) */
@media (max-width: 992px) {
.header-search-bar.search-bar-ui { display: none !important; }
}
/* ---- Mobile/tablet overlay: hidden until toggled, drops below header ---- */
.header-search-overlay.search-bar-ui {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 520px;
z-index: 60;
}
.header-search-overlay.search-bar-ui.open { display: flex; }
/* Phones (≤768px): older !important rules (section 54) reposition the
overlay to a fixed full-width sheet — keep that placement but restore
the exact user skin inside it (52px bar, 58px button, 18px input pad). */
@media (max-width: 768px) {
.header-search-overlay.search-bar-ui {
height: 52px !important;
padding: 0 !important;
background-color: #ffffff !important;
border: 1.5px solid #bce3f7 !important;
border-radius: 14px !important;
}
.header-search-overlay.search-bar-ui input {
padding: 0 18px !important;
font-size: 16px !important;
color: #333333;
}
.header-search-overlay.search-bar-ui input::placeholder { color: #a3b2be; }
.header-search-overlay.search-bar-ui button {
width: 58px !important;
flex: 0 0 58px !important;
padding: 0 !important;
border-radius: 0 !important;
background-color: rgb(33, 102, 142) !important;
}
.header-search-overlay.search-bar-ui button:hover { background-color: rgb(26, 82, 115) !important; }
}
/* ---- Shared control styling (input + button + svg) ---- */
.header-search-bar.search-bar-ui input,
.header-search-overlay.search-bar-ui input {
flex: 1;
border: none;
outline: none;
box-shadow: none;
padding: 0 18px;
font-size: 16px;
color: #333333;
background: transparent;
box-sizing: border-box;
min-width: 0;
border-radius: 0;
height: 100%;
}
.header-search-bar.search-bar-ui input::placeholder,
.header-search-overlay.search-bar-ui input::placeholder {
color: #a3b2be;
opacity: 1;
}
.header-search-bar.search-bar-ui button,
.header-search-overlay.search-bar-ui button {
width: 58px;
flex: 0 0 58px;
border: none;
outline: none;
cursor: pointer;
background-color: rgb(33, 102, 142);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border-radius: 0;
color: #ffffff;
font-size: 0;
transition: background-color 0.2s ease;
}
.header-search-bar.search-bar-ui button:hover,
.header-search-overlay.search-bar-ui button:hover {
background-color: rgb(26, 82, 115);
}
.header-search-bar.search-bar-ui button svg,
.header-search-overlay.search-bar-ui button svg {
width: 20px;
height: 20px;
stroke: #ffffff;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =====================================================================
61. ROUND 26 — PHONE: breathing room for action buttons in tables
---------------------------------------------------------------------
On phones the admin tables keep their compact 8px cell padding, so
action buttons ("View" / "Edit" …) sat flush against the cell edges
and against each other when a row carried more than one. Every
button inside a data-table cell now gets a 2px gap above and below,
across the platform's phone range (≤768px, matching the header
breakpoint so landscape phones are covered too). Desktop is untouched.
===================================================================== */
@media (max-width: 768px) {
table.data td .btn,
table.data td a.btn,
table.data td button.btn,
table.data td .btn.sm,
table.data th .btn {
margin-top: 2px;
margin-bottom: 2px;
}
}
/* ROUND 26 — desktop (>992px): a legacy centering scheme ("site-nav {
margin-left: auto }", see the old @media (min-width: 993px) block)
competes with the search bar's own auto margins. Three auto margins
split the free space three ways and pulled the bar LEFT of center
(measured delta 112px at 1600px). Zero the nav's margin on desktop —
the bar's right auto-margin then pushes the nav flush right, and the
bar sits exactly halfway between logo and nav. */
@media (min-width: 993px) {
.site-header .container.header-row .site-nav { margin-left: 0; }
}
/* ============================================================
ROUND 29 — Settings → Custom Code page + Provider JSON import
============================================================ */
/* Monospace code editor (custom head/footer code + JSON import) */
textarea.code-area,
textarea.imp-json-area {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 12.5px;
line-height: 1.55;
white-space: pre;
overflow-x: auto;
tab-size: 2;
}
textarea.imp-json-area { min-height: 240px; }
textarea.code-area { min-height: 160px; }
/* Toolbar rows (example buttons / demo + preview buttons) */
.imp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.imp-note { color: #64748b; font-size: 12.5px; line-height: 1.55; }
/* Preview + results tables */
.imp-preview { margin-top: 16px; overflow-x: auto; }
.imp-preview table.data th, .imp-preview table.data td { vertical-align: top; text-align: left; }
.imp-preview table.data td code.imp-pw {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11.5px; background: #f1f5f9; border-radius: 5px; padding: 2px 5px; display: inline-block;
}
.imp-summary {
display: inline-block; margin: 0 0 10px; padding: 7px 12px; border-radius: 999px;
background: #ecfdf5; color: #065f46; font-size: 12.5px; font-weight: 600; border: 1px solid #a7f3d0;
}
/* Image thumbnails + B64/LINK type badges */
.imp-thumb {
width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
border: 1px solid rgba(15, 23, 42, .15); background: #f1f5f9; display: block;
}
.imp-thumb.banner { width: 96px; height: 32px; }
.imp-type-badge {
display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px;
padding: 2px 7px; border-radius: 999px; margin-top: 4px; text-transform: uppercase;
}
.imp-type-badge.b64 { background: #dcfce7; color: #166534; }
.imp-type-badge.link { background: #dbeafe; color: #1e40af; }
.imp-type-badge.none { background: #f1f5f9; color: #94a3b8; }
/* Per-row check / result colours */
.imp-row-err { color: #b91c1c; font-size: 12px; margin-top: 3px; }
.imp-ok { color: #15803d; font-weight: 700; }
.imp-skip { color: #b45309; font-weight: 700; }
.imp-err { color: #b91c1c; font-weight: 700; }
@media (max-width: 768px) {
.imp-thumb { width: 44px; height: 44px; }
.imp-thumb.banner { width: 72px; height: 26px; }
}
/* ---------------------------------------------------------------------------
ROUND 30 — Custom Code snippet manager (admin/settings_code.php)
------------------------------------------------------------------------- */
.imp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.imp-table-wrap table.data { min-width: 640px; }
/* ---------------------------------------------------------------------------
ROUND 31 — CANVAS SIZE FIX: every CMS page & blog post is limited to the
same max width as every other page on the site (the 1200px .container).
Previously .cms-page-html / .cms-section rendered FULL viewport width, so
text typed in the Visual Editor stretched edge-to-edge on big screens.
------------------------------------------------------------------------- */
.cms-page-html,
.cms-section {
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.cms-page-html { padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 768px) {
.cms-page-html, .cms-section { padding-left: 14px; padding-right: 14px; }
}
/* ROUND 31 — Visual Editor canvas: the contenteditable "page" you type into
(page editor + post editor) is limited to the same max width, so what you
type matches what visitors see. The raw-HTML textareas are capped too. */
.blog-visual-area {
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
#blog-content-html,
#html-content-editor { max-width: var(--container-max); margin-left: auto; margin-right: auto; width: 100%; }
/* ROUND 31 — footer "subsidiary product of Digital PR World" line */
.footer-brand-line {
margin-top: 6px;
font-size: .86rem;
color: var(--muted-text);
}
.footer-brand-line a { color: var(--brand-blue); text-decoration: underline; font-weight: 600; }
.footer-brand-line a:hover { color: var(--brand-red); }
/* ROUND 31 — tables inside blog posts (comparison tables in seeded articles) */
.blog-content .blog-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0; }
.blog-content table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
overflow: hidden;
}
.blog-content th, .blog-content td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
vertical-align: top;
}
.blog-content thead th {
background: var(--bg-light);
color: var(--heading-dark);
font-weight: 700;
font-size: .9rem;
}
.blog-content tr:last-child td { border-bottom: 0; }
.blog-content tbody tr:hover { background: #FAFDFE; }
/* ROUND 31 — Body-Start badge (Custom Code snippet table) */
.imp-type-badge.body { background: #fef3c7; color: #92400e; }
/* =====================================================================
* ROUND 39 — "Recent Blogs" moved INTO the footer Blog column, directly
* below the "Blog" heading and its "Our Blogs" link (the r38 full-width
* strip under the whole columns grid is gone). Still the 3 most recently
* UPDATED posts recomputed on every request. Each entry is a single
* one-row line of text: the title is trimmed to an even character
* budget in PHP (blog_truncate_title) AND clipped to one row with a CSS
* ellipsis so the line can never wrap — even inside the narrow column.
* ===================================================================== */
.r39-footer-recent {
margin-top: 14px;
min-width: 0;
}
.r39-footer-recent h4 { margin-bottom: 8px; }
/* the Blog column must keep its natural 1fr width: the nowrap one-row
titles would otherwise inflate the column's min-content (fr = minmax(auto,
1fr)) and steal space from the sibling columns — min-width: 0 hands the
overflow to the fr-link ellipsis clip instead */
.footer-blog-col { min-width: 0; }
.footer-recent .fr-list {
list-style: none;
margin: 0;
padding: 0;
/* stacked inside the Blog column — NOT a 3-column strip anymore */
display: block;
}
.footer-recent .fr-list li { min-width: 0; margin-bottom: 7px; }
.footer-recent .fr-list li:last-child { margin-bottom: 0; }
.footer-recent .fr-link {
display: block;
max-width: 100%;
font-size: .88rem;
line-height: 1.45;
color: rgba(255, 255, 255, .72);
text-decoration: none;
/* ONE ROW ONLY — the line never wraps; any overflow closes with "..." */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer-recent .fr-link:hover { color: #fff; }
/* =====================================================================
* ROUND 40 — REGISTER BUTTON: bigger (WIDER) + a second line inside the
* SAME button. Still ONE red button — the main "Register" label sits on
* top and, directly below it, a small sub-line reads "Join as a Nurse,
* Service Provider or Customer". The bump is a WIDTH bump: wider
* horizontal padding + a min-width; the label size itself is unchanged.
* ===================================================================== */
.site-nav .header-register-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 6px 30px 7px;
min-width: 236px;
text-align: center;
line-height: 1.3;
}
.site-nav .header-register-btn .r40-reg-main {
font-weight: 700;
font-size: .9rem;
letter-spacing: .01em;
}
.site-nav .header-register-btn .r40-reg-sub {
font-weight: 500;
font-size: .6rem;
letter-spacing: .01em;
opacity: .95;
}
/* medium desktops (993–1200px): the legacy rule force-squashes nav link
padding — keep the register button wide enough for its sub-line and let
the search bar flex down instead of overflowing the header row */
@media (max-width: 1200px) and (min-width: 993px) {
.site-nav a.header-register-btn { padding: 6px 18px 7px !important; min-width: 0; }
.site-nav a.header-register-btn .r40-reg-sub { font-size: .55rem; }
.header-search-bar { flex: 1 1 160px; max-width: 240px; }
}
/* ≤992px dropdown: the button already spans the row (.site-nav a width
100% + !important padding) — the two-line stack stays centered */
@media (max-width: 992px) {
.site-nav .header-register-btn { flex-direction: column; }
.site-nav .header-register-btn .r40-reg-sub { font-size: .62rem; }
}