/* =====================================================================
TRUSTED HOME NURSE — Healthcare Edition stylesheet
Color palette (TRUSTED HOME NURSE design system):
--brand-blue: #21668E (Primary Brand Blue — headings, nav, primary buttons)
--brand-red: #DA373A (Secondary Accent Red — CTAs, important actions, phone)
--sky-blue: #7BCCE4 (Decorative elements, icon backgrounds)
--bg-light: #F1FAFD (Light Blue Background — hero & alt sections)
--bg-soft: #E7F7FB (Soft Blue Section — why choose us, etc.)
--heading-dark: #173B4F (Dark Heading/Text)
--body-text: #4B6470 (Body Text)
--muted-text: #71848D (Secondary Text)
--border-soft: #DCECF2 (Borders)
--success: #2E8B57 (Success)
--warning: #E6A23C (Warning)
--error: #D01818 (Error)
--white: #FFFFFF
===================================================================== */
:root {
/* New TRUSTED HOME NURSE palette */
--brand-blue: #21668E;
--brand-blue-hover: #174D6B; /* Primary button hover */
--brand-red: #DA373A;
--brand-red-hover: #B92A2D; /* CTA button hover */
--sky-blue: #7BCCE4;
--bg-light: #F1FAFD; /* Hero and alternate sections */
--bg-soft: #E7F7FB; /* Why choose us / soft section */
--heading-dark: #173B4F; /* Main headings and strong text */
--body-text: #4B6470; /* Body text */
--muted-text: #71848D; /* Secondary text */
--border-soft: #DCECF2; /* Borders */
--success: #2E8B57;
--warning: #E6A23C;
--error: #D01818;
--white: #FFFFFF;
/* Backwards-compatible aliases (existing rules use these) */
--primary-blue: var(--brand-blue);
--dark-navy: var(--heading-dark);
--light-blue: var(--bg-light);
--soft-blue: var(--border-soft);
/* Semantic tokens */
--bg: var(--white);
--bg-soft: var(--bg-soft); /* keep soft section token working */
--text: var(--body-text);
--muted: var(--muted-text);
--border: var(--border-soft);
--info: var(--brand-blue);
--radius: 14px;
--radius-sm: 10px;
/* Healthcare-focused soft shadow using brand blue tint */
--shadow-sm: 0 1px 3px rgba(33,102,142,.06);
--shadow-md: 0 8px 30px rgba(33,102,142,.10);
--shadow-lg: 0 14px 40px rgba(33,102,142,.16);
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Noto Sans", "Helvetica Neue", Arial, sans-serif;
--font-heading: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--container-max: 1200px;
--header-h: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.55;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Make sure body never horizontally scrolls — content wraps instead */
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
a { color: var(--brand-blue); text-decoration: none; word-break: break-word; }
a:hover { text-decoration: underline; color: var(--brand-red); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--heading-dark);
margin: 0 0 .5em;
line-height: 1.25;
overflow-wrap: break-word;
word-break: break-word;
}
p { overflow-wrap: break-word; word-break: break-word; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
pre, code {
overflow-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
pre {
max-width: 100%;
overflow-x: auto;
}
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
small { color: var(--muted); }
.container {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* ----------------------- Header ----------------------- */
.site-header {
background: var(--white);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--shadow-sm);
}
.site-header .container {
display: flex;
align-items: center;
min-height: var(--header-h);
gap: 18px;
}
.site-logo {
font-weight: 800;
font-size: 1.2rem;
color: var(--brand-blue);
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.site-logo:hover { text-decoration: none; color: var(--brand-blue); }
.site-logo .logo-mark {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand-blue), var(--heading-dark));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.15rem;
}
.site-logo-img {
height: 48px;
width: auto;
max-width: 200px;
object-fit: contain;
display: block;
flex-shrink: 0;
}
.site-logo-text {
font-weight: 800;
color: var(--brand-blue);
font-size: 1.05rem;
line-height: 1.15;
letter-spacing: -.01em;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* The site-logo-text now wraps a .brand-wm — keep it visible on every screen size,
but shrink it on very small phones so the header doesn't overflow. */
@media (max-width: 600px) {
.site-logo-img { height: 40px; }
.site-logo-text { font-size: .95rem; }
.site-logo-text .brand-wm.header { font-size: .95rem; }
}
@media (max-width: 400px) {
.site-logo-img { height: 34px; }
.site-logo-text { font-size: .82rem; }
.site-logo-text .brand-wm.header { font-size: .82rem; }
}
/* =====================================================================
BRAND WORDMARK — "Trusted Home Nurse" (blue-red-blue)
Used in header, footer, hero, and anywhere the brand name appears.
===================================================================== */
.brand-wm {
font-family: Arial, "Helvetica Neue", sans-serif;
font-weight: 800;
line-height: 1.1;
margin: 0;
padding: 0;
/* inline-block (not inline-flex) so the inner spans stay naturally
inline with whitespace between them — guarantees they render on
ONE row and never wrap to separate lines. */
display: inline-block;
white-space: nowrap;
letter-spacing: -.01em;
vertical-align: baseline;
}
.brand-wm .wm-trusted,
.brand-wm .wm-nurse { color: var(--brand-blue); }
.brand-wm .wm-home { color: var(--brand-red); }
/* Size presets — overridden by context if needed */
.brand-wm.header { font-size: 1.15rem; font-weight: 800; }
.brand-wm.footer { font-size: 1.6rem; font-weight: 800; }
.brand-wm.footer-bottom { font-size: 1rem; font-weight: 700; }
.brand-wm.sm { font-size: 1rem; font-weight: 700; }
.brand-wm.md { font-size: 1.4rem; font-weight: 800; }
.brand-wm.lg { font-size: 2rem; font-weight: 800; }
.brand-wm.xl { font-size: 2.8rem; font-weight: 800; }
@media (max-width: 540px) {
.brand-wm.footer { font-size: 1.3rem; }
.brand-wm.lg { font-size: 1.7rem; }
.brand-wm.xl { font-size: 2.1rem; }
}
.site-nav {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
margin-left: auto;
}
.site-nav a {
color: var(--text);
padding: 8px 10px;
border-radius: var(--radius-sm);
font-weight: 500;
font-size: 0.9rem;
white-space: nowrap;
}
.site-nav a:hover { background: var(--light-blue); text-decoration: none; }
.site-nav a.btn { color: #fff; }
.nav-toggle { display: none; }
/* =====================================================================
HEADER LOGIN / REGISTER BUTTONS — palette hover (no black)
===================================================================== */
.site-nav .header-login-btn {
color: var(--heading-dark);
font-weight: 600;
border: 1.5px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.site-nav .header-login-btn:hover {
background: var(--brand-blue);
color: #fff;
border-color: var(--brand-blue);
text-decoration: none;
}
.site-nav .header-register-btn {
background: var(--brand-red);
color: #fff !important;
transition: background .15s, color .15s;
}
.site-nav .header-register-btn:hover {
background: var(--brand-red-hover);
color: #fff !important;
text-decoration: none;
}
/* Logout button — palette hover (no black) */
.site-nav .header-logout-btn {
background: var(--brand-blue);
color: #fff !important;
transition: background .15s, color .15s;
}
.site-nav .header-logout-btn:hover {
background: var(--brand-blue-hover);
color: #fff !important;
text-decoration: none;
}
/* =====================================================================
HEADER SEARCH TOGGLE (icon) — tablet & mobile only
===================================================================== */
.header-search-toggle {
display: none;
background: transparent;
border: 0;
color: var(--heading-dark);
cursor: pointer;
padding: 8px;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s, color .15s;
margin-left: auto; /* push to the right side of the header on mobile */
}
.header-search-toggle.active {
background: var(--bg-light);
color: var(--brand-blue);
}
.header-search-toggle:hover {
background: var(--bg-light);
color: var(--brand-blue);
}
.header-search-toggle svg {
width: 22px;
height: 22px;
display: block;
}
/* On mobile, keep search toggle and nav-toggle together on the right */
@media (max-width: 992px) {
/* On tablet, search toggle pushes itself + nav to the right as a group */
.header-search-toggle { margin-left: auto; }
/* Remove the auto margin from nav so it sits right next to the search toggle */
.site-nav { margin-left: 0 !important; }
/* On mobile (<=768px), nav-toggle has no margin so it sits right next to search toggle */
.nav-toggle { margin-left: 0 !important; }
}
/* =====================================================================
HEADER SEARCH OVERLAY — drops down below header on tablet/mobile
===================================================================== */
.header-search-overlay {
display: none; /* hidden by default; opened via JS */
position: absolute;
top: calc(100% + 8px); /* just below the header */
left: 50%;
right: auto;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 520px;
background: var(--bg-light);
border: 1px solid var(--border-soft);
border-radius: 999px;
padding: 6px 6px 6px 14px;
box-shadow: var(--shadow-md);
z-index: 60;
align-items: center;
gap: 10px;
}
.header-search-overlay.open {
display: flex;
}
.header-search-overlay .hsi-icon {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--muted-text);
margin-right: 6px;
}
.header-search-overlay input {
flex: 1;
border: 0;
background: transparent;
outline: none;
font-size: .95rem;
color: var(--body-text);
padding: 9px 0;
font-family: inherit;
min-width: 0;
}
.header-search-overlay input::placeholder { color: var(--muted-text); }
.header-search-overlay input:focus { outline: none; }
.header-search-overlay:focus-within {
background: #fff;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.14);
}
.header-search-overlay button {
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: 999px;
padding: 9px 18px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s;
flex-shrink: 0;
}
.header-search-overlay button:hover { background: var(--brand-blue-hover); }
/* ----------------------- Hero (Healthcare) ----------------------- */
.hero-healthcare {
background:
radial-gradient(1200px 400px at 80% -100%, rgba(33,102,142,.25), transparent 60%),
linear-gradient(135deg, var(--bg-light) 0%, var(--bg-soft) 100%);
padding: 64px 0 80px;
position: relative;
overflow: hidden;
}
.hero-healthcare::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0, transparent 40%),
radial-gradient(circle at 90% 70%, rgba(28,100,242,.15) 0, transparent 35%);
pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero h1 {
font-size: 2.6rem;
margin-bottom: .25em;
color: var(--dark-navy);
letter-spacing: -.01em;
}
.hero p.lead {
font-size: 1.15rem;
color: var(--dark-navy);
opacity: .8;
max-width: 720px;
margin: 0 auto 1.75em;
}
/* When the hero is sitting on top of a background image (dark overlay),
switch ALL text to white so it stays readable. */
.hero.unsplash-hero-bg h1,
.hero.unsplash-hero-bg p.lead {
color: #fff;
opacity: 1;
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.hero.unsplash-hero-bg .quick-pill-label { color: rgba(255,255,255,.92); }
.hero.unsplash-hero-bg .quick-pill {
background: rgba(255,255,255,.18);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
backdrop-filter: blur(4px);
}
.hero.unsplash-hero-bg .quick-pill:hover {
background: var(--brand-red);
color: #fff;
border-color: var(--brand-red);
}
.hero-search {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
gap: 10px;
background: #fff;
padding: 14px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
margin: 0 auto;
max-width: 820px;
}
.hero-search input {
padding: 13px 16px;
font-size: 1rem;
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text);
width: 100%;
}
.hero-search input:focus {
outline: 2px solid var(--brand-blue);
outline-offset: -1px;
border-color: var(--brand-blue);
}
.hero-search button {
background: var(--primary-blue);
color: #fff;
border: 0;
cursor: pointer;
font-weight: 700;
border-radius: var(--radius-sm);
padding: 0 20px;
font-size: 1rem;
}
.hero-search button:hover { background: var(--brand-blue-hover); }
.quick-pills {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
}
.quick-pill-label { color: var(--muted-text); font-size: .9rem; margin-right: 4px; }
.quick-pill {
background: rgba(255,255,255,.85);
color: var(--brand-blue);
padding: 7px 14px;
border-radius: 999px;
font-size: .88rem;
font-weight: 600;
border: 1px solid rgba(33,102,142,.2);
transition: all .15s;
}
.quick-pill:hover {
background: var(--brand-blue);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
/* ----------------------- Trust Badges ----------------------- */
.trust-badges-section {
padding: 40px 0;
background: var(--white);
}
.trust-badges {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.trust-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
background: #fff;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.trust-badge:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--primary-blue);
}
.trust-icon {
flex-shrink: 0;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
color: #fff;
box-shadow: 0 4px 12px rgba(15,23,42,.08);
}
.trust-icon svg {
width: 26px; height: 26px;
}
.trust-icon.trust-icon-blue {
background: linear-gradient(135deg, var(--brand-blue), var(--heading-dark));
}
.trust-icon.trust-icon-green {
background: linear-gradient(135deg, var(--success), #3aa56f);
}
.trust-icon.trust-icon-purple {
background: linear-gradient(135deg, #7C3AED, #4F46E5);
}
.trust-icon.trust-icon-orange {
background: linear-gradient(135deg, #F59E0B, #D97706);
}
.trust-text strong {
display: block;
color: var(--dark-navy);
font-size: .95rem;
line-height: 1.3;
margin-bottom: 2px;
}
.trust-text small {
font-size: .8rem;
color: var(--muted);
}
/* ----------------------- Sections ----------------------- */
.section { padding: 60px 0; }
.section.alt { background: var(--light-blue); }
.section h2.section-title { text-align: center; margin-bottom: 8px; }
.section-subtitle { margin: 0 auto 36px; max-width: 600px; }
.how-it-works {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.how-step {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
text-align: center;
position: relative;
box-shadow: var(--shadow-sm);
}
.how-step .step-num {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--primary-blue);
color: #fff;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(28,100,242,.3);
}
/* ----------------------- Cards / grids ----------------------- */
.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; } /* allow children to shrink + wrap text inside */
.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); }
.card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s, border-color .15s;
display: block;
color: var(--text);
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--primary-blue);
text-decoration: none;
}
.card .card-title { font-size: 1.05rem; margin-bottom: 6px; color: var(--dark-navy); font-weight: 700; }
.card .card-meta { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.card .card-image {
width: 100%; aspect-ratio: 16/9;
background: var(--light-blue);
border-radius: var(--radius-sm);
margin-bottom: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: .9rem;
background-size: cover; background-position: center;
}
/* Service card with icon */
.service-card {
text-align: left;
}
.service-icon {
width: 56px; height: 56px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--light-blue), var(--soft-blue));
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
margin-bottom: 14px;
}
.card-cta {
margin-top: 12px;
color: var(--primary-blue);
font-weight: 600;
font-size: .9rem;
}
.card:hover .card-cta { color: var(--dark-navy); }
.location-card { text-align: center; }
/* Provider card (used on home + search) */
.provider-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: block;
position: relative;
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s;
color: var(--text);
}
.provider-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.provider-card.sponsored {
border-color: var(--brand-blue);
box-shadow: 0 0 0 2px rgba(33,102,142,.18), var(--shadow-md);
}
.provider-card .pc-cover {
width: 100%;
height: 110px;
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
background-size: cover;
background-position: center;
}
.provider-card .pc-cover.no-cover {
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
}
.provider-card .pc-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--border-soft) center/cover;
background-color: var(--border-soft);
border: 3px solid #fff;
margin: -28px 0 0 16px;
position: relative;
display: flex; align-items: center; justify-content: center;
color: var(--dark-navy); font-weight: 700;
box-shadow: var(--shadow-md);
}
.provider-card .pc-avatar.is-initial { font-size: 1.25rem; }
.provider-card .pc-body { padding: 8px 16px 16px; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.provider-card .pc-name {
font-weight: 700;
color: var(--dark-navy);
font-size: 1rem;
margin-bottom: 4px;
overflow-wrap: break-word;
word-break: break-word;
/* Clamp to 2 lines for grid layout */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.provider-card .pc-meta {
font-size: .82rem;
color: var(--muted);
margin-bottom: 4px;
overflow-wrap: break-word;
word-break: break-word;
/* Clamp long meta lines to 2 lines for grid layout */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.provider-card .pc-meta:last-of-type {
/* description meta — clamp tighter */
-webkit-line-clamp: 2;
}
.provider-card .card-cta {
margin-top: 8px;
color: var(--primary-blue);
font-weight: 600;
font-size: .85rem;
}
.provider-card:hover .card-cta { color: var(--dark-navy); }
.badge {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
background: var(--soft-blue);
color: var(--dark-navy);
vertical-align: middle;
margin-left: 6px;
}
.badge.verified {
background: var(--success);
color: #fff;
}
.badge.sponsored {
background: #e9ecef;
color: #888;
font-weight: 600;
font-size: .68rem;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
}
.badge.pending { background: var(--warning); color: #fff; }
.badge.approved { background: var(--success); color: #fff; }
.badge.rejected { background: var(--error); color: #fff; }
.badge.suspended { background: var(--error); color: #fff; }
.badge.draft { background: var(--muted); color: #fff; }
/* ----------------------- Footer ----------------------- */
.site-footer {
background: var(--heading-dark);
color: #cdd9e5;
padding: 48px 0 24px;
margin-top: 60px;
}
.site-footer h4 { color: #fff; margin-bottom: 12px; }
.site-footer a { color: #cdd9e5; }
.site-footer a:hover { color: var(--sky-blue); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer-bottom {
/* No border-top line — the copyright text sits cleanly below the footer grid */
border-top: 0;
padding-top: 18px;
margin-top: 30px;
text-align: center;
font-size: .85rem;
color: #8a9aa8;
/* Keep the entire copyright line on a single row — never wrap.
"© 2026 Trusted Home Nurse. All rights reserved." */
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
}
.footer-bottom .brand-wm { display: inline-block; white-space: nowrap; }
.footer-bottom .brand-wm span { white-space: nowrap; }
/* Footer brand column — logo only (no wordmark text) + tagline */
.footer-brand-col { display: flex; flex-direction: column; gap: 14px; }
.footer-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.footer-logo:hover { text-decoration: none; }
.footer-logo-img {
/* Transparent PNG sits directly on the dark footer bg — no border, no white bg.
Just the raw logo image, sized to look prominent. */
height: 72px;
width: auto;
max-width: 220px;
object-fit: contain;
display: block;
flex-shrink: 0;
background: transparent;
padding: 0;
border: 0;
border-radius: 0;
transition: transform .15s;
}
.footer-logo:hover .footer-logo-img {
transform: translateY(-1px);
}
.footer-tagline { color: #cdd9e5; font-size: .9rem; line-height: 1.5; margin: 0; }
.footer-bottom-wm { display: inline; margin: 0 4px; }
.footer-bottom-wm .brand-wm.footer-bottom { font-size: 1rem; }
@media (max-width: 768px) {
.footer-logo-img { height: 60px; max-width: 180px; }
}
@media (max-width: 480px) {
.footer-logo-img { height: 52px; max-width: 160px; }
.footer-bottom-wm .brand-wm.footer-bottom { font-size: .9rem; }
/* Shrink the copyright line a touch on tiny phones so the
whole "© 2026 Trusted Home Nurse. All rights reserved."
stays on a single row without horizontal scrolling. */
.footer-bottom { font-size: .76rem; }
.footer-bottom .brand-wm.footer-bottom { font-size: .82rem; }
}
@media (max-width: 360px) {
.footer-bottom { font-size: .68rem; }
.footer-bottom .brand-wm.footer-bottom { font-size: .74rem; }
}
/* ----------------------- Forms ----------------------- */
.form-row { margin-bottom: 14px; min-width: 0; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--dark-navy); overflow-wrap: break-word; }
.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
max-width: 100%;
padding: 11px 13px;
font-size: 1rem;
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text);
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
/* Prevent inputs from forcing parent width on long values */
min-width: 0;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.12);
}
.form-row textarea { resize: vertical; min-height: 100px; }
.form-row .hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
/* ----------------------- Buttons ----------------------- */
/* Primary button: #21668E background + #FFFFFF text, hover #174D6B */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 20px;
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: background .15s, transform .1s, color .15s;
}
.btn:hover { background: var(--brand-blue-hover); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
/* Secondary / CTA button: #DA373A background + #FFFFFF text, hover #B92A2D */
.btn.cta, .btn.red, .btn.secondary-cta {
background: var(--brand-red);
color: #fff;
}
.btn.cta:hover, .btn.red:hover, .btn.secondary-cta:hover {
background: var(--brand-red-hover);
color: #fff;
}
/* Outline button: transparent + #21668E border/text; hover #21668E bg + #fff text */
.btn.outline, .btn.secondary {
background: transparent;
color: var(--brand-blue);
border: 1.5px solid var(--brand-blue);
}
.btn.outline:hover, .btn.secondary:hover {
background: var(--brand-blue);
color: #fff;
border-color: var(--brand-blue);
}
.btn.danger { background: var(--error); }
.btn.danger:hover { background: #9a1212; }
.btn.warning { background: var(--warning); }
.btn.warning:hover { background: #b87d27; }
.btn.success { background: var(--success); }
.btn.success:hover { background: #1f663f; }
.btn.ghost { background: transparent; color: var(--brand-blue); border: 1px solid transparent; }
.btn.ghost:hover { background: var(--bg-light); color: var(--brand-blue); }
.btn.sm { padding: 7px 12px; font-size: .85rem; }
.btn.lg { padding: 14px 28px; font-size: 1.05rem; }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-whatsapp { background: #25D366; }
.btn-whatsapp:hover { background: #1da851; color: #fff; }
/* Submit button with processing state — for forms that upload files
(provider registration etc.). Hover is brand-blue-hover; "Processing..." shows
a spinner via ::before. */
.btn-submit-processing { position: relative; }
.btn-submit-processing:hover { background: var(--brand-blue-hover); color: #fff; }
.btn-submit-processing.is-processing {
background: var(--brand-blue-hover);
color: #fff;
cursor: wait;
opacity: .9;
}
.btn-submit-processing.is-processing::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* ----------------------- Terms checkbox ----------------------- */
.terms-row { margin: 18px 0 8px; }
.terms-check {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: .92rem;
color: var(--dark-navy);
font-weight: 500;
line-height: 1.4;
user-select: none;
}
/* Use the ACTUAL checkbox input — the global input[type="checkbox"] rule
already styles it as a perfect square with a Unicode ✓ checkmark.
We just need to make it visible (not hidden) inside the .terms-check label. */
.terms-check input[type="checkbox"] {
position: static !important;
opacity: 1 !important;
pointer-events: auto !important;
margin: 0 !important;
flex-shrink: 0 !important;
margin-top: 1px !important;
}
/* Hide the custom .terms-check-box span — we use the real checkbox now */
.terms-check-box {
display: none !important;
}
.terms-check-text { padding-top: 1px; }
.terms-check-text a {
color: var(--primary-blue);
text-decoration: underline;
font-weight: 600;
}
.terms-check-text a:hover { color: var(--brand-red); }
/* =====================================================================
GLOBAL — Make ALL checkboxes SQUARE across the site
(admin forms, provider forms, customer forms, etc.)
Uses a background SVG checkmark for the checked state — this is the
most reliable cross-browser approach (works on iOS Safari, Chrome,
Firefox, Edge). The ::after content approach is unreliable when
appearance:none is set on some mobile browsers.
===================================================================== */
input[type="checkbox"] {
border-radius: 4px !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
border: 2px solid var(--border-soft, #DCECF2);
background: #fff;
vertical-align: middle;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background .15s, border-color .15s;
display: inline-block;
}
input[type="checkbox"]:checked {
background-color: var(--brand-blue, #21668E);
border-color: var(--brand-blue, #21668E);
/* SVG checkmark — white tick on transparent bg, scaled to fit */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
}
/* Remove the old ::after pseudo-element — no longer needed */
input[type="checkbox"]:checked::after {
content: none !important;
}
input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(33,102,142,.18);
}
/* Larger checkbox specifically for the terms-check (registration forms) */
.terms-check input[type="checkbox"] {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
border-width: 3px !important;
border-color: var(--brand-blue, #21668E) !important;
background-color: #fff !important;
background-image: none !important;
border-radius: 6px !important;
box-shadow: 0 1px 4px rgba(33,102,142,.15) !important;
}
.terms-check input[type="checkbox"]:checked {
background-color: var(--brand-blue, #21668E) !important;
border-color: var(--brand-blue, #21668E) !important;
/* Larger SVG checkmark for the bigger checkbox */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
.terms-check input[type="checkbox"]:checked::after {
content: none !important;
}
.terms-check input[type="checkbox"]:focus {
outline: none !important;
box-shadow: 0 0 0 4px rgba(33,102,142,.2), 0 1px 4px rgba(33,102,142,.15) !important;
}
/* Shake animation when the user submits without checking the terms box */
.terms-check.shake {
animation: terms-shake .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes terms-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
/* Pulse glow on the checkbox border so users notice it */
.terms-check.shake input[type="checkbox"] {
border-color: var(--brand-red, #DA373A) !important;
box-shadow: 0 0 0 4px rgba(218,55,58,.15);
}
/* NOTE: The old .terms-check input[type="checkbox"] hiding rules have been
removed. We now use the ACTUAL checkbox input (styled as a square by the
global rule above) and the .terms-check-box span is hidden with display:none.
See the terms-check section above for the full styling. */
/* ----------------------- Flash messages ----------------------- */
.flash {
padding: 12px 16px;
border-radius: var(--radius-sm);
margin: 12px 0;
border-left: 4px solid var(--info);
background: var(--light-blue);
color: var(--dark-navy);
}
.flash-success { border-color: var(--success); background: #E7F6EC; color: var(--success); }
.flash-error { border-color: var(--error); background: #FBEBE9; color: var(--error); }
.flash-info { border-color: var(--info); background: var(--light-blue); }
/* ----------------------- Tables ----------------------- */
table.data {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
/* Allow table to scroll horizontally on tiny screens instead of breaking layout */
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 769px) {
table.data { display: table; overflow: visible; }
}
table.data th, table.data td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--light-blue);
font-size: .92rem;
vertical-align: top;
overflow-wrap: break-word;
word-break: break-word;
}
table.data th { background: var(--light-blue); font-weight: 700; color: var(--dark-navy); }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #f8fbff; }
/* ----------------------- Tabs ----------------------- */
/* 3 equal-width side-by-side sections — no horizontal scrollbar */
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 2px solid var(--bg-light);
margin-bottom: 22px;
gap: 0;
}
.tabs .tab {
padding: 13px 10px;
cursor: pointer;
border: 0;
background: none;
color: var(--muted-text);
font-weight: 600;
font-size: .98rem;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-family: inherit;
text-align: center;
width: 100%;
min-width: 0;
transition: color .15s, border-color .15s, background .15s;
border-radius: 8px 8px 0 0;
}
.tabs .tab:hover {
color: var(--brand-blue);
background: var(--bg-light);
}
.tabs .tab.active {
color: var(--brand-blue);
border-color: var(--brand-blue);
background: #fff;
font-weight: 700;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ----------------------- Auth pages ----------------------- */
.auth-wrap {
max-width: 480px;
margin: 60px auto;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow-md);
}
.auth-wrap h1 { text-align: center; margin-bottom: 8px; color: var(--heading-dark); }
.auth-wrap .auth-sub { text-align: center; color: var(--muted-text); margin-bottom: 24px; }
/* Auth page responsive — phones */
@media (max-width: 540px) {
.auth-wrap {
margin: 16px 10px;
padding: 18px 16px;
border-radius: 12px;
}
.auth-wrap h1 { font-size: 1.5rem; margin-bottom: 6px; }
.auth-wrap .auth-sub { font-size: .9rem; margin-bottom: 18px; }
/* Tabs stay as 3 equal sections — just shrink font + padding */
.tabs { margin-bottom: 18px; }
.tabs .tab { padding: 11px 6px; font-size: .88rem; }
/* Make form inputs full-width and easy to tap on phones */
.auth-wrap .form-row label { font-size: .9rem; }
.auth-wrap .form-row input,
.auth-wrap .form-row select,
.auth-wrap .form-row textarea {
padding: 12px 14px;
font-size: 16px; /* >=16px prevents iOS Safari auto-zoom on focus */
}
.auth-wrap .form-actions .btn { padding: 13px 18px; font-size: 1rem; }
.auth-wrap .text-center { font-size: .88rem; }
}
@media (max-width: 360px) {
.auth-wrap { margin: 12px 6px; padding: 14px 12px; }
.auth-wrap h1 { font-size: 1.3rem; }
.tabs .tab { padding: 10px 4px; font-size: .8rem; }
}
/* ----------------------- Dashboard layout ----------------------- */
.dash-layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: calc(100vh - var(--header-h));
}
.dash-sidebar {
background: var(--heading-dark);
color: #cdd9e5;
padding: 20px 0;
}
.dash-sidebar h3 {
color: #fff;
padding: 0 18px 12px;
font-size: 1.05rem;
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 0 12px;
}
.dash-sidebar a {
display: block;
padding: 10px 18px;
color: #cdd9e5;
font-size: .92rem;
border-left: 3px solid transparent;
}
.dash-sidebar a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.dash-sidebar a.active { background: rgba(33,102,142,.18); color: #fff; border-color: var(--brand-blue); }
.dash-main { padding: 28px; background: var(--bg-light); min-height: 600px; min-width: 0; overflow-x: hidden; }
.dash-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.dash-card {
background: #fff;
padding: 18px 20px;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--primary-blue);
}
.dash-card.success { border-color: var(--success); }
.dash-card.warning { border-color: var(--warning); }
.dash-card.error { border-color: var(--error); }
.dash-card .label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dash-card .value { font-size: 1.6rem; font-weight: 700; color: var(--dark-navy); margin-top: 4px; }
/* ----------------------- Admin layout ----------------------- */
.admin-layout {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
.admin-sidebar {
background: var(--heading-dark);
color: #cdd9e5;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.admin-sidebar .brand {
padding: 18px;
color: #fff;
font-weight: 800;
font-size: 1.1rem;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-sidebar .group {
padding: 12px 12px 4px;
font-size: .72rem;
text-transform: uppercase;
color: #8a9aa8;
letter-spacing: .08em;
font-weight: 700;
}
.admin-sidebar a {
display: block;
padding: 8px 18px;
color: #cdd9e5;
font-size: .9rem;
border-left: 3px solid transparent;
}
.admin-sidebar a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.admin-sidebar a.active { background: rgba(33,102,142,.25); color: #fff; border-color: var(--brand-blue); }
.admin-main { padding: 22px 28px; background: var(--bg-light); min-height: 100vh; min-width: 0; overflow-x: hidden; }
.admin-topbar {
display: flex; justify-content: space-between; align-items: center;
background: #fff; padding: 14px 22px; border-radius: var(--radius); margin-bottom: 22px;
box-shadow: var(--shadow-sm);
flex-wrap: wrap;
gap: 10px;
}
.admin-topbar h1 { font-size: 1.3rem; margin: 0; }
/* ----------------------- Maintenance toggle (admin top-bar) ----------------------- */
.maint-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid transparent;
font-size: .85rem;
font-weight: 700;
cursor: pointer;
transition: all .2s;
font-family: inherit;
letter-spacing: .02em;
}
.maint-toggle-btn .maint-toggle-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px rgba(255,255,255,.5);
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
.maint-toggle-btn.maintenance-on {
background: #FFF3CD;
color: #856404;
border-color: #FFE69C;
}
.maint-toggle-btn.maintenance-off {
background: #E7F6EC;
color: #1E7E34;
border-color: #B7E2C2;
}
.maint-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .55; transform: scale(.85); }
}
/* When maintenance is OFF, kill the pulse animation */
.maint-toggle-btn.maintenance-off .maint-toggle-dot { animation: none; }
/* ----------------------- Pagination ----------------------- */
.pagination {
display: flex; gap: 6px; justify-content: center;
margin-top: 20px;
}
.pagination a {
padding: 6px 12px; border: 1px solid var(--soft-blue); border-radius: 6px;
background: #fff; color: var(--primary-blue);
}
.pagination a.active { background: var(--primary-blue); color: #fff; }
/* ----------------------- Search results ----------------------- */
/* 3 columns on PC, 2 columns on tablet, 1 column on phone */
.search-results {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns on PC */
gap: 18px;
}
@media (max-width: 992px) {
.search-results { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
.search-results { grid-template-columns: 1fr; gap: 12px; }
}
/* ----------------------- Provider Profile Page (with cover banner) ----------------------- */
.provider-profile-page { padding-bottom: 60px; }
.provider-cover {
width: 100%;
min-height: 280px;
background-color: var(--soft-blue);
background-size: cover;
background-position: center;
position: relative;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
}
.provider-cover.no-cover {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-navy) 100%);
}
.provider-cover-overlay {
background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.75) 100%);
width: 100%; height: 100%;
min-height: 280px;
display: flex; align-items: flex-end;
padding: 30px 0 24px;
}
.provider-cover-inner { width: 100%; }
.cover-crumbs { color: #fff; opacity: .95; margin-bottom: 16px; font-size: .85rem; }
.cover-crumbs a { color: #fff; text-decoration: underline; }
.cover-crumbs span { color: rgba(255,255,255,.85); }
.provider-cover-grid {
display: grid;
grid-template-columns: 110px 1fr;
gap: 22px;
align-items: center;
}
.provider-avatar-wrap { position: relative; }
.provider-avatar {
width: 110px; height: 110px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: #fff;
border: 4px solid #fff;
box-shadow: var(--shadow-lg);
display: flex; align-items: center; justify-content: center;
font-size: 2.4rem;
font-weight: 800;
color: var(--primary-blue);
}
.provider-avatar.is-initial { background: linear-gradient(135deg, var(--soft-blue), var(--primary-blue)); color: #fff; }
.verify-tick {
position: absolute;
bottom: 6px; right: 6px;
width: 32px; height: 32px;
background: var(--success);
color: #fff;
border-radius: 50%;
border: 3px solid #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: .9rem;
box-shadow: var(--shadow-md);
}
.provider-cover-info { color: #fff; min-width: 0; }
.provider-cover-name {
color: #fff;
font-size: 2rem;
margin: 0 0 8px;
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
overflow-wrap: break-word;
word-break: break-word;
}
.provider-cover-meta {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 14px;
overflow-wrap: break-word;
}
.meta-pill {
background: rgba(255,255,255,.18);
color: #fff;
padding: 5px 12px;
border-radius: 999px;
font-size: .85rem;
font-weight: 500;
backdrop-filter: blur(6px);
}
.provider-cover-actions {
display: flex; gap: 8px; flex-wrap: wrap;
}
.provider-cover-actions .btn {
background: rgba(255,255,255,.95);
color: var(--primary-blue);
}
.provider-cover-actions .btn:hover { background: #fff; }
.provider-cover-actions .btn-whatsapp { background: #25D366; color: #fff; }
.provider-cover-actions .btn-whatsapp:hover { background: #1da851; color: #fff; }
.profile-body { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-top: 30px; min-width: 0; }
.profile-body > * { min-width: 0; }
.profile-section {
background: #fff; padding: 22px; border-radius: var(--radius);
border: 1px solid var(--border); margin-bottom: 18px;
box-shadow: var(--shadow-sm);
min-width: 0;
overflow: hidden;
}
.profile-section h3 { margin-top: 0; color: var(--dark-navy); }
.profile-section p { overflow-wrap: break-word; word-break: break-word; }
.lock-phone {
background: var(--light-blue);
border: 1px dashed var(--primary-blue);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.lock-phone .masked {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 3px;
color: var(--dark-navy);
margin: 10px 0;
}
.phone-revealed {
background: linear-gradient(135deg, var(--light-blue), #fff);
border: 1px solid var(--success);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.phone-number {
font-size: 1.6rem;
font-weight: 800;
color: var(--success);
margin: 8px 0 14px;
letter-spacing: 1px;
}
/* Mobile sticky contact bar */
.mobile-contact-bar {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid var(--border);
padding: 10px 16px;
z-index: 100;
box-shadow: 0 -4px 14px rgba(15,23,42,.08);
}
.mobile-contact-bar .btn { width: 100%; }
/* ----------------------- Provider CTA ----------------------- */
/* Distinct from other sections — deep navy → brand blue gradient with red CTA accent */
.provider-cta {
background:
radial-gradient(900px 320px at 80% -100%, rgba(218,55,58,.22), transparent 60%),
linear-gradient(135deg, var(--heading-dark) 0%, var(--brand-blue) 100%);
color: #fff;
border-radius: var(--radius);
padding: 60px 0;
margin-top: 30px;
box-shadow: var(--shadow-md);
}
.provider-cta h2 { color: #fff; }
.provider-cta p { color: rgba(255,255,255,.9); max-width: 600px; margin: 0 auto 24px; }
/* The CTA button inside this section — red accent */
.provider-cta .btn,
.provider-cta .btn.cta-style {
background: var(--brand-red);
color: #fff;
border: 0;
box-shadow: 0 4px 14px rgba(218,55,58,.35);
}
.provider-cta .btn:hover,
.provider-cta .btn.cta-style:hover {
background: var(--brand-red-hover);
color: #fff;
}
/* ----------------------- Charts ----------------------- */
.chart-wrap {
background: #fff; padding: 18px; border-radius: var(--radius);
border: 1px solid var(--border); margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 12px; }
.chart-bars .bar {
flex: 1; background: var(--primary-blue); border-radius: 4px 4px 0 0;
min-height: 2px; position: relative; transition: height .3s;
}
.chart-bars .bar:hover { background: var(--dark-navy); }
.chart-bars .bar .lbl {
position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
font-size: .7rem; color: var(--muted);
}
/* ----------------------- Responsive ----------------------- */
@media (max-width: 992px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.dash-cards { grid-template-columns: repeat(2, 1fr); }
.profile-body { grid-template-columns: 1fr; }
.how-it-works { grid-template-columns: repeat(2, 1fr); }
.trust-badges { grid-template-columns: repeat(2, 1fr); }
.hero h1 { font-size: 2rem; }
}
@media (max-width: 768px) {
.site-nav {
display: none;
flex-direction: column;
position: absolute;
top: var(--header-h);
left: 0; right: 0;
background: #fff;
padding: 10px;
border-bottom: 1px solid var(--border);
margin-left: 0;
z-index: 60; /* same stack as search overlay so toggling works cleanly */
box-shadow: var(--shadow-md);
}
.site-nav.open { display: flex; }
.nav-toggle {
display: inline-flex; background: none; border: 0; font-size: 1.5rem;
cursor: pointer; color: var(--dark-navy);
padding: 6px 10px;
}
.hero h1 { font-size: 1.7rem; }
.hero p.lead { font-size: 1rem; }
.hero-search { grid-template-columns: 1fr; }
.hero-search button { padding: 13px; }
.grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
/* On mobile, sidebars become slide-out drawers (handled by the
.admin-sidebar.open / .dash-sidebar.open transform rules added
in the v8 CSS block at the end of this file). The grid is 1-col
so the main content takes full width while the sidebar is hidden. */
.dash-layout, .admin-layout { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: 1fr; }
.trust-badges { grid-template-columns: 1fr; }
.mobile-contact-bar { display: block; }
.provider-profile-page { padding-bottom: 80px; }
.provider-cover-grid { grid-template-columns: 80px 1fr; gap: 14px; }
.provider-avatar { width: 80px; height: 80px; font-size: 1.8rem; }
.provider-cover-name { font-size: 1.4rem; }
.admin-main, .dash-main { padding: 18px 16px; }
}
@media (max-width: 540px) {
.dash-cards { grid-template-columns: 1fr; }
.grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
.how-it-works { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
/* .auth-wrap responsive rules are defined above in the Auth pages section */
.hero h1 { font-size: 1.5rem; }
.quick-pills { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
}
/* ----------------------- Print ----------------------- */
@media print {
.site-header, .site-footer, .dash-sidebar, .admin-sidebar, .nav-toggle, .mobile-contact-bar { display: none; }
.dash-layout, .admin-layout { display: block; }
}
/* ----------------------- Misc utilities ----------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 16px; }
.hide { display: none; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
background: var(--light-blue);
color: var(--primary-blue);
padding: 4px 11px;
border-radius: 999px;
font-size: .8rem;
font-weight: 500;
border: 1px solid var(--soft-blue);
}
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
.alert-info { background: var(--light-blue); padding: 12px; border-radius: 6px; margin-bottom: 12px; overflow-wrap: break-word; word-break: break-word; }
.alert-warning { background: #FFF3CD; padding: 12px; border-radius: 6px; margin-bottom: 12px; color: var(--warning); }
.alert-danger { background: #FBEAE9; padding: 12px; border-radius: 6px; margin-bottom: 12px; color: var(--error); }
.cover-preview { margin-bottom: 10px; }
/* Breadcrumbs */
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumbs a { color: var(--primary-blue); }
.breadcrumbs span { color: var(--text); }
/* =====================================================================
HEADER SEARCH BAR (direct search above nav)
===================================================================== */
.site-header { padding-bottom: 0; }
.site-header .container.header-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
min-height: var(--header-h);
}
.header-search-bar {
flex: 0 1 380px;
min-width: 220px;
margin: 0;
position: relative;
display: flex;
align-items: center;
background: var(--light-blue);
border: 1px solid var(--soft-blue);
border-radius: 999px;
padding: 4px 4px 4px 14px;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.header-search-bar:focus-within {
background: #fff;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.14);
}
.header-search-bar .hsi-icon {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--muted-text);
margin-right: 8px;
}
.header-search-bar input {
flex: 1;
border: 0;
background: transparent;
outline: none;
font-size: .92rem;
color: var(--body-text);
padding: 7px 0;
font-family: inherit;
}
.header-search-bar input::placeholder { color: var(--muted-text); }
.header-search-bar button {
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: 999px;
padding: 7px 16px;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
.header-search-bar button:hover { background: var(--brand-blue-hover); }
/* Header credit pill (customer) */
.header-credit-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
color: var(--heading-dark);
padding: 7px 14px;
border-radius: 999px;
font-size: .85rem;
font-weight: 700;
border: 1px solid var(--border-soft);
text-decoration: none;
white-space: nowrap;
}
.header-credit-pill:hover { text-decoration: none; background: #fff; border-color: var(--brand-blue); }
.header-credit-pill .pill-icon {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--brand-blue);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 800;
}
.header-credit-pill .pill-value { color: var(--brand-blue); }
/* Responsive: tighten header on tablet, collapse on mobile */
@media (max-width: 992px) {
/* Hide the inline header search bar on tablet — show search icon toggle instead */
.header-search-bar { display: none !important; }
.header-search-toggle { display: inline-flex; }
.site-nav a { padding: 8px 8px; font-size: .85rem; }
.header-credit-pill { padding: 6px 10px; font-size: .8rem; }
.header-credit-pill .pill-icon { width: 16px; height: 16px; font-size: .65rem; }
}
/* Responsive: hide header search on tiny screens, show toggle */
@media (max-width: 768px) {
.header-search-bar { display: none !important; }
.header-search-toggle { display: inline-flex; }
.site-header .container.header-row { flex-wrap: nowrap; padding-bottom: 0; gap: 10px; }
}
/* =====================================================================
SERVICES PAGE — attractive listing + detail
===================================================================== */
.services-hero {
background:
radial-gradient(900px 320px at 80% -100%, rgba(33,102,142,.22), transparent 60%),
linear-gradient(135deg, var(--bg-light) 0%, var(--bg-soft) 100%);
padding: 50px 0 56px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border-soft);
}
.services-hero::after {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 18% 20%, rgba(255,255,255,.55) 0, transparent 38%),
radial-gradient(circle at 90% 70%, rgba(33,102,142,.15) 0, transparent 35%);
pointer-events: none;
}
.services-hero .container { position: relative; z-index: 1; }
.services-hero h1 {
font-size: 2.2rem;
margin-bottom: .2em;
letter-spacing: -.01em;
}
.services-hero p.lead {
font-size: 1.05rem;
color: var(--dark-navy);
opacity: .82;
max-width: 680px;
margin: 0 0 18px;
}
.services-hero .services-search {
display: grid;
grid-template-columns: 2fr 1.4fr auto;
gap: 10px;
max-width: 720px;
background: #fff;
padding: 10px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
.services-hero .services-search input {
padding: 11px 14px;
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
font-size: .95rem;
background: #fff;
color: var(--text);
font-family: inherit;
width: 100%;
outline: none;
}
.services-hero .services-search input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(33,102,142,.1); }
.services-hero .services-search button {
background: var(--primary-blue);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
padding: 0 22px;
font-weight: 700;
font-size: .95rem;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
.services-hero .services-search button:hover { background: var(--brand-blue-hover); }
.section-pad { padding: 50px 0; }
.section-pad.alt { background: var(--light-blue); }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.section-head h2 { margin: 0; font-size: 1.45rem; }
.section-head .head-link { color: var(--primary-blue); font-weight: 600; font-size: .9rem; }
/* Category cards */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.category-card {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 18px;
text-align: center;
text-decoration: none;
color: var(--text);
transition: transform .15s, box-shadow .15s, border-color .15s;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(33,102,142,.06), rgba(123,204,228,.12));
opacity: 0;
transition: opacity .15s;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--brand-blue);
text-decoration: none;
}
.category-card:hover::before { opacity: 1; }
.category-card .cc-icon {
width: 54px; height: 54px;
margin: 0 auto 12px;
border-radius: 14px;
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 1.2rem;
color: var(--brand-blue);
position: relative;
z-index: 1;
}
.category-card .cc-name {
font-weight: 700;
color: var(--heading-dark);
font-size: 1rem;
position: relative;
z-index: 1;
}
.category-card .cc-count {
font-size: .8rem;
color: var(--muted);
margin-top: 4px;
position: relative;
z-index: 1;
}
/* Service cards */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns on PC */
gap: 18px;
}
.service-tile {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: var(--text);
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.service-tile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--brand-blue);
text-decoration: none;
}
.service-tile .st-image {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
background-size: cover;
background-position: center;
display: flex; align-items: center; justify-content: center;
color: var(--brand-blue);
font-weight: 800;
font-size: 1.6rem;
letter-spacing: .03em;
}
.service-tile .st-body { padding: 16px 18px; }
.service-tile .st-title {
font-weight: 700;
color: var(--heading-dark);
font-size: 1.05rem;
margin: 0 0 4px;
}
.service-tile .st-meta {
font-size: .85rem;
color: var(--muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 38px;
}
.service-tile .st-cta {
margin-top: 10px;
color: var(--primary-blue);
font-size: .85rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.service-tile:hover .st-cta { color: var(--dark-navy); }
/* Service detail header */
.service-detail-hero {
background:
linear-gradient(135deg, var(--bg-light) 0%, var(--bg-soft) 100%);
padding: 36px 0 30px;
border-bottom: 1px solid var(--border-soft);
}
.service-detail-hero h1 {
font-size: 2rem;
margin-bottom: .2em;
}
.service-detail-hero p { color: var(--heading-dark); opacity: .8; max-width: 760px; margin: 0; }
/* =====================================================================
LOCATION DETAIL HERO — full-bleed city image with overlay
===================================================================== */
.location-detail-hero {
width: 100%;
min-height: 260px;
background-size: cover;
background-position: center;
position: relative;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
}
.location-detail-hero-overlay {
background: linear-gradient(180deg, rgba(23,59,79,.55) 0%, rgba(23,59,79,.78) 100%);
width: 100%;
min-height: 260px;
display: flex;
align-items: flex-end;
padding: 30px 0 26px;
}
.location-detail-hero-overlay .container { position: relative; z-index: 1; }
.location-detail-hero-overlay .breadcrumbs { color: rgba(255,255,255,.85); margin-bottom: 10px; }
.location-detail-hero-overlay .breadcrumbs a { color: var(--sky-blue); }
.location-detail-hero-overlay .breadcrumbs span { color: #fff; }
.location-detail-hero-overlay h1 {
color: #fff;
font-size: 2.2rem;
margin: 0 0 .15em;
text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.location-detail-hero-overlay p {
color: rgba(255,255,255,.92);
font-size: 1rem;
margin: 0;
}
@media (max-width: 540px) {
.location-detail-hero, .location-detail-hero-overlay { min-height: 200px; }
.location-detail-hero-overlay { padding: 22px 0 18px; }
.location-detail-hero-overlay h1 { font-size: 1.7rem; }
.location-detail-hero-overlay p { font-size: .9rem; }
}
/* =====================================================================
SERVICE DETAIL SEARCH — premium hero search bar
===================================================================== */
.svc-detail-search {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 10px;
align-items: stretch;
background: #fff;
padding: 10px;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
max-width: 860px;
margin: 24px 0 0;
}
.svc-detail-search .sds-field {
position: relative;
display: flex;
align-items: center;
min-width: 0;
}
.svc-detail-search .sds-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--muted);
pointer-events: none;
flex-shrink: 0;
}
.svc-detail-search .sds-field input {
width: 100%;
padding: 13px 14px 13px 42px;
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
font-size: .95rem;
background: #fff;
color: var(--text);
font-family: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
min-width: 0;
}
.svc-detail-search .sds-field input:focus {
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.12);
}
.svc-detail-search .sds-field input::placeholder {
color: var(--muted-text);
}
.svc-detail-search button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
padding: 0 26px;
font-weight: 700;
font-size: .95rem;
cursor: pointer;
font-family: inherit;
transition: background .15s, transform .1s;
white-space: nowrap;
}
.svc-detail-search button svg {
width: 18px; height: 18px;
}
.svc-detail-search button:hover {
background: var(--brand-blue-hover);
color: #fff;
}
.svc-detail-search button:active {
transform: translateY(1px);
}
@media (max-width: 768px) {
.svc-detail-search {
grid-template-columns: 1fr;
gap: 8px;
padding: 8px;
}
.svc-detail-search .sds-field input {
padding: 12px 14px 12px 42px;
font-size: 1rem;
}
.svc-detail-search button {
padding: 13px;
width: 100%;
justify-content: center;
}
}
/* Provider result card v2 — more attractive */
.provider-card.v2 {
display: grid;
grid-template-columns: 220px 1fr auto;
gap: 0;
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.provider-card.v2 .pc-cover-block {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
background-size: cover;
background-position: center;
min-height: 160px;
position: relative;
}
.provider-card.v2 .pc-cover-block.has-image { background-color: var(--soft-blue); }
.provider-card.v2 .pc-cover-block .pc-avatar-mini {
position: absolute;
bottom: -28px; left: 18px;
width: 64px; height: 64px;
border-radius: 50%;
background-size: cover; background-position: center;
background-color: #fff;
border: 3px solid #fff;
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center;
font-weight: 800;
color: var(--primary-blue);
font-size: 1.3rem;
}
.provider-card.v2 .pc-info {
padding: 18px 22px 18px 100px;
display: flex; flex-direction: column; justify-content: center;
}
.provider-card.v2 .pc-actions {
padding: 18px 22px;
display: flex; flex-direction: column; gap: 8px; justify-content: center;
align-items: stretch;
border-left: 1px solid var(--border);
background: var(--light-blue);
min-width: 160px;
}
.provider-card.v2 .pc-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 8px 0 4px;
}
.provider-card.v2 .pc-tag {
background: var(--light-blue);
color: var(--primary-blue);
border: 1px solid var(--soft-blue);
padding: 3px 10px;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
}
.provider-card.v2 .pc-loc {
font-size: .85rem; color: var(--muted);
margin: 4px 0;
display: flex; align-items: center; gap: 6px;
}
.provider-card.v2 .pc-loc-dot {
width: 8px; height: 8px;
background: var(--primary-blue);
border-radius: 50%;
display: inline-block;
}
.provider-card.v2 .pc-desc {
font-size: .88rem; color: var(--text);
line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin: 4px 0 0;
}
.provider-card.v2 .pc-actions .btn { width: 100%; }
@media (max-width: 768px) {
.provider-card.v2 { grid-template-columns: 1fr; }
.provider-card.v2 .pc-cover-block { min-height: 130px; }
.provider-card.v2 .pc-info { padding: 36px 18px 14px; }
.provider-card.v2 .pc-actions { border-left: 0; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; }
.provider-card.v2 .pc-actions .btn { flex: 1; min-width: 120px; }
.category-grid { grid-template-columns: repeat(2, 1fr); }
/* Service grid: 2 columns on phone (was 1fr) */
.service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.services-hero .services-search { grid-template-columns: 1fr; }
.services-hero .services-search button { padding: 12px; }
}
/* Very small phones: keep service grid at 2 columns but tighten */
@media (max-width: 480px) {
.service-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.service-tile .st-image { aspect-ratio: 4/3; }
.service-tile .st-body { padding: 10px 12px; }
.service-tile .st-title { font-size: .92rem; }
.service-tile .st-meta { font-size: .78rem; min-height: 0; }
.service-tile .st-cta { font-size: .78rem; margin-top: 6px; }
}
/* =====================================================================
PROVIDER PROFILE PAGE (admin view)
===================================================================== */
.profile-cover-wrap {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
background-size: cover;
background-position: center;
border-radius: var(--radius);
padding: 36px 28px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.profile-cover-wrap.no-cover {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
}
.profile-cover-wrap::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,23,42,.15), rgba(15,23,42,.55));
pointer-events: none;
}
.profile-cover-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 22px;
align-items: center;
}
.profile-cover-inner .pc-avatar-large {
width: 110px; height: 110px;
border-radius: 50%;
background-size: cover; background-position: center;
background-color: #fff;
border: 4px solid #fff;
box-shadow: var(--shadow-lg);
display: flex; align-items: center; justify-content: center;
font-size: 2.4rem; font-weight: 800; color: var(--primary-blue);
}
.profile-cover-inner .pc-info-block { color: #fff; }
.profile-cover-inner .pc-info-block h2 {
color: #fff;
font-size: 1.7rem;
margin: 0 0 6px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.profile-cover-inner .pc-meta-row {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 10px;
}
.profile-cover-inner .pc-meta-pill {
background: rgba(255,255,255,.18);
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: .82rem;
font-weight: 500;
backdrop-filter: blur(6px);
}
.profile-cover-inner .pc-status {
font-size: .85rem;
opacity: .9;
}
.profile-cover-inner .pc-stats {
display: flex;
gap: 14px;
align-items: center;
}
.profile-cover-inner .pc-stat {
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radius-sm);
padding: 12px 18px;
text-align: center;
min-width: 100px;
backdrop-filter: blur(8px);
}
.profile-cover-inner .pc-stat .num {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
display: block;
}
.profile-cover-inner .pc-stat .lbl {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .85;
}
.profile-info-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
margin-top: 22px;
}
.profile-info-grid .info-block {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-sm);
}
.profile-info-grid .info-block h3 {
margin: 0 0 14px;
font-size: 1.1rem;
color: var(--dark-navy);
display: flex; align-items: center; gap: 8px;
}
.profile-info-grid .info-block h3::before {
content: '';
width: 4px; height: 18px;
background: var(--primary-blue);
border-radius: 2px;
display: inline-block;
}
.profile-info-grid .info-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 18px;
}
.profile-info-grid .info-list li {
display: flex;
flex-direction: column;
padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.profile-info-grid .info-list li .lbl {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
font-weight: 600;
}
.profile-info-grid .info-list li .val {
font-size: .95rem;
color: var(--dark-navy);
font-weight: 500;
margin-top: 2px;
word-break: break-word;
}
.profile-info-grid .desc-block {
margin-top: 16px;
padding: 14px;
background: var(--light-blue);
border-radius: var(--radius-sm);
border-left: 3px solid var(--primary-blue);
}
.profile-info-grid .desc-block p {
margin: 0;
color: var(--dark-navy);
line-height: 1.6;
}
.profile-action-row {
margin-top: 18px;
display: flex; flex-wrap: wrap; gap: 10px;
}
.profile-action-row .btn { flex: 0 0 auto; }
.profile-side-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow-sm);
margin-bottom: 14px;
}
.profile-side-card h3 {
margin: 0 0 12px;
font-size: 1rem;
color: var(--dark-navy);
display: flex; align-items: center; gap: 8px;
}
.profile-side-card h3::before {
content: '';
width: 4px; height: 16px;
background: var(--primary-blue);
border-radius: 2px;
display: inline-block;
}
.profile-side-card .stat-line {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
border-bottom: 1px dashed var(--border);
}
.profile-side-card .stat-line:last-child { border-bottom: 0; }
.profile-side-card .stat-line .lbl { color: var(--muted); font-size: .88rem; }
.profile-side-card .stat-line .val { color: var(--dark-navy); font-weight: 700; }
.profile-keyword-cloud {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 8px;
}
@media (max-width: 992px) {
.profile-info-grid { grid-template-columns: 1fr; }
.profile-info-grid .info-list { grid-template-columns: 1fr; }
.profile-cover-inner { grid-template-columns: 80px 1fr; }
.profile-cover-inner .pc-avatar-large { width: 80px; height: 80px; font-size: 1.8rem; }
.profile-cover-inner .pc-stats { grid-column: 1 / -1; justify-content: flex-start; margin-top: 14px; }
.profile-cover-inner .pc-stat { min-width: 80px; padding: 10px 12px; }
.profile-cover-inner .pc-stat .num { font-size: 1.2rem; }
}
/* =====================================================================
CAMPAIGN CREATE / EDIT — Run Ad form
===================================================================== */
.run-ad-wrap { max-width: 920px; }
.run-ad-header {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
color: #fff;
border-radius: var(--radius);
padding: 26px 28px;
margin-bottom: 22px;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.run-ad-header::before {
content: '';
position: absolute;
right: -60px; top: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
pointer-events: none;
}
.run-ad-header h1 { color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.run-ad-header p { color: rgba(255,255,255,.9); margin: 0; font-size: .95rem; max-width: 580px; }
.run-ad-header .run-ad-tag {
display: inline-block;
background: rgba(255,255,255,.18);
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
margin-bottom: 10px;
text-transform: uppercase;
}
.form-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 26px 28px;
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.form-card h3 {
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid var(--light-blue);
font-size: 1.1rem;
color: var(--dark-navy);
display: flex; align-items: center; gap: 10px;
}
.form-card h3 .fc-num {
width: 28px; height: 28px;
background: var(--primary-blue);
color: #fff;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .85rem; font-weight: 800;
}
.form-card .auto-link-note {
background: var(--light-blue);
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-size: .88rem;
color: var(--dark-navy);
margin: 12px 0;
display: flex; align-items: flex-start; gap: 10px;
}
.form-card .auto-link-note .aln-icon {
width: 20px; height: 20px;
background: var(--primary-blue);
color: #fff;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .75rem; font-weight: 800;
flex-shrink: 0;
margin-top: 1px;
}
.form-card .auto-link-note a { color: var(--primary-blue); font-weight: 600; }
/* Image upload with preview */
.ad-image-upload {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
align-items: start;
}
.ad-image-preview {
width: 200px;
height: 140px;
border: 2px dashed var(--soft-blue);
border-radius: var(--radius-sm);
background: var(--light-blue);
background-size: cover;
background-position: center;
display: flex; align-items: center; justify-content: center;
color: var(--muted);
font-size: .85rem;
text-align: center;
position: relative;
overflow: hidden;
}
.ad-image-preview.has-image { border-style: solid; border-color: var(--primary-blue); }
.ad-image-preview .placeholder-text {
padding: 12px;
line-height: 1.4;
}
.ad-image-upload .ad-image-actions {
display: flex; flex-direction: column; gap: 8px;
}
.ad-image-upload .ad-image-actions input[type="file"] {
font-size: .9rem;
}
.ad-image-upload .ad-image-actions .hint {
font-size: .82rem; color: var(--muted); margin-top: 4px;
}
/* Manual location field combo */
.location-combo {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
}
.location-combo .form-row { margin: 0; }
@media (max-width: 768px) {
.location-combo { grid-template-columns: 1fr; }
.ad-image-upload { grid-template-columns: 1fr; }
.ad-image-preview { width: 100%; max-width: 280px; }
}
/* Run Ad CTA button — prominent */
.btn-run-ad {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
color: #fff;
border: 0;
padding: 14px 32px;
font-size: 1.05rem;
font-weight: 700;
border-radius: var(--radius-sm);
cursor: pointer;
box-shadow: 0 6px 18px rgba(28,100,242,.35);
transition: transform .12s, box-shadow .15s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-run-ad:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(28,100,242,.45);
color: #fff;
text-decoration: none;
}
.btn-run-ad:active { transform: translateY(0); }
/* Budget preset pills */
.budget-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.budget-pill {
background: #fff;
color: var(--primary-blue);
border: 1px solid var(--soft-blue);
padding: 6px 14px;
border-radius: 999px;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s, color .15s, border-color .15s;
}
.budget-pill:hover, .budget-pill.active {
background: var(--primary-blue);
color: #fff;
border-color: var(--primary-blue);
}
/* =====================================================================
ENHANCED FORM (profile_edit + general)
===================================================================== */
.form-section {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 26px;
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.form-section h3 {
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--light-blue);
font-size: 1.1rem;
color: var(--dark-navy);
display: flex; align-items: center; gap: 10px;
}
.form-section h3 .fs-num {
width: 26px; height: 26px;
background: var(--primary-blue);
color: #fff;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .8rem; font-weight: 800;
}
/* Image preview for profile edit */
.image-preview-tile {
width: 100%;
max-width: 200px;
aspect-ratio: 1;
border-radius: var(--radius-sm);
background-size: cover;
background-position: center;
background-color: var(--light-blue);
border: 2px solid var(--soft-blue);
margin-bottom: 8px;
}
.image-preview-tile.cover {
aspect-ratio: 3/1;
max-width: 100%;
}
.image-preview-tile.empty {
display: flex; align-items: center; justify-content: center;
color: var(--muted);
font-size: .85rem;
}
/* Gallery grid in profile edit */
.gallery-grid-edit {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 10px;
}
.gallery-grid-edit .gallery-thumb {
position: relative;
height: 180px; /* FIXED HEIGHT — consistent thumbnails in the edit grid */
border-radius: var(--radius-sm);
overflow: hidden;
background-size: cover;
background-position: center;
background-color: var(--light-blue);
border: 1px solid var(--border);
}
.gallery-grid-edit .gallery-thumb .remove-btn {
position: absolute;
top: 4px; right: 4px;
width: 24px; height: 24px;
background: rgba(15,23,42,.7);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: .8rem;
display: flex; align-items: center; justify-content: center;
}
.gallery-grid-edit .gallery-thumb .remove-btn:hover { background: var(--error); }
@media (max-width: 768px) {
.gallery-grid-edit { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
PUBLIC PROVIDER PROFILE enhancements
===================================================================== */
.provider-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 18px;
}
.provider-stat-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
text-align: center;
box-shadow: var(--shadow-sm);
}
.provider-stat-card .num {
font-size: 1.4rem;
font-weight: 800;
color: var(--primary-blue);
display: block;
}
.provider-stat-card .lbl {
font-size: .8rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
@media (max-width: 768px) {
.provider-stats-row { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
CAMPAIGN LIST — better card UI
===================================================================== */
.campaign-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 12px;
box-shadow: var(--shadow-sm);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
transition: box-shadow .15s, border-color .15s;
}
.campaign-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-blue); }
.campaign-card .cc-info h4 { margin: 0 0 4px; font-size: 1.05rem; color: var(--dark-navy); }
.campaign-card .cc-info p { margin: 0; color: var(--muted); font-size: .88rem; }
.campaign-card .cc-stats {
display: flex; gap: 14px;
margin-top: 8px;
font-size: .82rem;
color: var(--muted);
}
.campaign-card .cc-stats .cc-stat strong { color: var(--dark-navy); }
.campaign-card .cc-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (max-width: 768px) {
.campaign-card { grid-template-columns: 1fr; }
.campaign-card .cc-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.campaign-card .cc-actions .btn { flex: 1; }
}
/* =====================================================================
ADMIN PANEL — image sizing & media cards
===================================================================== */
.admin-media-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.admin-media-box {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
box-shadow: var(--shadow-sm);
}
.admin-media-box h4 {
margin: 0 0 10px;
font-size: .95rem;
color: var(--dark-navy);
}
.admin-media-box .media-frame {
background: var(--light-blue);
border: 1px dashed var(--soft-blue);
border-radius: var(--radius-sm);
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.admin-media-box .media-frame.is-avatar {
width: 160px;
height: 160px;
margin: 0 auto;
border-radius: 50%;
padding: 0;
border-style: solid;
}
.admin-media-box .media-frame.is-cover {
width: 100%;
height: 180px;
padding: 0;
border-style: solid;
}
.admin-media-box .media-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.admin-media-box.is-avatar .media-frame img {
border-radius: 50%;
}
.admin-media-box .media-empty {
color: var(--muted);
font-size: .85rem;
text-align: center;
padding: 20px;
}
.admin-media-box .media-path {
margin-top: 8px;
font-size: .78rem;
color: var(--muted);
word-break: break-all;
}
/* Admin provider header banner */
.admin-provider-hero {
background: linear-gradient(135deg, var(--primary-blue), var(--dark-navy));
color: #fff;
border-radius: var(--radius);
padding: 22px 26px;
margin-bottom: 18px;
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 18px;
align-items: center;
box-shadow: var(--shadow-md);
}
.admin-provider-hero .aph-avatar {
width: 80px; height: 80px;
border-radius: 50%;
background-size: cover; background-position: center;
background-color: #fff;
border: 3px solid #fff;
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; font-weight: 800; color: var(--primary-blue);
}
.admin-provider-hero .aph-info h2 {
color: #fff;
margin: 0 0 6px;
font-size: 1.4rem;
}
.admin-provider-hero .aph-info .aph-meta {
color: rgba(255,255,255,.85);
font-size: .9rem;
margin-bottom: 6px;
}
.admin-provider-hero .aph-status .badge {
margin-left: 0;
}
@media (max-width: 768px) {
.admin-media-grid { grid-template-columns: 1fr; }
.admin-provider-hero { grid-template-columns: 64px 1fr; }
.admin-provider-hero .aph-avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.admin-provider-hero .aph-status { grid-column: 1 / -1; }
}
/* Admin gallery grid */
.admin-gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.admin-gallery-grid .agt {
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
background: var(--light-blue);
}
.admin-gallery-grid .agt img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.admin-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Admin ad image preview (in campaign view) */
.admin-ad-image-preview {
width: 100%;
max-width: 320px;
aspect-ratio: 16/9;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow: hidden;
background: var(--light-blue);
}
.admin-ad-image-preview img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.admin-ad-image-preview .empty {
display: flex; align-items: center; justify-content: center;
height: 100%;
color: var(--muted);
font-size: .85rem;
}
/* Admin providers list — small avatar */
.admin-provider-row-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background-size: cover; background-position: center;
background-color: var(--light-blue);
border: 2px solid #fff;
box-shadow: var(--shadow-sm);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; color: var(--primary-blue);
flex-shrink: 0;
}
/* Admin filter bar */
.admin-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #fff;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
margin-bottom: 16px;
}
.admin-filter-form {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.admin-filter-input,
.admin-filter-select {
padding: 9px 12px;
border: 1px solid var(--soft-blue);
border-radius: var(--radius-sm);
font-size: .9rem;
background: #fff;
color: var(--text);
font-family: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.admin-filter-input { min-width: 280px; flex: 1; }
.admin-filter-input:focus,
.admin-filter-select:focus {
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.14);
}
.admin-filter-count {
font-size: .85rem;
color: var(--muted);
white-space: nowrap;
}
/* Admin providers table */
.admin-providers-table {
table-layout: auto;
}
.admin-providers-table th,
.admin-providers-table td {
vertical-align: middle;
padding: 12px 14px;
}
.admin-providers-table th {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.admin-providers-table .col-business { min-width: 220px; }
.admin-providers-table .col-service { min-width: 150px; }
.admin-providers-table .col-location { min-width: 150px; }
.admin-providers-table .col-phone { white-space: nowrap; }
.admin-providers-table .col-points { text-align: center; }
.admin-providers-table .col-actions { text-align: right; white-space: nowrap; }
.admin-providers-table .empty-row {
text-align: center;
padding: 40px 16px;
color: var(--muted);
}
.admin-row-business {
display: flex;
align-items: center;
gap: 12px;
}
.admin-row-business-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.admin-row-biz-name {
font-weight: 600;
color: var(--dark-navy);
font-size: .92rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.admin-row-owner {
font-size: .78rem;
color: var(--muted);
}
.admin-row-loc {
font-size: .9rem;
color: var(--dark-navy);
font-weight: 500;
}
.admin-row-loc-sub {
font-size: .75rem;
color: var(--muted);
margin-top: 2px;
}
@media (max-width: 768px) {
.admin-filter-input { min-width: 200px; }
.admin-providers-table .col-service,
.admin-providers-table .col-phone { display: none; }
}
/* Customer avatar in admin */
.admin-customer-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--soft-blue), var(--primary-blue));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem;
flex-shrink: 0;
}
/* =====================================================================
UNSPLASH PLACEHOLDER IMAGES — used in home + frontend pages
===================================================================== */
.unsplash-hero-bg {
background-image:
linear-gradient(135deg, rgba(23,59,79,.55), rgba(33,102,142,.45)),
url('https://cdn.pixabay.com/photo/2022/04/26/10/28/patient-7158024_1280.jpg');
background-size: cover;
background-position: center;
}
.unsplash-cta-bg {
background-image:
linear-gradient(135deg, rgba(23,59,79,.85), rgba(33,102,142,.80)),
url('https://cdn.pixabay.com/photo/2018/07/04/16/21/chiropractic-3516426_1280.jpg');
background-size: cover;
background-position: center;
}
.unsplash-section-bg {
background-image:
linear-gradient(135deg, rgba(241,250,253,.92), rgba(231,247,251,.92)),
url('https://cdn.pixabay.com/photo/2014/12/10/20/48/laboratory-563423_1280.jpg');
background-size: cover;
background-position: center;
}
/* Service/Category default cover images (Unsplash) */
.unsplash-cover-1 { background-image: linear-gradient(135deg, rgba(28,100,242,.1), rgba(15,23,42,.2)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; }
.unsplash-cover-2 { background-image: linear-gradient(135deg, rgba(28,100,242,.1), rgba(15,23,42,.2)), url('https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=800&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; }
.unsplash-cover-3 { background-image: linear-gradient(135deg, rgba(28,100,242,.1), rgba(15,23,42,.2)), url('https://images.unsplash.com/photo-1559239115-eea44a4cf86e?w=800&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; }
.unsplash-cover-4 { background-image: linear-gradient(135deg, rgba(28,100,242,.1), rgba(15,23,42,.2)), url('https://images.unsplash.com/photo-1516574187841-69301976e499?w=800&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; }
.unsplash-cover-5 { background-image: linear-gradient(135deg, rgba(28,100,242,.1), rgba(15,23,42,.2)), url('https://images.unsplash.com/photo-1571772996211-2f02c9727629?w=800&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; }
/* Default cover banner for providers who don't have one */
.unsplash-provider-cover {
background-image:
linear-gradient(135deg, rgba(28,100,242,.6), rgba(15,23,42,.7)),
url('https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?w=1600&q=80&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
/* =====================================================================
ADMIN ACTION BUTTONS — compact Approve / Reject / Suspend / Delete
===================================================================== */
.admin-action-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.btn-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 13px;
font-size: .82rem;
font-weight: 600;
font-family: inherit;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
color: #fff;
transition: background .15s, transform .1s;
text-decoration: none;
line-height: 1.2;
}
.btn-action:active { transform: translateY(1px); }
.btn-action svg { flex-shrink: 0; }
.btn-action-approve { background: var(--success); }
.btn-action-approve:hover { background: #047857; }
.btn-action-reject { background: var(--error); }
.btn-action-reject:hover { background: #8a2a23; }
.btn-action-suspend { background: var(--warning); }
.btn-action-suspend:hover { background: #9d5a05; }
.btn-action-delete { background: var(--error); }
.btn-action-delete:hover { background: #8a2a23; }
/* =====================================================================
ADMIN DOCUMENTS TABLE — file-type icon + View/Download actions
===================================================================== */
.admin-docs-table .doc-name-cell {
display: flex;
align-items: center;
gap: 10px;
}
.admin-docs-table .doc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 6px;
font-size: .65rem;
font-weight: 800;
letter-spacing: .03em;
color: #fff;
flex-shrink: 0;
}
.admin-docs-table .doc-icon-image { background: #059669; }
.admin-docs-table .doc-icon-pdf { background: #DC2626; }
.admin-docs-table .doc-icon-doc { background: #2563EB; }
.admin-docs-table .doc-name {
font-weight: 500;
color: var(--dark-navy);
word-break: break-all;
overflow-wrap: break-word;
}
.admin-docs-table .doc-actions {
white-space: nowrap;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* =====================================================================
DOCUMENT VIEWER MODAL (iframe popup)
===================================================================== */
.doc-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.doc-modal.open { display: flex; }
.doc-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .65);
backdrop-filter: blur(3px);
}
.doc-modal-dialog {
position: relative;
background: #fff;
border-radius: var(--radius);
width: 100%;
max-width: 900px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 60px rgba(15, 23, 42, .35);
overflow: hidden;
}
.doc-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: var(--light-blue);
flex-shrink: 0;
}
.doc-modal-title {
font-weight: 700;
color: var(--dark-navy);
font-size: .95rem;
overflow-wrap: break-word;
word-break: break-word;
flex: 1;
min-width: 0;
}
.doc-modal-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.doc-modal-close {
width: 32px; height: 32px;
border: 0;
background: #fff;
border-radius: 50%;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: var(--dark-navy);
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.doc-modal-close:hover { background: var(--error); color: #fff; }
.doc-modal-body {
padding: 16px;
overflow: auto;
flex: 1;
min-height: 0;
background: #f5f8fc;
}
.doc-modal-loading {
text-align: center;
padding: 60px 20px;
color: var(--muted);
font-size: .9rem;
}
.doc-modal-note {
margin-top: 12px;
padding: 10px 12px;
background: #fff3cd;
border-radius: var(--radius-sm);
font-size: .85rem;
color: var(--warning);
}
.doc-modal-note a { color: var(--warning); font-weight: 700; text-decoration: underline; }
@media (max-width: 768px) {
.doc-modal { padding: 8px; }
.doc-modal-dialog { max-height: 95vh; }
.doc-modal-header { padding: 10px 12px; }
.doc-modal-title { font-size: .85rem; }
.doc-modal-body { padding: 10px; }
}
/* =====================================================================
BLOG SYSTEM — listing, detail, admin editor
===================================================================== */
/* Blog listing grid — 3 columns on PC, 2 on tablet, 1 on phone */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 18px;
}
@media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; gap: 14px; } }
.blog-card {
display: block;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: var(--body-text);
box-shadow: var(--shadow-sm);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--brand-blue);
text-decoration: none;
}
.blog-card .bc-image {
width: 100%;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
background-color: var(--bg-soft);
}
.blog-card .bc-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
color: var(--brand-blue);
font-size: 2rem;
font-weight: 800;
}
.blog-card .bc-body { padding: 16px 18px; }
.blog-card .bc-title {
font-weight: 700;
color: var(--heading-dark);
font-size: 1.1rem;
margin: 0 0 6px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .bc-meta {
font-size: .8rem;
color: var(--muted-text);
margin-bottom: 8px;
}
.blog-card .bc-excerpt {
font-size: .9rem;
color: var(--body-text);
line-height: 1.5;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card .bc-cta {
color: var(--brand-blue);
font-weight: 600;
font-size: .85rem;
}
.blog-card:hover .bc-cta { color: var(--brand-red); }
/* Blog detail page */
.blog-detail { padding-bottom: 30px; }
.blog-detail-hero {
width: 100%;
min-height: 320px;
background-size: cover;
background-position: center;
position: relative;
border-radius: 0 0 var(--radius) var(--radius);
overflow: hidden;
}
.blog-detail-hero-overlay {
background: linear-gradient(180deg, rgba(23,59,79,.45) 0%, rgba(23,59,79,.85) 100%);
width: 100%;
min-height: 320px;
display: flex;
align-items: flex-end;
padding: 36px 0 28px;
}
.blog-detail-hero-overlay .container { position: relative; z-index: 1; }
.blog-detail-hero-overlay h1 {
color: #fff;
font-size: 2.2rem;
margin: 0 0 8px;
text-shadow: 0 2px 12px rgba(0,0,0,.4);
line-height: 1.2;
}
.blog-detail-meta {
color: rgba(255,255,255,.9);
font-size: .92rem;
margin-bottom: 12px;
}
.blog-content {
max-width: 760px;
margin: 30px auto 0;
font-size: 1.05rem;
line-height: 1.75;
color: var(--body-text);
}
.blog-content h2 { color: var(--heading-dark); margin-top: 1.8em; font-size: 1.5rem; }
.blog-content h3 { color: var(--heading-dark); margin-top: 1.5em; font-size: 1.2rem; }
.blog-content p { margin: 0 0 1em; }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1em 0; }
.blog-content a { color: var(--brand-blue); text-decoration: underline; }
.blog-content a:hover { color: var(--brand-red); }
.blog-content ul, .blog-content ol { padding-left: 1.5em; margin: 0 0 1em; }
.blog-content blockquote {
border-left: 4px solid var(--brand-blue);
margin: 1em 0;
padding: 8px 18px;
background: var(--bg-light);
color: var(--heading-dark);
font-style: italic;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.blog-content code {
background: var(--bg-soft);
padding: 2px 6px;
border-radius: 4px;
font-size: .9em;
}
.blog-content pre {
background: var(--heading-dark);
color: #fff;
padding: 14px 18px;
border-radius: var(--radius-sm);
overflow-x: auto;
margin: 1em 0;
}
.blog-content pre code { background: transparent; padding: 0; color: inherit; }
.blog-tag {
display: inline-block;
background: var(--bg-soft);
color: var(--brand-blue);
border: 1px solid var(--border-soft);
padding: 3px 10px;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
margin-left: 6px;
}
.blog-tags-row { font-size: .9rem; color: var(--body-text); }
@media (max-width: 540px) {
.blog-detail-hero, .blog-detail-hero-overlay { min-height: 220px; }
.blog-detail-hero-overlay { padding: 24px 0 18px; }
.blog-detail-hero-overlay h1 { font-size: 1.6rem; }
.blog-content { font-size: 1rem; }
}
/* =====================================================================
BLOG ADMIN EDITOR — mode toggle, toolbar, interlinking
===================================================================== */
.blog-mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 8px;
}
.blog-mode-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px;
border: 2px solid var(--border-soft);
border-radius: var(--radius-sm);
cursor: pointer;
background: #fff;
transition: border-color .15s, background .15s;
}
.blog-mode-option:hover { border-color: var(--brand-blue); background: var(--bg-light); }
.blog-mode-option input[type="radio"] {
margin-top: 4px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.blog-mode-option input[type="radio"]:checked + span { color: var(--brand-blue); }
.blog-mode-option:has(input:checked) {
border-color: var(--brand-blue);
background: var(--bg-light);
}
.blog-mode-option span { font-size: .9rem; color: var(--body-text); line-height: 1.4; }
.blog-mode-option small { color: var(--muted-text); font-size: .8rem; }
@media (max-width: 600px) {
.blog-mode-toggle { grid-template-columns: 1fr; }
}
/* Visual editor toolbar */
.blog-toolbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 10px;
background: var(--bg-light);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-bottom: 0;
}
.blog-toolbar button {
background: #fff;
border: 1px solid var(--border-soft);
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-size: .85rem;
font-family: inherit;
color: var(--heading-dark);
transition: background .12s, border-color .12s;
min-width: 36px;
}
.blog-toolbar button:hover {
background: var(--brand-blue);
color: #fff;
border-color: var(--brand-blue);
}
.blog-toolbar .sep {
width: 1px;
background: var(--border-soft);
margin: 2px 4px;
}
.blog-visual-area {
background: #fff;
border: 2px solid var(--border-soft);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
padding: 18px;
outline: none;
font-size: 1rem;
line-height: 1.7;
color: var(--body-text);
overflow-y: auto;
}
.blog-visual-area:focus {
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.12);
}
.blog-visual-area h2 { color: var(--heading-dark); font-size: 1.4rem; margin: 1em 0 .5em; }
.blog-visual-area h3 { color: var(--heading-dark); font-size: 1.15rem; margin: 1em 0 .5em; }
.blog-visual-area a { color: var(--brand-blue); text-decoration: underline; }
.blog-visual-area img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-visual-area blockquote {
border-left: 4px solid var(--brand-blue);
padding: 6px 14px;
margin: 1em 0;
background: var(--bg-light);
color: var(--heading-dark);
font-style: italic;
}
/* Interlinking helper */
.blog-interlink-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
max-height: 280px;
overflow-y: auto;
}
.blog-interlink-item {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 2px 8px;
text-align: left;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 8px 10px;
cursor: pointer;
font-size: .82rem;
transition: border-color .12s, background .12s, transform .12s;
}
.blog-interlink-item:hover {
border-color: var(--brand-blue);
background: var(--bg-light);
transform: translateY(-1px);
}
.blog-interlink-item.copied {
background: var(--success);
color: #fff;
border-color: var(--success);
}
.blog-interlink-type {
grid-row: 1 / 3;
align-self: center;
background: var(--brand-blue);
color: #fff;
font-size: .68rem;
font-weight: 700;
padding: 3px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .04em;
}
.blog-interlink-item.copied .blog-interlink-type { background: #fff; color: var(--success); }
.blog-interlink-title {
font-weight: 600;
color: var(--heading-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-interlink-url {
font-size: .72rem;
color: var(--muted-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-interlink-item.copied .blog-interlink-title,
.blog-interlink-item.copied .blog-interlink-url { color: #fff; }
@media (max-width: 600px) {
.blog-interlink-list { grid-template-columns: 1fr; }
}
/* =====================================================================
PAGE BUILDER — 3-mode editor toggle (Section / HTML / Plain Text)
===================================================================== */
.page-mode-toggle {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 8px;
}
.page-mode-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px;
border: 2px solid var(--border-soft);
border-radius: var(--radius-sm);
cursor: pointer;
background: #fff;
transition: border-color .15s, background .15s;
}
.page-mode-option:hover { border-color: var(--brand-blue); background: var(--bg-light); }
.page-mode-option input[type="radio"] {
margin-top: 4px;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.page-mode-option input[type="radio"]:checked + span { color: var(--brand-blue); }
.page-mode-option:has(input:checked) {
border-color: var(--brand-blue);
background: var(--bg-light);
}
.page-mode-option span { font-size: .88rem; color: var(--body-text); line-height: 1.4; }
.page-mode-option small { color: var(--muted-text); font-size: .78rem; }
@media (max-width: 768px) {
.page-mode-toggle { grid-template-columns: 1fr; }
}
/* Plain text page rendering — readable paragraphs */
.cms-page-text {
max-width: 760px;
margin: 0 auto;
padding: 20px 0;
font-size: 1.05rem;
line-height: 1.75;
color: var(--body-text);
}
.cms-page-text p { margin: 0 0 1.2em; }
.cms-page-text a { color: var(--brand-blue); text-decoration: underline; }
.cms-page-text a:hover { color: var(--brand-red); }
/* HTML page rendering — just render the HTML as-is */
.cms-page-html { padding: 20px 0; }
/* ----------------------- Service Blog Blocks + Gallery + Reviews ----------------------- */
/* Service title under the business name on the provider cover banner */
.provider-cover-service-title {
color: #E7F1FB;
font-size: 1.05rem;
font-weight: 600;
margin: 6px 0 0;
text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Service blog block — Primary & Secondary Services each get their own
visually distinct card-style block (like a mini blog post). */
.service-blog-block {
padding: 22px 26px !important;
border-radius: var(--radius);
border: 1px solid #eaf1f7;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
position: relative;
overflow: hidden;
}
.service-blog-block::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
}
.service-blog-primary::before { background: var(--primary-blue, #2F78C8); }
.service-blog-secondary::before { background: var(--soft-blue, #9EC9F3); }
.service-blog-header {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.service-blog-header h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 800;
color: var(--dark-navy, #173A5E);
}
.service-blog-meta {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--muted, #888);
font-weight: 600;
}
.service-blog-intro {
color: var(--dark-navy, #173A5E);
font-size: .95rem;
line-height: 1.6;
margin: 0 0 14px;
}
/* Tag variations — primary services get the brand blue tag */
.tag.tag-primary {
background: var(--primary-blue, #2F78C8);
color: #fff;
border-color: var(--primary-blue, #2F78C8);
}
.tag.sm {
font-size: .72rem;
padding: 2px 8px;
margin: 2px 2px 0 0;
}
/* Gallery (public profile) — FIXED-HEIGHT image with keyword chips below.
We use a fixed height (220px) + cover background so every image in the
grid is the same size, no matter the original aspect ratio. */
.gallery-public-grid {
gap: 16px;
}
.gallery-public-item {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.gallery-public-image {
width: 100%;
height: 220px; /* FIXED HEIGHT — every image is the same size */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #eef2f6; /* placeholder color while loading */
}
.gallery-public-kw {
padding: 8px 10px;
display: flex;
flex-wrap: wrap;
gap: 2px;
border-top: 1px solid #eef2f6;
}
/* Gallery thumbnail (edit screen) — image with keyword chip below */
.gallery-thumb-wrap {
display: flex;
flex-direction: column;
gap: 4px;
}
.gallery-thumb-kw {
font-size: .78rem;
color: var(--dark-navy, #173A5E);
padding: 4px 6px;
background: #f5f8fc;
border-radius: 4px;
text-align: center;
}
/* Reviews — summary bar */
.reviews-summary-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #FFF8E7, #FFFBF0);
border-radius: var(--radius);
border-left: 4px solid #FFB400;
margin-bottom: 16px;
font-size: 1rem;
}
.reviews-summary-bar .rating-stars {
display: inline-flex;
gap: 2px;
}
.reviews-summary-bar .rating-stars .star,
.review-stars .star,
.review-item .star {
color: #ccc;
font-size: 1.1rem;
line-height: 1;
}
.reviews-summary-bar .rating-stars .star.filled,
.review-stars .star.filled,
.review-item .star.filled {
color: #FFB400;
}
/* Reviews — overview (avg + distribution) — used on provider's own reviews page */
.reviews-summary-overview {
display: grid;
grid-template-columns: 200px 1fr;
gap: 30px;
align-items: center;
padding: 18px 22px;
}
.reviews-avg-block {
text-align: center;
border-right: 1px solid #eef2f6;
padding-right: 20px;
}
.reviews-avg-num {
font-size: 3rem;
font-weight: 800;
color: var(--dark-navy, #173A5E);
line-height: 1;
}
.reviews-avg-stars {
display: flex;
justify-content: center;
gap: 2px;
margin: 6px 0 4px;
}
.reviews-avg-stars .star {
font-size: 1.4rem;
color: #ccc;
}
.reviews-avg-stars .star.filled { color: #FFB400; }
.reviews-dist-block { display: flex; flex-direction: column; gap: 6px; }
.dist-row {
display: grid;
grid-template-columns: 36px 1fr 32px;
gap: 10px;
align-items: center;
font-size: .85rem;
}
.dist-lbl { color: var(--dark-navy, #173A5E); font-weight: 600; }
.dist-bar {
height: 8px;
background: #eef2f6;
border-radius: 999px;
overflow: hidden;
}
.dist-fill {
height: 100%;
background: linear-gradient(90deg, #FFB400, #FF8800);
border-radius: 999px;
transition: width .3s ease;
}
.dist-count {
text-align: right;
color: var(--muted, #888);
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
.reviews-summary-overview { grid-template-columns: 1fr; gap: 16px; }
.reviews-avg-block { border-right: none; border-bottom: 1px solid #eef2f6; padding-bottom: 16px; padding-right: 0; }
}
/* Reviews — list */
.reviews-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.review-item {
padding: 14px 16px;
background: #fff;
border: 1px solid #eef2f6;
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.review-item .review-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.review-item .review-author {
font-weight: 700;
color: var(--dark-navy, #173A5E);
}
.review-item .review-stars {
display: inline-flex;
gap: 1px;
}
.review-item .review-date {
margin-left: auto;
font-size: .8rem;
color: var(--muted, #888);
}
.review-item p {
margin: 6px 0 0;
color: var(--dark-navy, #173A5E);
line-height: 1.5;
}
/* Char counter for char-limited form fields */
.char-counter {
display: inline-block;
margin-left: 8px;
font-size: .78rem;
color: var(--muted, #888);
font-weight: 600;
}
/* =====================================================================
RESPONSIVE TABLE — Customer Directory
On mobile, the 11-column table transforms into a card-based layout
where each row becomes a stacked card with label:value pairs.
===================================================================== */
@media (max-width: 900px) {
.directory-table thead { display: none; }
.directory-table,
.directory-table tbody,
.directory-table tr,
.directory-table td { display: block; width: 100%; }
.directory-table tr {
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);
}
.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;
}
.directory-table td:last-child { border-bottom: 0; }
.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;
}
/* Keep the "Name" row prominent */
.directory-table td[data-label="Name"] {
flex-direction: column;
align-items: flex-start;
border-bottom: 2px solid #e3e8ef;
padding-bottom: 10px;
margin-bottom: 4px;
}
.directory-table td[data-label="Name"]::before {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted, #888);
}
/* Make the actions row full-width and left-aligned */
.directory-table td[data-label="Actions"] {
justify-content: flex-start;
}
.directory-table td[data-label="Actions"]::before { display: none; }
}
/* =====================================================================
RESPONSIVE HEADER FIX — make the header work on all screen sizes
The original header had issues:
1. Logo image + wordmark text took too much horizontal space on phones,
pushing the search toggle and hamburger menu off-screen.
2. The header row used flex-wrap: nowrap, so elements couldn't wrap.
3. On very small screens (<=480px), the wordmark text overflowed.
Fix:
- Allow the header row to wrap gracefully on small screens.
- Hide the wordmark text on phones <=480px (show only the logo image).
- Keep the search toggle + hamburger always visible and accessible.
- Ensure the nav dropdown is full-width and scrolls if too long.
===================================================================== */
@media (max-width: 768px) {
/* Allow header to wrap so toggles are always reachable */
.site-header .container.header-row {
flex-wrap: wrap;
gap: 8px;
padding: 8px 16px;
min-height: auto;
}
/* Logo: shrink + allow the text to be hidden on tiny screens */
.site-logo {
flex-shrink: 1;
min-width: 0;
gap: 8px;
}
.site-logo-img {
height: 38px;
flex-shrink: 0;
}
/* Push search toggle + nav toggle to the right as a group */
.header-search-toggle {
margin-left: auto;
order: 10;
}
.nav-toggle {
order: 11;
margin-left: 0 !important;
}
/* Nav dropdown: full width below the header */
.site-nav {
order: 20;
flex-basis: 100%;
width: 100%;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 70vh;
overflow-y: auto;
box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));
}
.site-nav a {
width: 100%;
padding: 12px 16px;
border-bottom: 1px solid #f0f3f7;
}
.site-nav a:last-child { border-bottom: 0; }
}
/* On very small phones, hide the wordmark text — logo image only */
@media (max-width: 480px) {
.site-logo-text { display: none; }
.site-logo-img { height: 34px; }
.site-header .container.header-row {
padding: 6px 12px;
}
.header-search-toggle svg,
.nav-toggle { font-size: 1.3rem; }
}
/* Search overlay: full-width on mobile */
@media (max-width: 768px) {
.header-search-overlay {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
border-radius: 0;
box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.1));
}
}
/* =====================================================================
AD PLACEMENT OPTIONS — radio cards in campaign create/edit
===================================================================== */
.placement-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 8px;
}
.placement-option { cursor: pointer; }
.placement-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.placement-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 14px;
border: 2px solid #e3e8ef;
border-radius: 10px;
background: #fff;
transition: border-color .15s, background .15s, box-shadow .15s;
height: 100%;
}
.placement-option:hover .placement-card { border-color: var(--soft-blue, #9EC9F3); }
.placement-option input[type="radio"]:checked + .placement-card {
border-color: var(--primary-blue, #2F78C8);
background: linear-gradient(135deg, #F0F6FC, #E7F1FB);
box-shadow: 0 2px 8px rgba(33,102,142,.12);
}
.placement-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--light-blue, #E7F1FB);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-blue, #2F78C8);
}
.placement-option input[type="radio"]:checked + .placement-card .placement-icon {
background: var(--primary-blue, #2F78C8);
color: #fff;
}
.placement-text { display: flex; flex-direction: column; gap: 4px; }
.placement-text strong {
font-size: .95rem;
color: var(--dark-navy, #173A5E);
font-weight: 700;
}
.placement-text small {
font-size: .78rem;
color: var(--muted, #888);
line-height: 1.4;
}
@media (max-width: 768px) {
.placement-options { grid-template-columns: 1fr; gap: 8px; }
.placement-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
.placement-text { flex: 1; }
}
/* =====================================================================
RELATED NURSES SECTION — bottom of provider profile page
===================================================================== */
.profile-related-section {
margin-top: 32px;
padding-top: 24px;
border-top: 2px solid #eef2f7;
}
.related-section-title {
font-size: 1.3rem;
font-weight: 800;
color: var(--dark-navy, #173A5E);
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid #eef2f7;
}
.related-block { margin-bottom: 24px; }
.related-block-title {
font-size: 1rem;
font-weight: 700;
color: var(--dark-navy, #173A5E);
margin: 0 0 12px;
}
.related-block .search-results { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) { .related-block .search-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .related-block .search-results { grid-template-columns: 1fr; } }
/* =====================================================================
BOTTOM-SPONSORED SEARCH ADS — Amazon-style sponsored block at the
bottom of the search results page
===================================================================== */
.search-sponsored-bottom { margin-top: 32px; padding-top: 20px; border-top: 2px solid #eef2f7; }
.sponsored-section-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--dark-navy, #173A5E);
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid #eef2f7;
}
.search-sponsored-bottom .search-results { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) { .search-sponsored-bottom .search-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .search-sponsored-bottom .search-results { grid-template-columns: 1fr; } }
/* =====================================================================
FEATURED CARE PROVIDERS — home page section
3-column grid (2 on tablet, 1 on phone), top 12 by SEO points.
===================================================================== */
.featured-providers-grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px) {
.featured-providers-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
.featured-providers-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Service title shown prominently under the business name on provider cards.
Used on the home page Featured Care Providers section. */
.pc-service-title {
font-weight: 600;
font-size: .92rem;
color: var(--dark-navy, #173A5E);
margin: 2px 0 4px;
line-height: 1.3;
}
/* =====================================================================
UI RECONSTRUCTION — v8 fixes
- Fixes the Ad Content form-card "toggle bar" look (step header is
now a clear colored bar with step number + title).
- Fixes the hero search box overflow on small screens.
- Makes the header search bar fit on tablet widths (was overflowing).
- Adds comprehensive responsive rules for admin/provider/customer panels.
===================================================================== */
/* ---- Ad Content form-card: step header as a proper colored bar ----
The card has NO outer padding (so the header bar can stretch edge-to-edge).
Instead, an INNER content wrapper gets the padding. But since the markup
doesn't always have an inner wrapper, we use a two-pronged approach:
1. The header (h3) stretches edge-to-edge with its OWN internal padding.
2. All other children get consistent left/right/top/bottom margins via
a content-area pseudo-padding technique.
*/
.form-card {
padding: 0 !important;
overflow: hidden;
background: #fff;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
box-sizing: border-box;
margin-bottom: 18px;
}
/* Header bar — stretches edge-to-edge, has its OWN internal padding */
.form-card > h3 {
margin: 0 !important;
padding: 16px 24px !important;
background: linear-gradient(135deg, var(--primary-blue, #2F78C8), var(--dark-navy, #173A5E));
color: #fff !important;
font-size: 1.05rem !important;
font-weight: 700;
border-bottom: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-radius: 0;
box-sizing: border-box;
}
.form-card > h3 .fc-num {
width: 32px !important;
height: 32px !important;
background: rgba(255,255,255,.22) !important;
color: #fff !important;
border: 2px solid rgba(255,255,255,.5);
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: .95rem !important;
font-weight: 800 !important;
flex-shrink: 0;
}
/* ---- Card body padding ----
Instead of relying on per-child margins (which is fragile), we wrap all
non-h3 children in a virtual content area using a pseudo-element trick.
But the simplest robust approach: give EVERY direct child (except h3)
consistent horizontal margins + a top/bottom margin, AND override the
full-width children (placement-options, location-combo, grid) to ALSO
have horizontal padding so their content doesn't touch the card edges.
*/
.form-card > *:not(h3) {
margin-left: 24px;
margin-right: 24px;
box-sizing: border-box;
}
.form-card > *:not(h3):first-of-type {
margin-top: 20px;
}
.form-card > *:not(h3):last-child {
margin-bottom: 22px;
}
/* Full-width children — they still get horizontal MARGINS (not padding)
so their own content sits inside the card's safe area. */
.form-card .placement-options,
.form-card .ad-image-upload,
.form-card .location-combo,
.form-card .grid,
.form-card .budget-presets,
.form-card .form-actions {
margin-left: 24px !important;
margin-right: 24px !important;
box-sizing: border-box;
}
/* The auto-link note — same margins as everything else */
.form-card .auto-link-note {
margin-left: 24px !important;
margin-right: 24px !important;
margin-top: 20px;
margin-bottom: 20px;
box-sizing: border-box;
}
/* Ensure form-rows inside form-card don't add their own side margins
(they already inherit the 24px from the parent) */
.form-card .form-row {
margin-left: 0;
margin-right: 0;
}
/* ---- Hero search box: ensure it doesn't overflow ---- */
.hero-search {
max-width: 100%;
box-sizing: border-box;
}
.hero-search input { min-width: 0; box-sizing: border-box; }
@media (max-width: 768px) {
.hero-search { padding: 10px; gap: 8px; }
.hero-search input { padding: 11px 12px; font-size: .95rem; }
.hero-search button { padding: 12px; font-size: .95rem; }
}
@media (max-width: 480px) {
.hero-search input::placeholder { font-size: .85rem; }
}
/* ---- Header search bar: fit on tablet without overflowing ---- */
.header-search-bar {
flex: 0 1 320px;
min-width: 120px;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.header-search-bar input { min-width: 0; }
/* On medium screens (993-1200px), shrink the search bar so it doesn't
push the nav links + credit pill off the right edge. */
@media (max-width: 1200px) and (min-width: 993px) {
.header-search-bar { flex: 0 0 200px; min-width: 140px; }
.header-search-bar button { padding: 7px 10px; font-size: .8rem; }
.header-search-bar input { font-size: .85rem; padding: 6px 0; }
}
/* Below 993px the search bar is hidden and replaced by the toggle icon */
@media (max-width: 992px) {
.header-search-bar { display: none !important; }
}
/* Ensure the header row never causes horizontal scroll on ANY page */
.site-header .container.header-row {
overflow: hidden;
max-width: 100%;
}
.site-logo { min-width: 0; }
.site-nav { min-width: 0; }
/* =====================================================================
RESPONSIVE: ADMIN PANEL — sidebar, topbar, tables, forms, cards
===================================================================== */
@media (max-width: 992px) {
.admin-layout {
grid-template-columns: 1fr !important;
}
.admin-sidebar {
position: fixed !important;
top: 0; left: 0;
height: 100vh;
width: 280px;
z-index: 10000;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.admin-sidebar.open { transform: translateX(0); }
.admin-main {
width: 100%;
padding: 16px !important;
}
.admin-topbar {
flex-direction: column;
align-items: stretch !important;
gap: 12px;
}
.admin-topbar h1 { font-size: 1.1rem; }
/* Mobile menu toggle button (added via JS in admin/index.php) */
.admin-menu-toggle {
display: inline-flex !important;
}
}
@media (max-width: 768px) {
.admin-main { padding: 12px !important; }
.dash-cards {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.dash-card { padding: 12px !important; }
.dash-card .value { font-size: 1.3rem !important; }
.dash-card .label { font-size: .72rem !important; }
.card { padding: 14px !important; }
.card h3 { font-size: 1rem !important; }
/* Admin data tables become horizontally scrollable */
.data {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.data thead, .data tbody, .data tr, .data th, .data td {
min-width: 100px;
}
/* Form grids collapse to 1 column */
.grid.cols-2, .grid.cols-3, .grid.cols-4 {
grid-template-columns: 1fr !important;
}
.placement-options { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) {
.dash-cards { grid-template-columns: 1fr !important; }
.admin-topbar { padding: 10px 12px !important; }
.admin-topbar h1 { font-size: 1rem; }
.maint-toggle-btn { font-size: .75rem !important; padding: 5px 10px !important; }
}
/* Admin sidebar mobile toggle button — hidden on desktop, shown on tablet/mobile */
.admin-menu-toggle {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 10001;
background: var(--primary-blue, #2F78C8);
color: #fff;
border: 0;
border-radius: 8px;
width: 40px;
height: 40px;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
align-items: center;
justify-content: center;
}
.admin-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,.5);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity .25s ease;
}
.admin-sidebar-backdrop.show {
display: block;
opacity: 1;
}
@media (max-width: 992px) {
.admin-menu-toggle { display: inline-flex; }
.admin-main { padding-top: 60px !important; }
}
/* =====================================================================
RESPONSIVE: PROVIDER PANEL
===================================================================== */
@media (max-width: 992px) {
.dash-layout {
grid-template-columns: 1fr !important;
}
.dash-sidebar {
position: fixed !important;
top: 0; left: 0;
height: 100vh;
width: 260px;
z-index: 10000;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 4px 0 20px rgba(0,0,0,.15);
overflow-y: auto;
}
.dash-sidebar.open { transform: translateX(0); }
.dash-main {
width: 100%;
padding: 16px !important;
padding-top: 60px !important;
}
/* Show the mobile menu toggle for provider panel too */
.dash-menu-toggle {
display: inline-flex !important;
}
}
@media (max-width: 768px) {
.dash-main { padding: 12px !important; padding-top: 60px !important; }
.run-ad-wrap { max-width: 100% !important; }
.run-ad-header { padding: 18px 16px !important; }
.run-ad-header h1 { font-size: 1.3rem !important; }
.run-ad-header p { font-size: .85rem !important; }
.form-card > *:not(h3) {
margin-left: 16px !important;
margin-right: 16px !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: 16px !important;
margin-right: 16px !important;
}
.form-card > h3 { padding: 12px 16px !important; font-size: .95rem !important; }
.form-card h3 .fc-num { width: 26px !important; height: 26px !important; font-size: .8rem !important; }
.ad-image-upload { grid-template-columns: 1fr !important; }
.ad-image-preview { width: 100% !important; height: 180px !important; }
/* Location combo: stack vertically on phone, WITH a gap between fields */
.location-combo { grid-template-columns: 1fr !important; gap: 12px !important; }
.budget-presets { flex-wrap: wrap; gap: 6px; }
.budget-pill { padding: 5px 12px !important; font-size: .8rem !important; }
.campaign-card {
flex-direction: column !important;
align-items: stretch !important;
}
.campaign-card .cc-actions {
flex-direction: row;
justify-content: stretch;
gap: 8px;
}
.campaign-card .cc-actions .btn { flex: 1; }
}
/* Provider panel mobile menu toggle (shared with admin) */
.dash-menu-toggle {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 10001;
background: var(--primary-blue, #2F78C8);
color: #fff;
border: 0;
border-radius: 8px;
width: 40px;
height: 40px;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
align-items: center;
justify-content: center;
}
.dash-sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15,23,42,.5);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity .25s ease;
}
.dash-sidebar-backdrop.show {
display: block;
opacity: 1;
}
/* =====================================================================
RESPONSIVE: CUSTOMER PANEL — uses the same .dash-layout as provider
so the rules above apply. Add customer-specific tweaks below.
===================================================================== */
@media (max-width: 768px) {
/* Customer unlocked-providers + dashboard cards: make grid 1-col */
.search-results { grid-template-columns: 1fr !important; }
.provider-card { flex-direction: column !important; align-items: stretch; }
.provider-card .pc-cover { min-height: 140px; }
.auth-wrap { max-width: 100% !important; padding: 0 8px; }
.star-rating-input { gap: 2px !important; }
.star-rating-input label svg { width: 28px !important; height: 28px !important; }
}
/* =====================================================================
RESPONSIVE: PROVIDER PROFILE PAGE (public)
===================================================================== */
@media (max-width: 768px) {
.profile-body { grid-template-columns: 1fr !important; }
.provider-stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.provider-stat-card { padding: 10px !important; }
.provider-cover-grid { grid-template-columns: 80px 1fr !important; gap: 12px; }
.provider-cover-name { font-size: 1.3rem !important; }
.provider-cover-meta { flex-wrap: wrap; gap: 6px; }
.provider-cover-meta .meta-pill { font-size: .75rem !important; padding: 4px 8px; }
.provider-cover-actions { flex-wrap: wrap; gap: 6px; }
.provider-cover-actions .btn { font-size: .8rem !important; padding: 6px 12px; }
.gallery-public-grid { grid-template-columns: 1fr 1fr !important; }
.gallery-public-image { height: 160px !important; }
.service-blog-block { padding: 16px !important; }
.service-blog-header h3 { font-size: 1rem !important; }
.reviews-summary-overview { grid-template-columns: 1fr !important; gap: 16px; }
.reviews-avg-block { border-right: 0 !important; border-bottom: 1px solid #eef2f6; padding-bottom: 16px; }
.mobile-contact-bar .btn { width: 100%; }
}
@media (max-width: 480px) {
.gallery-public-grid { grid-template-columns: 1fr !important; }
.gallery-public-image { height: 200px !important; }
.provider-stats-row { grid-template-columns: 1fr !important; }
.provider-cover-grid { grid-template-columns: 1fr !important; text-align: center; }
.provider-cover-grid .provider-avatar-wrap { justify-content: center; }
.provider-cover-info { text-align: center; }
.provider-cover-meta { justify-content: center; }
.provider-cover-actions { justify-content: center; }
}
/* =====================================================================
RESPONSIVE: FORM ELEMENTS — inputs, selects, textareas
===================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="file"],
select,
textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.form-row { max-width: 100%; }
.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
box-sizing: border-box;
}
/* =====================================================================
RESPONSIVE: FOOTER + MISC
===================================================================== */
@media (max-width: 540px) {
.footer-grid { grid-template-columns: 1fr !important; gap: 20px; }
.footer-bottom { font-size: .8rem; }
.section { padding: 20px 0 !important; }
.section-title { font-size: 1.3rem !important; }
.container { padding-left: 14px; padding-right: 14px; }
.btn { padding: 9px 16px; font-size: .9rem; }
.btn.sm { padding: 6px 10px; font-size: .82rem; }
.btn.lg { padding: 12px 22px; font-size: 1rem; }
.btn.block { width: 100%; }
}
/* =====================================================================
MODERN UI OVERHAUL — applied on top of the existing stylesheet.
This block:
• Fixes the customer search-header layout (logo + search + credit pill + nav)
• Modernizes the credits page (hero balance + plan cards)
• Adds a customer profile card style
• Tightens responsive behaviour across admin / provider / customer panels
• Modernizes buttons, cards, tables, and form elements
===================================================================== */
/* ---------------------------------------------------------------------
1. Header layout fix — robust flex layout that NEVER overflows
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
border-bottom: 1px solid var(--border-soft);
box-shadow: 0 1px 0 rgba(33,102,142,.04), 0 6px 18px rgba(33,102,142,.05);
}
.site-header .container.header-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
min-height: var(--header-h);
padding-top: 8px;
padding-bottom: 8px;
overflow: visible;
}
/* Logo column — shrink to content but never overflow */
.site-logo {
flex: 0 0 auto;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.site-logo-img { height: 42px; width: auto; max-width: 180px; }
.site-logo-text { font-weight: 800; font-size: 1rem; color: var(--heading-dark); }
/* Search bar column — flex-grow to fill, but with sane min/max */
.header-search-bar {
flex: 1 1 320px;
min-width: 0;
max-width: 460px;
margin-left: auto;
}
/* Right-side action cluster — never wrap, never overflow */
.site-nav {
flex: 0 0 auto;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: 0;
}
.header-credit-pill {
order: -1; /* sit just before "Dashboard" */
flex-shrink: 0;
}
.header-login-btn,
.header-register-btn,
.header-logout-btn { flex-shrink: 0; }
.nav-toggle { flex-shrink: 0; margin-left: 0 !important; }
/* On medium screens (993–1200px) shrink the search bar */
@media (max-width: 1200px) and (min-width: 993px) {
.header-search-bar { flex: 0 0 220px; max-width: 260px; }
.header-search-bar button { padding: 7px 12px; font-size: .82rem; }
.header-search-bar input { font-size: .88rem; }
.site-nav { gap: 8px; }
.site-nav a { padding: 8px 10px !important; font-size: .85rem !important; }
}
/* ≤992px: hide inline search, show search-toggle */
@media (max-width: 992px) {
.header-search-bar { display: none !important; }
.header-search-toggle {
display: inline-flex !important;
margin-left: auto;
order: 5;
}
.site-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
flex-direction: column;
align-items: stretch;
background: #fff;
padding: 8px 0;
box-shadow: 0 12px 30px rgba(33,102,142,.12);
z-index: 40;
max-height: 75vh;
overflow-y: auto;
display: none;
}
.site-nav.open { display: flex; }
.site-nav a {
width: 100%;
padding: 12px 18px !important;
border-bottom: 1px solid #f0f3f7;
}
.site-nav a:last-child { border-bottom: 0; }
.header-credit-pill { order: 0; }
}
/* ≤768px: hide wordmark on tiny phones */
@media (max-width: 768px) {
.site-header .container.header-row { padding: 6px 14px; gap: 8px; }
.site-logo-img { height: 36px; }
.header-search-toggle { order: 5; }
.nav-toggle { order: 6; }
}
@media (max-width: 480px) {
.site-logo-text { display: none; }
.site-logo-img { height: 32px; }
}
/* ---------------------------------------------------------------------
2. Header credit pill — modern gradient + animation
--------------------------------------------------------------------- */
.header-credit-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #FFF, var(--bg-light));
color: var(--heading-dark);
padding: 7px 14px;
border-radius: 999px;
font-size: .85rem;
font-weight: 700;
border: 1px solid var(--border-soft);
text-decoration: none;
white-space: nowrap;
transition: transform .15s, box-shadow .15s, border-color .15s;
box-shadow: 0 1px 2px rgba(33,102,142,.05);
}
.header-credit-pill:hover {
text-decoration: none;
background: #fff;
border-color: var(--brand-blue);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(33,102,142,.12);
}
.header-credit-pill .pill-icon {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .72rem;
font-weight: 800;
box-shadow: 0 1px 3px rgba(33,102,142,.3);
}
.header-credit-pill .pill-value { color: var(--brand-blue); }
/* ---------------------------------------------------------------------
3. Customer credits page — modern hero + plan cards
--------------------------------------------------------------------- */
.credits-balance-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
background: linear-gradient(135deg, var(--brand-blue) 0%, #2A87B8 50%, #1E5A7E 100%);
color: #fff;
padding: 28px 30px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(33,102,142,.25);
margin: 16px 0 24px;
position: relative;
overflow: hidden;
}
.credits-balance-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 60%);
pointer-events: none;
}
.credits-balance-hero::after {
content: '';
position: absolute;
bottom: -40%;
left: -8%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(123,204,228,.2) 0%, transparent 60%);
pointer-events: none;
}
.cbh-left { position: relative; z-index: 1; }
.cbh-label {
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .85;
margin-bottom: 4px;
}
.cbh-value {
font-size: 3rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
.cbh-sub { font-size: .9rem; opacity: .85; margin-top: 4px; }
.cbh-right {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.credits-balance-hero .cbh-btn,
.credits-balance-hero .cbh-btn-secondary {
min-width: 180px;
padding: 11px 20px;
font-weight: 600;
border-radius: 999px;
text-align: center;
}
.credits-balance-hero .cbh-btn {
background: #fff;
color: var(--brand-blue);
border: 0;
}
.credits-balance-hero .cbh-btn:hover {
background: var(--bg-light);
color: var(--brand-blue-hover);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
.credits-balance-hero .cbh-btn-secondary {
background: rgba(255,255,255,.15);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
}
.credits-balance-hero .cbh-btn-secondary:hover {
background: rgba(255,255,255,.25);
color: #fff;
text-decoration: none;
}
.credits-section-title {
font-size: 1.4rem;
margin: 28px 0 4px;
}
.credits-section-sub {
margin-bottom: 20px;
font-size: .92rem;
}
.credit-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.credit-plan-card {
position: relative;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 26px 22px 22px;
text-align: center;
transition: transform .18s, box-shadow .18s, border-color .18s;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.credit-plan-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(33,102,142,.14);
border-color: var(--brand-blue);
}
.credit-plan-card.is-popular {
border: 2px solid var(--brand-blue);
box-shadow: 0 10px 24px rgba(33,102,142,.16);
}
.cpc-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
padding: 5px 14px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(33,102,142,.3);
}
.cpc-name {
font-size: 1.05rem;
font-weight: 700;
color: var(--heading-dark);
margin-bottom: 8px;
}
.cpc-price-row { margin: 4px 0 10px; }
.cpc-price {
font-size: 2.2rem;
font-weight: 800;
color: var(--brand-blue);
line-height: 1;
letter-spacing: -0.02em;
}
.cpc-credits-line {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin: 4px 0 6px;
flex-wrap: wrap;
justify-content: center;
}
.cpc-credits-num {
font-size: 1.4rem;
font-weight: 800;
color: var(--heading-dark);
}
.cpc-credits-lbl { color: var(--muted); font-size: .9rem; }
.cpc-bonus {
background: var(--bg-soft);
color: var(--brand-blue);
font-size: .75rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft);
}
.cpc-total {
color: var(--body-text);
font-size: .88rem;
margin-bottom: 4px;
}
.cpc-per {
font-size: .78rem;
color: var(--muted);
margin-bottom: 14px;
}
.cpc-btn {
width: 100%;
padding: 11px 16px;
font-weight: 600;
border-radius: 10px;
}
.credit-plan-card .cpc-btn:not(.secondary) {
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border: 0;
}
.credit-plan-card .cpc-btn:not(.secondary):hover {
background: linear-gradient(135deg, var(--brand-blue-hover), #1E5A7E);
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(33,102,142,.25);
}
@media (max-width: 540px) {
.credits-balance-hero {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 22px 18px;
}
.cbh-right { flex-direction: column; }
.credits-balance-hero .cbh-btn,
.credits-balance-hero .cbh-btn-secondary { width: 100%; }
.cbh-value { font-size: 2.4rem; }
.credit-plans-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
4. Customer profile card
--------------------------------------------------------------------- */
.customer-profile-card {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
background: linear-gradient(135deg, #fff 0%, var(--bg-light) 100%);
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 4px 14px rgba(33,102,142,.08);
}
.cp-avatar-wrap { flex-shrink: 0; }
.cp-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 3px solid #fff;
box-shadow: 0 4px 12px rgba(33,102,142,.18);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
}
.cp-avatar.is-initial { background: linear-gradient(135deg, var(--brand-blue), #2A87B8); }
.cp-info { flex: 1 1 240px; min-width: 0; }
.cp-info h2 { margin: 0 0 8px; font-size: 1.5rem; }
.cp-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cp-meta-pill {
background: #fff;
border: 1px solid var(--border-soft);
padding: 4px 11px;
border-radius: 999px;
font-size: .82rem;
color: var(--body-text);
}
.cp-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 540px) {
.customer-profile-card {
flex-direction: column;
text-align: center;
align-items: center;
}
.cp-meta { justify-content: center; }
.cp-actions { width: 100%; }
.cp-actions .btn { flex: 1; min-width: 120px; }
}
/* ---------------------------------------------------------------------
5. Modern buttons
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
font-size: .92rem;
font-weight: 600;
font-family: inherit;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border: 0;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: transform .12s, box-shadow .15s, background .15s;
box-shadow: 0 2px 6px rgba(33,102,142,.15);
white-space: nowrap;
}
.btn:hover {
background: linear-gradient(135deg, var(--brand-blue-hover), #1E5A7E);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(33,102,142,.25);
}
.btn:active { transform: translateY(0); }
.btn.secondary {
background: #fff;
color: var(--brand-blue);
border: 1px solid var(--border-soft);
box-shadow: 0 1px 3px rgba(33,102,142,.06);
}
.btn.secondary:hover {
background: var(--bg-light);
color: var(--brand-blue-hover);
border-color: var(--brand-blue);
box-shadow: 0 3px 8px rgba(33,102,142,.1);
}
.btn.danger {
background: linear-gradient(135deg, var(--brand-red), #B92A2D);
color: #fff;
box-shadow: 0 2px 6px rgba(218,55,58,.2);
}
.btn.danger:hover {
background: linear-gradient(135deg, var(--brand-red-hover), #8E1F22);
color: #fff;
box-shadow: 0 6px 14px rgba(218,55,58,.3);
}
.btn.success {
background: linear-gradient(135deg, var(--success), #247448);
color: #fff;
}
.btn.warning {
background: linear-gradient(135deg, var(--warning), #B57D2A);
color: #fff;
}
/* ---------------------------------------------------------------------
6. Modern cards
--------------------------------------------------------------------- */
.card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 22px;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: 0 6px 20px rgba(33,102,142,.1); }
.card h3 { margin: 0 0 14px; font-size: 1.1rem; }
/* ---------------------------------------------------------------------
7. Modern tables
--------------------------------------------------------------------- */
table.data {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(33,102,142,.06);
}
table.data thead {
background: linear-gradient(135deg, var(--bg-light), var(--bg-soft));
}
table.data th {
text-align: left;
padding: 12px 14px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--heading-dark);
border-bottom: 2px solid var(--border-soft);
}
table.data td {
padding: 12px 14px;
border-bottom: 1px solid #f0f3f7;
color: var(--body-text);
vertical-align: top;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg-light); }
/* ---------------------------------------------------------------------
8. Modern form elements
--------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="file"],
select,
textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: .95rem;
color: var(--body-text);
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 10px 14px;
transition: border-color .15s, box-shadow .15s, background .15s;
-webkit-appearance: none;
appearance: none;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(33,102,142,.14);
background: #fff;
}
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 38px;
}
.form-row label {
display: block;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 6px;
font-size: .9rem;
}
.form-row .hint {
font-size: .82rem;
color: var(--muted);
margin-top: 4px;
}
/* ---------------------------------------------------------------------
9. Dashboard cards (admin/provider/customer)
--------------------------------------------------------------------- */
.dash-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.dash-card {
background: #fff;
border: 1px solid var(--border-soft);
border-left: 4px solid var(--brand-blue);
border-radius: 12px;
padding: 18px 20px;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
transition: transform .15s, box-shadow .15s;
}
.dash-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(33,102,142,.12);
}
.dash-card.success { border-left-color: var(--success); }
.dash-card.warning { border-left-color: var(--warning); }
.dash-card.danger { border-left-color: var(--error); }
.dash-card .label {
font-size: .78rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 600;
margin-bottom: 6px;
}
.dash-card .value {
font-size: 1.8rem;
font-weight: 800;
color: var(--heading-dark);
line-height: 1.1;
}
/* ---------------------------------------------------------------------
10. Sidebar styles (admin / provider / customer)
--------------------------------------------------------------------- */
.admin-sidebar,
.dash-sidebar {
background: linear-gradient(180deg, #173B4F 0%, #0F2A38 100%);
color: #fff;
padding: 18px 0;
box-shadow: 2px 0 14px rgba(0,0,0,.1);
}
.admin-sidebar h3,
.dash-sidebar h3 {
color: #fff;
padding: 6px 22px 12px;
font-size: 1rem;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0 0 4px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-sidebar .group,
.dash-sidebar .group {
padding: 14px 22px 4px;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.45);
font-weight: 700;
}
.admin-sidebar a,
.dash-sidebar a {
display: block;
color: rgba(255,255,255,.78);
padding: 9px 22px;
text-decoration: none;
font-size: .9rem;
border-left: 3px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.admin-sidebar a:hover,
.dash-sidebar a:hover {
background: rgba(255,255,255,.06);
color: #fff;
text-decoration: none;
border-left-color: rgba(123,204,228,.4);
}
.admin-sidebar a.active,
.dash-sidebar a.active {
background: rgba(33,102,142,.25);
color: #fff;
border-left-color: var(--sky-blue);
font-weight: 600;
}
/* ---------------------------------------------------------------------
11. Topbar (admin)
--------------------------------------------------------------------- */
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 22px;
background: #fff;
border-bottom: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.admin-topbar h1 { margin: 0; font-size: 1.25rem; }
/* ---------------------------------------------------------------------
12. Mobile menu toggle — modern look
--------------------------------------------------------------------- */
.admin-menu-toggle,
.dash-menu-toggle {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 10001;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border: 0;
border-radius: 10px;
width: 42px;
height: 42px;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 4px 12px rgba(33,102,142,.3);
align-items: center;
justify-content: center;
transition: transform .15s, box-shadow .15s;
}
.admin-menu-toggle:hover,
.dash-menu-toggle:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(33,102,142,.4);
}
/* ---------------------------------------------------------------------
13. Profile pages (provider)
--------------------------------------------------------------------- */
.profile-cover-wrap {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15,23,42,.18);
margin-bottom: 16px;
}
.profile-info-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
}
@media (max-width: 992px) {
.profile-info-grid { grid-template-columns: 1fr; }
}
.profile-side-card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
margin-bottom: 14px;
}
.profile-side-card h3 { margin: 0 0 12px; font-size: 1rem; }
.stat-line {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #f0f3f7;
font-size: .9rem;
}
.stat-line:last-child { border-bottom: 0; }
.stat-line .lbl { color: var(--muted); }
.stat-line .val { color: var(--heading-dark); font-weight: 600; text-align: right; }
/* ---------------------------------------------------------------------
14. Form sections (provider profile edit)
--------------------------------------------------------------------- */
.form-section {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(33,102,142,.04);
}
.form-section h3 {
margin: 0 0 16px;
font-size: 1.05rem;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-soft);
}
.fs-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
color: #fff;
border-radius: 50%;
font-size: .82rem;
font-weight: 800;
flex-shrink: 0;
}
.form-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 16px 0;
}
/* ---------------------------------------------------------------------
15. Gallery grid (edit + public)
--------------------------------------------------------------------- */
.gallery-grid-edit {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 12px;
}
.gallery-thumb-wrap {
border: 1px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 6px rgba(33,102,142,.05);
}
.gallery-thumb {
position: relative;
width: 100%;
height: 140px;
background-size: cover;
background-position: center;
}
.gallery-thumb .remove-btn {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(218,55,58,.92);
color: #fff;
border: 0;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
transition: background .15s, transform .15s;
}
.gallery-thumb .remove-btn:hover {
background: var(--brand-red-hover);
transform: scale(1.08);
}
.gallery-thumb-kw {
padding: 8px 10px;
font-size: .78rem;
color: var(--body-text);
background: var(--bg-light);
}
.gallery-public-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.gallery-public-item {
border-radius: 12px;
overflow: hidden;
background: #fff;
border: 1px solid var(--border-soft);
box-shadow: 0 2px 8px rgba(33,102,142,.05);
transition: transform .15s, box-shadow .15s;
}
.gallery-public-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(33,102,142,.14);
}
.gallery-public-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
background-color: var(--bg-light);
}
.gallery-public-kw {
padding: 8px 12px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ---------------------------------------------------------------------
16. Image preview tiles (cover/avatar upload)
--------------------------------------------------------------------- */
.image-preview-tile {
width: 100%;
height: 140px;
border-radius: 12px;
background-size: cover;
background-position: center;
background-color: var(--bg-light);
border: 2px dashed var(--border-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: .88rem;
margin-bottom: 8px;
}
.image-preview-tile.cover { height: 100px; }
.image-preview-tile.empty { background-color: var(--bg-light); }
/* ---------------------------------------------------------------------
17. Flash messages — modern look
--------------------------------------------------------------------- */
.flash-msg,
.alert-info,
.alert-warning,
.alert-danger {
border-radius: 12px !important;
padding: 12px 16px !important;
margin-bottom: 12px;
border-left: 4px solid var(--brand-blue) !important;
background: var(--bg-light) !important;
box-shadow: 0 2px 8px rgba(33,102,142,.06);
}
.alert-warning { border-left-color: var(--warning) !important; background: #FFF8E8 !important; }
.alert-danger { border-left-color: var(--error) !important; background: #FDECEC !important; }
/* ---------------------------------------------------------------------
18. Provider card (search results / lists)
--------------------------------------------------------------------- */
.provider-card,
.search-results .card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(33,102,142,.05);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.provider-card:hover,
.search-results .card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(33,102,142,.14);
border-color: var(--brand-blue);
}
/* ---------------------------------------------------------------------
19. Responsive grid tweaks
--------------------------------------------------------------------- */
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 992px) {
.grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
20. Print cleanup
--------------------------------------------------------------------- */
@media print {
.admin-menu-toggle,
.dash-menu-toggle,
.admin-sidebar-backdrop,
.dash-sidebar-backdrop,
.header-search-toggle,
.nav-toggle { display: none !important; }
}
/* ---------------------------------------------------------------------
21. Empty state polish
--------------------------------------------------------------------- */
.empty-state {
text-align: center;
padding: 50px 20px;
color: var(--muted);
background: #fff;
border: 1px dashed var(--border-soft);
border-radius: 14px;
}
.empty-state .icon { font-size: 2.6rem; margin-bottom: 12px; }
.empty-state h3 { color: var(--heading-dark); margin: 0 0 8px; }
/* ---------------------------------------------------------------------
22. Tag cloud
--------------------------------------------------------------------- */
.profile-keyword-cloud,
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
background: var(--bg-light);
color: var(--brand-blue);
padding: 4px 11px;
border-radius: 999px;
font-size: .8rem;
font-weight: 500;
border: 1px solid var(--border-soft);
transition: background .15s, color .15s;
}
.tag:hover { background: var(--brand-blue); color: #fff; }
.tag.sm { font-size: .72rem; padding: 3px 8px; }
/* ---------------------------------------------------------------------
23. Provider cover (own profile view)
--------------------------------------------------------------------- */
.profile-cover-wrap { position: relative; min-height: 220px; display: flex; align-items: flex-end; }
.profile-cover-inner {
display: flex;
align-items: flex-end;
gap: 18px;
padding: 22px;
width: 100%;
flex-wrap: wrap;
background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,.6) 100%);
}
.pc-avatar-large {
width: 92px;
height: 92px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: var(--brand-blue);
border: 4px solid #fff;
box-shadow: 0 6px 16px rgba(0,0,0,.25);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2.2rem;
font-weight: 800;
flex-shrink: 0;
}
.pc-avatar-large.is-initial {
background: linear-gradient(135deg, var(--brand-blue), #2A87B8);
}
.pc-info-block { flex: 1 1 240px; min-width: 0; color: #fff; }
.pc-info-block h2 { color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.pc-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pc-meta-pill {
background: rgba(255,255,255,.18);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: .82rem;
border: 1px solid rgba(255,255,255,.25);
}
.pc-status { font-size: .85rem; color: rgba(255,255,255,.85); }
.pc-stats {
display: flex;
gap: 14px;
flex-wrap: wrap;
color: #fff;
}
.pc-stat {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.12);
padding: 8px 16px;
border-radius: 10px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
min-width: 70px;
}
.pc-stat .num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.pc-stat .lbl { font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.profile-action-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.profile-cover-wrap { min-height: 260px; }
.profile-cover-inner { flex-direction: column; align-items: flex-start; padding: 18px; }
.pc-avatar-large { width: 72px; height: 72px; font-size: 1.6rem; }
.pc-info-block h2 { font-size: 1.3rem; }
.pc-stats { width: 100%; justify-content: space-between; }
}
/* ---------------------------------------------------------------------
24. Maintenance toggle button
--------------------------------------------------------------------- */
.maint-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: #fff;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s, border-color .15s;
}
.maint-toggle-btn:hover { background: var(--bg-light); }
.maint-toggle-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.maint-toggle-btn.maintenance-on .maint-toggle-dot {
background: var(--warning);
box-shadow: 0 0 0 4px rgba(230,162,60,.18);
animation: pulse-dot 1.6s ease-in-out infinite;
}
.maint-toggle-btn.maintenance-off .maint-toggle-dot {
background: var(--success);
box-shadow: 0 0 0 4px rgba(46,139,87,.18);
}
@keyframes pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: .75; }
}
/* ---------------------------------------------------------------------
25. Mobile sidebar polish — when open, lock body scroll
--------------------------------------------------------------------- */
body.sidebar-open { overflow: hidden; }
@media (max-width: 992px) {
.admin-sidebar,
.dash-sidebar {
width: 280px;
max-width: 85vw;
}
}
/* ---------------------------------------------------------------------
26. Misc small touches
--------------------------------------------------------------------- */
h1 { font-size: 1.8rem; margin: 0 0 12px; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
@media (max-width: 540px) {
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
}
/* Containers never cause horizontal scroll */
.container { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
@media (max-width: 540px) {
.container { padding: 0 14px; }
.dash-main, .admin-main { padding: 14px !important; padding-top: 60px !important; }
.form-section { padding: 16px; }
.card { padding: 16px; }
}
/* Search results page hero */
@media (max-width: 768px) {
.search-results { gap: 10px; }
}
/* Hero search (homepage) — kept as grid (defined earlier); only add shadow here */
.hero-search {
box-shadow: 0 8px 24px rgba(33,102,142,.14);
}
/* Auth forms */
.auth-wrap {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 28px;
box-shadow: 0 8px 30px rgba(33,102,142,.1);
max-width: 460px;
margin: 20px auto;
}
@media (max-width: 540px) {
.auth-wrap { padding: 20px 16px; margin: 10px auto; }
}
/* Footer polish */
.site-footer {
background: linear-gradient(180deg, #0F2A38 0%, #0A1F29 100%);
color: rgba(255,255,255,.78);
padding: 36px 0 18px;
margin-top: 40px;
}
.site-footer h4 { color: #fff; margin: 0 0 10px; font-size: .95rem; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 28px;
margin-bottom: 24px;
}
.footer-brand-col p { color: rgba(255,255,255,.65); font-size: .9rem; margin: 4px 0; }
.footer-logo-img { height: 48px; width: auto; max-width: 200px; margin-bottom: 10px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 14px;
font-size: .82rem;
color: rgba(255,255,255,.55);
text-align: center;
}
@media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* Breadcrumbs */
.breadcrumbs {
font-size: .85rem;
color: var(--muted);
margin-bottom: 14px;
padding: 6px 0;
}
.breadcrumbs a { color: var(--brand-blue); }
.breadcrumbs span { color: var(--body-text); }
/* Section dividers */
.section { padding: 36px 0; }
.section-title { font-size: 1.6rem; margin-bottom: 6px; }
/* Ensure all 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; }
body { 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
--------------------------------------------------------------------- */
html, body {
height: 100%;
}
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 */
/* =====================================================================
Theme additions (WordPress integration layer)
===================================================================== */
/* Live search suggestions (front.js) */
.header-search-bar, .header-search-overlay { position: relative; }
.thn-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 10px;
box-shadow: var(--shadow-md, 0 8px 30px rgba(33,102,142,.10));
z-index: 200;
overflow: hidden;
}
.thn-suggest-item {
display: block;
padding: 10px 14px;
text-decoration: none;
border-bottom: 1px solid #F0F6FA;
}
.thn-suggest-item:last-child { border-bottom: 0; }
.thn-suggest-item:hover { background: var(--bg-light, #F1FAFD); text-decoration: none; }
.thn-suggest-item strong { color: var(--heading-dark, #173B4F); display: block; font-size: .9rem; }
.thn-suggest-item .thn-suggest-sub { color: var(--muted, #71848D); font-size: .78rem; }
/* Screen reader / accessibility */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--bg-soft, #E7F7FB);
clip: auto !important;
clip-path: none;
color: var(--heading-dark, #173B4F);
display: block;
font-size: .9rem;
height: auto;
left: 8px;
line-height: normal;
padding: 12px 18px;
text-decoration: none;
top: 8px;
width: auto;
z-index: 100000;
border-radius: 8px;
box-shadow: var(--shadow-md, 0 8px 30px rgba(33,102,142,.10));
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; }
/* WordPress admin bar overlap fix */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .site-header { top: 46px; }
}
/* Search form (WP core + theme search) */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] {
flex: 1;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 10px;
padding: 10px 14px;
}
.search-form button { background: var(--brand-blue, #21668E); color: #fff; border: 0; border-radius: 10px; padding: 10px 20px; cursor: pointer; }
/* Comments */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border: 1px solid var(--border-soft, #DCECF2); border-radius: 10px; padding: 14px 18px; margin: 10px 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
width: 100%;
border: 1px solid var(--border-soft, #DCECF2);
border-radius: 10px;
padding: 10px 14px;
}
.comment-form .submit { background: var(--brand-blue, #21668E); color: #fff; border: 0; border-radius: 10px; padding: 10px 24px; cursor: pointer; }