/* =========================================================
MOJAN — ADDITIONAL CSS (Organized)
IMPORTANT:
- This file is reorganized for readability ONLY.
- Rule order + declarations are preserved to avoid breaking anything.
- Where duplicates exist, the later block still overrides earlier blocks (as before).
========================================================= */

/* =========================================================
0) PAGE-SPECIFIC: ABOUT PAGE (page-id-933) — MOBILE ONLY
========================================================= */
@media screen and (max-width: 768px) {
.page-id-933 .wp-block-columns {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between;
gap: 16px;
padding-left: 4%;
padding-right: 4%;
overflow-x: auto;
}

.page-id-933 .wp-block-columns > .wp-block-column {
flex: 0 0 48% !important;
box-sizing: border-box;
min-width: 0;
}

.page-id-933 h2 {
font-size: 1em;
}

.page-id-933 p,
.page-id-933 ul {
font-size: 0.9em;
line-height: 1.5;
}
}

/* =========================================================
1) HIVEPRESS: CATEGORY LABEL PILLS (Listing cards + view page)
========================================================= */
/* colur style for cat labels-Shared pill style */
.hp-listing__view-block .hp-listing__categories a,
.hp-listing__view-page .hp-listing__categories a {
border-radius: 9999px;
padding: 4px 12px;
font-size: 0.75rem;
font-weight: 500;
text-transform: none;
transition: background-color 0.25s;
color: #000 !important;
background-color: #eee; /* fallback */
}

/* === Massage & Wellness (slug: mw) === */
.hp-listing__categories a[href*="mw"],
.hp-listing__categories a[href*="holistic-energy"] {
background-color: #ffe7b2;
}

/* === Hair & Grooming (slug: hair) === */
.hp-listing__categories a[href*="locs"],
.hp-listing__categories a[href*="hair"],
.hp-listing__categories a[href*="wigextensions"],
.hp-listing__categories a[href*="haircutsstyling"],
.hp-listing__categories a[href*="wash"],
.hp-listing__categories a[href*="cornrows"],
.hp-listing__categories a[href*="colouringhighlights"],
.hp-listing__categories a[href*="braids"],
.hp-listing__categories a[href*="beardngrooming"] {
background-color: #fbd2e9;
}

/* === Nails (slug: nails) === */
.hp-listing__categories a[href*="nails"],
.hp-listing__categories a[href*="nail-ext"],
.hp-listing__categories a[href*="nailart"],
.hp-listing__categories a[href*="manicure-pedicure"],
.hp-listing__categories a[href*="gel-acrylic"] {
background-color: #f5c6b6;
}

/* === Makeup, Lashes & Brows (slug: mlb) === */
.hp-listing__categories a[href*="mlb"],
.hp-listing__categories a[href*="makeupapplication"],
.hp-listing__categories a[href*="eyelash-extensions-lift"],
.hp-listing__categories a[href*="threading"] {
background-color: #d6e4ff;
}

/* === Skin & Body Care (slug: skinbody) === */
.hp-listing__categories a[href*="skinbody"],
.hp-listing__categories a[href*="waxingnsugaring"],
.hp-listing__categories a[href*="tanning"],
.hp-listing__categories a[href*="skin-boosters-mesotherapy"],
.hp-listing__categories a[href*="fat-dissolving-contouring"],
.hp-listing__categories a[href*="body-sculpting"] {
background-color: #d8f9e2;
}

/* === Aesthetics (slug: aesthetics) === */
.hp-listing__categories a[href*="aesthetics"],
.hp-listing__categories a[href*="teethwhite"],
.hp-listing__categories a[href*="ink"],
.hp-listing__categories a[href*="scalpmicropigmentation"],
.hp-listing__categories a[href*="prp-microneedling"],
.hp-listing__categories a[href*="lip-fillers"],
.hp-listing__categories a[href*="laser-electrolysis"],
.hp-listing__categories a[href*="dermalfillers"],
.hp-listing__categories a[href*="anti-wrinkle-treatments"] {
background-color: #ede7ff;
}

/* =========================================================
2) HIVEPRESS: MOBILE FILTER BUTTONS
========================================================= */
/* MOBILE FILTER BUTTON ONLY (Up to 768px) */
@media (max-width: 768px) {
button.hp-button--mobile.hp-button--listing-filter {
background-color: #8bf497 !important;
color: #000 !important;
border-radius: 9999px !important;
font-weight: 500 !important;
text-transform: none !important;
padding: 0.75rem 1.5rem !important;
transition: background-color 0.3s ease;
}

button.hp-button--mobile.hp-button--listing-filter:hover {
background-color: #75df81 !important; /* optional darker hover */
color: #000 !important;
}
}
@media (max-width: 768px) {
button.hp-button--vendor-filter {
background-color: #8bf497 !important;
color: #000 !important;
border-radius: 9999px !important;
font-weight: 500 !important;
text-transform: none !important;
}

button.hp-button--vendor-filter:hover {
background-color: #75df81 !important; /* darker hover shade */
}
}

/* =========================================================
3) HOMEPAGE: CENTER TAGS UNDER SEARCH
========================================================= */
/* CENTER TAGS UNDER HOMEPAGE SEARCH */
.hp-listing-tags.hp-block.tagcloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem; /* Optional: spacing between tags */
text-align: center;
}

/* =========================================================
4) FAQ / DETAILS COMPONENT (Global)
========================================================= */
/* FAQ Styling – Mojan Style */
details {
background-color: #fff;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 15px;
padding: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
transition: all 0.3s ease-in-out;
overflow: hidden;
}

details[open] {
border-color: #d756e2;
box-shadow: 0 4px 12px rgba(215,86,226,0.1);
}

details summary {
cursor: pointer;
padding: 15px 20px;
font-weight: 600;
font-size: 1rem;
color: #333;
list-style: none;
position: relative;
}

details summary::marker,
details summary::-webkit-details-marker {
display: none;
}

details summary::after {
content: '+';
position: absolute;
right: 20px;
font-size: 1.2rem;
color: #d756e2;
transition: transform 0.3s ease;
}

details[open] summary::after {
content: '−';
transform: rotate(180deg);
}

details p {
padding: 0 20px 15px;
margin: 0;
font-size: 0.95rem;
color: #555;
line-height: 1.6;
}

/* =========================================================
5) TABLE BASE STYLES (Global)
========================================================= */
table {
margin: 1rem;
border-collapse: collapse;
width: calc(100% - 2rem);
}

table td,
table th {
padding: 12px 16px;
border-bottom: 1px solid #eee;
text-align: left;
}

/* =========================================================
6) CUSTOM STATIC CALENDAR STYLES (css-calendar)
========================================================= */
/*editcalendar**/
.css-calendar {
max-width: 700px;
margin: 30px auto;
background: linear-gradient(145deg, #fff0f7, #f7eaff);
border-radius: 20px;
padding: 20px;
font-family: 'Poppins', sans-serif;
box-shadow: 0 4px 16px rgba(215, 86, 226, 0.08);
}

.calendar-header {
text-align: center;
font-size: 1.8em;
font-weight: 700;
color: #c23ddf;
margin-bottom: 20px;
}

.calendar-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}

.calendar-nav button {
background-color: #d756e2;
border: none;
color: white;
padding: 8px 16px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}

.calendar-nav button:hover {
background-color: #c23ddf;
}

.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border: 1px solid #f1d7ff;
border-radius: 12px;
overflow: hidden;
}

.calendar-day-name {
text-align: center;
font-weight: 600;
padding: 10px 0;
font-size: clamp(0.75rem, 1.3vw, 0.9rem);
color: #a76ccf;
background: #f1d7ff;
border-bottom: 1px solid #e9d5f9;
border-right: 1px solid #e9d5f9;
}

.calendar-day-name:nth-child(7n) {
border-right: none;
}

.calendar-day {
background: white;
min-height: 70px;
padding: 6px;
font-size: clamp(0.85rem, 1.3vw, 1rem);
color: #444;
position: relative;
text-align: left;
border-right: 1px solid #f0dbf7;
border-bottom: 1px solid #f0dbf7;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
transition: all 0.2s ease;
overflow-y: auto;
cursor: pointer;
}

.calendar-day:hover {
background: #fcf7ff;
}

.calendar-day:nth-child(7n) {
border-right: none;
}

.calendar-day.empty {
background: transparent;
border: none;
cursor: default;
}

.event-hearts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3px;
margin-top: 4px;
width: 100%;
}

.event-hearts a {
text-decoration: none;
font-size: 1.1em;
line-height: 1;
text-align: center;
display: inline-block;
}

.event-hearts a:hover {
transform: scale(1.2);
}

/* Pop-up */
.schedule-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: white;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
padding: 25px 30px;
max-width: 95%;
width: 420px;
z-index: 9999;
text-align: left;
animation: fadeIn 0.25s ease forwards;
}

.schedule-popup h3 {
margin-top: 0;
font-size: 1.4rem;
color: #b634ce;
}

.schedule-popup ul {
list-style: none;
padding: 0;
margin: 15px 0;
}

.schedule-popup li {
margin-bottom: 8px;
font-size: 1rem;
display: flex;
align-items: center;
}

.schedule-popup li strong {
margin-right: 6px;
color: #444;
}

.schedule-popup .close-btn {
background-color: #d756e2;
border: none;
color: black;
font-weight: 500;
padding: 10px 24px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
display: block;
margin: 10px auto 0;
}

@keyframes fadeIn {
from {
transform: translate(-50%, -50%) scale(0.95);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}

@media (max-width: 600px) {
.css-calendar {
padding: 16px;
}

.calendar-day {
min-height: 60px;
padding: 4px;
}

.calendar-header {
font-size: 1.5rem;
}

.event-hearts a {
font-size: 1em;
}
}
.calendar-day-name:first-child {
border-top-left-radius: 0;
}

.calendar-day-name:nth-child(7) {
border-top-right-radius: 0;
}

.css-calendar .calendar-nav {
margin-bottom: 10px;
}

.css-calendar select {
margin-top: 0;
margin-bottom: 10px;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid #ccc;
font-family: inherit;
font-size: 0.95rem;
}

.css-calendar .calendar-grid.calendar-days-labels {
margin-top: 0 !important;
}

.calendar-day.today {
border: 2px solid #ff4081;
background-color: #ffe6f0;
box-shadow: 0 0 4px rgba(255, 64, 129, 0.6);
}

/* =========================================================
7) DASHBOARD STYLES (Woo account + Mojan dashboard mockup)
========================================================= */
/* Dashboard page */

/* 1) REDUCE THEME "GREEN SPACE" (MeetingHive/Woo container padding)
Only affects WooCommerce account pages (safe scope). */
.woocommerce-account .site-content > .container{
padding-left: 12px !important;
padding-right: 12px !important;
width: 100% !important;
max-width: 1200px !important;
}

/* Sometimes theme adds extra padding on inner content blocks */
.woocommerce-account .page__text{
padding-left: 0 !important;
padding-right: 0 !important;
}

/* 2) Dashboard wrapper */
.mojan-dash{
width:100%;
/* let it grow more on desktop while still looking intentional */
max-width: 920px;
margin:0 auto;
/* tighter side padding so it “kisses” more */
padding:18px 8px 22px 8px;
box-sizing:border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
overflow-x:hidden;
}

/* remove theme link styling inside dashboard */
.mojan-dash a{
text-decoration:none !important;
color:inherit !important;
-webkit-tap-highlight-color: transparent;
}

/* 3) Top cards grid */
.mojan-topcards{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:6px;
}

.mojan-topcard{
width:calc(50% - 7px);
border-radius:18px;
padding:14px;
box-sizing:border-box;
border:1px solid rgba(0,0,0,0.06);
}

/* Card colours (tuned so Calendar vs Bookings are distinct) */
.mojan-topcard.pink{ background:#f7e3ea; } /* listings */
.mojan-topcard.purple{ background:#eadcff; } /* calendar (more pink-lilac) */
.mojan-topcard.lilac{ background:#e4eaff; } /* bookings (more blue-lilac) */
.mojan-topcard.mint{ background:#e0f1ea; } /* earnings */

.mojan-topcard-row{
display:flex;
align-items:center;
gap:10px;
}

/* Icon chip background stays soft */
.mojan-ic{
width:34px;
height:34px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
background:rgba(255,255,255,0.45);
}

.mojan-topcard-title{
font-size:18px;
font-weight:800;
letter-spacing:-0.2px;
color:#222833;
flex:1;
}

.mojan-arrow{
font-size:22px;
line-height:22px;
color:rgba(34,40,51,0.45);
}

.mojan-topcard-sub{
margin-top:10px;
font-size:14px;
color:rgba(34,40,51,0.75);
font-weight:600;
}

.mojan-pill{
display:inline-block;
margin-top:10px;
padding:8px 16px;
border-radius:999px;
background:rgba(255,255,255,0.45);
font-size:14px;
font-weight:700;
color:rgba(34,40,51,0.75);
}

/* 4) Section title */
.mojan-row-title{
margin-top:18px;
margin-bottom:10px;
font-size:16px;
font-weight:800;
color:#222833;
}

/* 5) Recent + Inbox row (keeps inbox stable on iOS) */
.mojan-row{
display:flex;
gap:14px;
align-items:stretch;
width:100%;
max-width:100%;
}

/* Recent bookings */
.mojan-recent{
flex:1 1 0%;
min-width:0;
background:#ffffff;
border-radius:18px;
border:1px solid rgba(0,0,0,0.06);
padding:12px;
box-sizing:border-box;
}

.mojan-recent-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 6px;
}

.mojan-avatar{
width:44px;
height:44px;
border-radius:999px;
flex:0 0 44px;
background:#ddd;
}
.mojan-avatar.green{ background:#bfeee0; }
.mojan-avatar.beige{ background:#ead9bf; }

.mojan-recent-text{ flex:1; min-width:0; }
.mojan-recent-name{
font-size:15px;
font-weight:800;
color:#222833;
margin-bottom:2px;
}
.mojan-recent-sub{
font-size:12.5px;
color:rgba(34,40,51,0.65);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.mojan-divider{
height:1px;
background:rgba(0,0,0,0.06);
margin:2px 6px;
}

/* Inbox card — lighter warm yellow (less brown) */
.mojan-inbox{
flex:0 0 152px;
width:152px;
max-width:152px;
background:#f6e6c7; /* lighter yellow */
border-radius:18px;
border:1px solid rgba(0,0,0,0.06);
padding:12px;
box-sizing:border-box;
position:relative;
overflow:visible;
}

.mojan-badge{
position:absolute;
top:-6px;
right:-6px;
width:28px;
height:28px;
border-radius:999px;
background:#ff5a6a;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:900;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.mojan-inbox-head{
display:flex;
align-items:center;
gap:8px;
margin-top:4px;
}

.mojan-inbox-ic{
width:30px;
height:30px;
border-radius:12px;
background:rgba(255,255,255,0.45);
display:flex;
align-items:center;
justify-content:center;
}

.mojan-inbox-title{
font-size:16px;
font-weight:900;
color:#222833;
}

.mojan-inbox-sub{
margin-top:8px;
font-size:13px;
font-weight:700;
color:rgba(34,40,51,0.75);
}

.mojan-inbox-btn{
margin-top:12px;
padding:14px 10px;
border-radius:999px;
background:#ff76a5;
color:#fff;
font-weight:900;
text-align:center;
letter-spacing:-0.2px;
}

/* 6) Big CTA */
.mojan-bigcta{
display:block;
margin-top:14px;
padding:18px 14px;
border-radius:999px;
background:#ff76a5;
color:#ffffff !important;
text-align:center;
font-size:18px;
font-weight:900;
box-shadow:0 10px 22px rgba(0,0,0,0.10);
}

/* 7) Bottom nav — WHITE bar + subtle shadow (no grey fill) */
.mojan-bottomnav{
margin-top:14px;
background:#ffffff; /* white, not grey */
border-radius:18px;
padding:12px 10px;
border:1px solid rgba(0,0,0,0.06);
display:flex;
gap:8px;
box-shadow:0 10px 26px rgba(0,0,0,0.06); /* separation */
}

.mojan-navitem{
flex:1;
border-radius:14px;
padding:10px 8px;
text-align:center;
position:relative;
}

.mojan-navitem.active{
background:#ffffff;
border:1px solid rgba(0,0,0,0.06);
box-shadow:0 6px 14px rgba(0,0,0,0.05);
}

.mojan-navic{
font-size:20px;
line-height:20px;
margin-bottom:6px;
color:#222833;
}

.mojan-navtxt{
font-size:12.5px;
font-weight:800;
color:rgba(34,40,51,0.70);
}

.mojan-badge.small{
top:6px;
right:14px;
width:22px;
height:22px;
font-size:12px;
box-shadow:none;
}

/* 8) Sign out */
.mojan-signout{
display:block;
margin-top:16px;
text-align:center;
font-weight:800;
color:#3b82f6 !important;
}

/* 9) Mobile rules — keep tight sides + preserve inbox fix */
@media (max-width: 520px){
/* even tighter on small screens */
.woocommerce-account .site-content > .container{
padding-left: 10px !important;
padding-right: 10px !important;
}
.mojan-dash{
padding-left: 6px;
padding-right: 6px;
}
}

/* Stack recent + inbox only when truly narrow (keeps current look on most iPhones) */
@media (max-width: 360px){
.mojan-inbox{ width:100%; max-width:100%; flex:1 1 auto; }
.mojan-row{ flex-direction:column; }
.mojan-topcard{ width:100%; }
}

/* =========================================================
8) DASHBOARD: ICON SWAPS (emoji -> SVG data icons)
========================================================= */
/* =========================================================
ICON CHANGES ONLY (swap emojis -> pastel mockup icons)
========================================================= */

/* Hide emoji characters but keep layout/click areas identical */
.mojan-ic,
.mojan-navic,
.mojan-inbox-ic{
font-size:0 !important;
color:transparent !important;
}

/* Base for SVG background icons */
.mojan-ic,
.mojan-navic,
.mojan-inbox-ic{
background-repeat:no-repeat !important;
background-position:center !important;
background-size:20px 20px !important;
}

/* Listings icon (soft pink house) */
.mojan-topcard.pink .mojan-ic,
.mojan-bottomnav .mojan-navitem:nth-child(1) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f29ab5' d='M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") !important;
}

/* Calendar icon (soft lilac calendar) */
.mojan-topcard.purple .mojan-ic,
.mojan-bottomnav .mojan-navitem:nth-child(2) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239c8cf5' d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2z'/%3E%3C/svg%3E") !important;
}

/* Bookings icon (soft periwinkle clipboard/calendar) */
.mojan-topcard.lilac .mojan-ic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a92ff' d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2z'/%3E%3Cpath fill='%238a92ff' d='M10.5 14.5l-2-2 1.4-1.4 0.6 0.6 3.1-3.1 1.4 1.4z'/%3E%3C/svg%3E") !important;
background-size:20px 20px !important;
}


/* ---------- EARNINGS: use £ sign ---------- */
.mojan-topcard.mint .mojan-ic,
.mojan-bottomnav .mojan-navitem:nth-child(4) .mojan-navic{
font-size:18px !important;
color:#5fbfa3 !important; /* soft mint */
font-weight:900;
background-image:none !important;
}
/* BOOKINGS bottom-nav icon (same visual language) */

/* Top card: Bookings */
.mojan-topcard.lilac .mojan-ic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a92ff' d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z'/%3E%3C/svg%3E") !important;
background-size:20px 20px !important;
}

/* Bottom nav: Bookings */
.mojan-bottomnav .mojan-navitem:nth-child(3) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a92ff' d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z'/%3E%3C/svg%3E") !important;
background-size:18px 18px !important;
}

/* Inbox icon (soft lilac chat bubble) */
.mojan-inbox-ic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239c8cf5' d='M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3l3 3 3-3h5a2 2 0 0 0 2-2z'/%3E%3C/svg%3E") !important;
}

/* =========================================================
9) DASHBOARD: PERFORMANCE / STATS CARD (hp-table + hp-chart)
NOTE: .mojan-chart-wrap + canvas rules appear multiple times.
We keep all copies to preserve existing override behavior.
========================================================= */
/* =========================
MOJAN CHART CARD
========================= */

.mojan-stats-card{
margin-top:14px;
background:#ffffff;
border:1px solid rgba(0,0,0,0.06);
border-radius:18px;
padding:14px 14px 12px 14px;
box-shadow:0 10px 26px rgba(0,0,0,0.06);
}

.mojan-stats-title{
font-size:15px;
font-weight:900;
color:#222833;
margin:2px 0 10px 0;
}

/* Make HP table look like the mockup (clean, compact, no heavy borders) */
.mojan-dash .mojan-stats-card .hp-table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin:0 0 10px 0;
}

.mojan-dash .mojan-stats-card .hp-table thead th{
font-size:12px;
font-weight:900;
color:rgba(34,40,51,0.55);
padding:6px 6px 8px 6px;
text-align:right;
}

.mojan-dash .mojan-stats-card .hp-table thead th:first-child{
text-align:left;
}

.mojan-dash .mojan-stats-card .hp-table tbody th{
font-size:13px;
font-weight:900;
color:#222833;
padding:8px 6px;
text-align:left;
white-space:nowrap;
}

.mojan-dash .mojan-stats-card .hp-table tbody td{
font-size:13px;
font-weight:800;
color:rgba(34,40,51,0.75);
padding:8px 6px;
text-align:right;
white-space:nowrap;
}

.mojan-dash .mojan-stats-card .hp-table tbody tr + tr th,
.mojan-dash .mojan-stats-card .hp-table tbody tr + tr td{
border-top:1px solid rgba(0,0,0,0.06);
}

/* Chart sizing (prevents the canvas "fixed width" problem) */
.mojan-chart-wrap{
width:100%;
border-radius:14px;
overflow:hidden;
}

.mojan-dash .mojan-chart-wrap canvas.hp-chart{
display:block !important;
width:100% !important; /* key */
max-width:100% !important; /* key */
height:220px !important; /* stable height that matches mockup */
}
/* PERFORMANCE CARD (hp-table + hp-chart) */
.mojan-perf{
margin-top:14px;
background:#ffffff;
border-radius:18px;
border:1px solid rgba(0,0,0,0.06);
padding:16px;
box-sizing:border-box;
}

.mojan-perf-title{
font-size:16px;
font-weight:900;
color:#222833;
margin-bottom:10px;
}

/* Make hp table look like mockup */
.mojan-dash .mojan-perf .hp-table{
width:100%;
border-collapse:collapse;
margin:0;
}

.mojan-dash .mojan-perf .hp-table thead th{
font-size:13px;
font-weight:900;
color:rgba(34,40,51,0.55);
padding:10px 0;
border-bottom:1px solid rgba(0,0,0,0.06);
}

.mojan-dash .mojan-perf .hp-table tbody th,
.mojan-dash .mojan-perf .hp-table tbody td{
padding:14px 0;
border-bottom:1px solid rgba(0,0,0,0.06);
font-size:15px;
}

.mojan-dash .mojan-perf .hp-table tbody th{
font-weight:900;
color:#222833;
}

.mojan-dash .mojan-perf .hp-table tbody td{
text-align:right;
font-weight:800;
color:rgba(34,40,51,0.75);
}

.mojan-dash .mojan-perf .hp-table tbody tr:last-child th,
.mojan-dash .mojan-perf .hp-table tbody tr:last-child td{
border-bottom:none;
}

/* Chart spacing + responsive sizing */
.mojan-chart-wrap{
margin-top:12px;
}

/* Canvas in HP has inline width/height, so override it */
.mojan-dash .mojan-perf canvas.hp-chart{
width:100% !important;
max-width:100% !important;
height:190px !important; /* tweak 170–220 if you want */
display:block !important;
}
/* Performance header with tiny toggle */
.mojan-stats-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}

.mojan-stats-toggle{
border:1px solid rgba(0,0,0,0.10);
background:#ffffff;
border-radius:999px;
padding:7px 12px;
font-weight:800;
font-size:12.5px;
color:#222833;
cursor:pointer;
box-shadow:0 6px 14px rgba(0,0,0,0.05);
}

/* Collapsible table container */
.mojan-stats-collapse{
max-height:0;
overflow:hidden;
transition:max-height 260ms ease;
}

/* Expanded state */
.mojan-stats-card.is-expanded .mojan-stats-collapse{
max-height:420px; /* enough to show full table on mobile */
}

/* Optional: add a little spacing when expanded */
.mojan-stats-card.is-expanded .mojan-stats-collapse{
margin-bottom:10px;
}

/* Force white, non-bold text on primary CTAs */

/* View All Bookings button */
.mojan-dash a.mojan-bigcta{
color: #ffffff !important;
font-weight: 400 !important;
}

/* Inbox button text */
.mojan-dash a.mojan-inbox,
.mojan-dash a.mojan-inbox .mojan-inbox-btn{
color: #ffffff !important;
font-weight: 400 !important;
}

/* =========================================================
10) DASHBOARD WELCOME TEXT (Defined twice in original)
- Keeping both blocks as-is (later one still wins).
========================================================= */
.mojan-welcome{
margin-top: 6px;
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
color: rgba(34,40,51,0.70);
}

.mojan-welcome-name{
font-weight: 800;
color: #222833;
}

/* Tighten top spacing ONLY on the dashboard page */
body.page-id-26 .site-content {
padding-top: 0 !important;
}
/* =====================================
Mojan Dashboard (page-id-26)
Spacing + Chart Fixes
===================================== */

/* Welcome text styling (keep as-is, just included for clarity) */
.mojan-welcome {
margin-top: 6px;
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
color: rgba(34,40,51,0.70);
}

.mojan-welcome-name {
font-weight: 800;
color: #222833;
}

/* 1️⃣ Remove excessive top spacing under Dashboard */
body.page-id-26 .header-hero {
padding-top: 12px !important;
padding-bottom: 8px !important;
}

body.page-id-26 h1.page__title.entry-title {
margin-bottom: 6px !important;
line-height: 1.05 !important;
}

body.page-id-26 #mojan-welcome {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* Ensure content starts higher on the page */
body.page-id-26 .site-content {
padding-top: 0 !important;
}

/* 2️⃣ Fix performance chart stretching on wide screens */
body.page-id-26 .mojan-chart-wrap {
width: 100% !important;
max-width: 760px !important; /* desktop sweet spot */
margin: 0 auto !important;
}

body.page-id-26 .mojan-chart-wrap canvas.hp-chart {
width: 100% !important;
height: 240px !important;
display: block !important;
}

/* Ensure the icon “slot” actually has a box to show the background-image */
body.page-id-26 .mojan-bottomnav .mojan-navic,
body.page-id-26 .mojan-bottomnav .mojan-inbox-ic {
display: inline-block !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
vertical-align: middle !important;
font-size: 0 !important; /* keep emoji hidden */
line-height: 0 !important;
color: transparent !important;
}

/* Bottom nav icon remap ONLY (page-id-26) */
body.page-id-26 .mojan-bottomnav .mojan-navic{
font-size:0 !important;
color:transparent !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:20px 20px !important;
background-image:none !important;
}

/* Inbox */
body.page-id-26 .mojan-bottomnav .mojan-navitem:nth-child(1) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239c8cf5' d='M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3l3 3 3-3h5a2 2 0 0 0 2-2z'/%3E%3C/svg%3E") !important;
}

/* Profile */
body.page-id-26 .mojan-bottomnav .mojan-navitem:nth-child(2) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a92ff' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z'/%3E%3Cpath fill='%238a92ff' d='M12 14c-4.42 0-8 2.24-8 5v2h16v-2c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E") !important;
}

/* Blog */
body.page-id-26 .mojan-bottomnav .mojan-navitem:nth-child(3) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234bc0c0' d='M6 2h9l3 3v17a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Cpath fill='%234bc0c0' d='M8 8h8v2H8zM8 12h8v2H8zM8 16h6v2H8z'/%3E%3C/svg%3E") !important;
}

/* =========================================
Page 26 — Inbox badge (soft + ROUND)
========================================= */

/* Base badge style (soft red, perfect circle) */
.page-id-26 .mojan-badge{
position:absolute !important;
display:flex !important;
align-items:center;
justify-content:center;

width:18px !important;
height:18px !important;
min-width:18px !important;
padding:0 !important;

border-radius:50% !important; /* true circle */
font-size:11px !important;
font-weight:800 !important;
line-height:1 !important;

color:#ffffff !important;
background:#f36a7a !important; /* softer red */
box-shadow:none !important;
z-index:5 !important;
pointer-events:none !important;
}

/* Ensure icon wrappers are the positioning anchor */
.page-id-26 .mojan-navic{ position:relative !important; }
.page-id-26 .mojan-inbox{ position:relative !important; }

/* --- CARD badge: FLOAT slightly above the inbox card (like the old screenshot) --- */
.page-id-26 #mojanInboxBadgeCard{
  top: -8px !important;
  right: 0 !important;
  transform: translateX(-3px);
}

/* --- NAV badge: smaller + tucked into top-right of the nav icon --- */
.page-id-26 #mojanInboxBadgeNav{
width:14px !important;
height:14px !important;
min-width:14px !important;
font-size:9px !important;

top:-5px !important;
right:-5px !important;
}

/* Keep the nav icon area consistent so the badge sits cleanly */
.page-id-26 .mojan-navic{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:26px !important;
height:26px !important;
margin:0 auto 6px auto !important;
}
/* =========================================
Inbox CARD only: fix badge cut-off + button vertical spacing
========================================= */

#mojanInboxCardLink{
position: relative !important;
overflow: visible !important; /* allow badge to sit nicely */
}

/* Badge: keep it round + keep it INSIDE the card edge on mobile */
#mojanInboxBadgeCard{
position: absolute !important;
top: -8px !important;
right: -0px !important; /* was too far out -> looked cut off */
border-radius: 999px !important;

min-width: 22px !important;
height: 22px !important;
padding: 0 6px !important;

display: inline-flex !important;
align-items: center !important;
justify-content: center !important;

background: #ff6b81 !important; /* soft red */
color: #fff !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 22px !important;
z-index: 50 !important;
}

/* Button: push it down a touch so it sits lower like your old screenshot */
#mojanInboxCardLink .mojan-inbox-btn{
margin-top: 14px !important;
}

/* Optional: add a tiny bit more bottom padding inside the card so it feels less "tight" */
#mojanInboxCardLink{
padding-bottom: 18px !important;
}

/* =====================================
USER DASHBOARD — page-id-2265
Mirror vendor dashboard spacing exactly
===================================== */

/* Top spacing like vendor */
body.page-id-2265 .site-content{
  padding-top:0 !important;
}

body.page-id-2265 .header-hero{
  padding-top:12px !important;
  padding-bottom:8px !important;
}

body.page-id-2265 h1.page__title.entry-title,
body.page-id-2265 h1.hp-page__title,
body.page-id-2265 .hp-page__title{
  margin-bottom:6px !important;
  line-height:1.05 !important;
}

/* Remove the page shell side padding */
body.page-id-2265 .site-content > .container,
body.page-id-2265 .content,
body.page-id-2265 .page__content,
body.page-id-2265 .page__text{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Let dashboard span properly */
body.page-id-2265 .mojan-dash,
body.page-id-2265 .mojan-dash--user{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:18px 0 22px 0 !important;
  box-sizing:border-box !important;
  overflow-x:hidden;
}

/* Keep card layout same */
body.page-id-2265 .mojan-topcards{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:6px !important;
}

body.page-id-2265 .mojan-row{
  display:flex !important;
  gap:14px !important;
  align-items:stretch !important;
}

body.page-id-2265 .mojan-recent{
  flex:1 1 0 !important;
  min-width:0 !important;
}

/* Slight inner breathing room so cards do not touch shell */
body.page-id-2265 .mojan-topcards,
body.page-id-2265 .mojan-row,
body.page-id-2265 .mojan-row-title{
  padding-left:12px !important;
  padding-right:12px !important;
  box-sizing:border-box !important;
}
/* USER DASHBOARD — bottom nav icon remap to match vendor */

body.page-id-2265 .mojan-bottomnav .mojan-navic,
body.page-id-2265 .mojan-bottomnav .mojan-inbox-ic{
display:inline-block !important;
width:22px !important;
height:22px !important;
min-width:22px !important;
min-height:22px !important;
background-repeat:no-repeat !important;
background-position:center center !important;
background-size:contain !important;
vertical-align:middle !important;
font-size:0 !important;
line-height:0 !important;
color:transparent !important;
}

body.page-id-2265 .mojan-bottomnav .mojan-navic{
font-size:0 !important;
color:transparent !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:20px 20px !important;
background-image:none !important;
}

/* 1 Dashboard */
body.page-id-2265 .mojan-bottomnav .mojan-navitem:nth-child(1) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239c8cf5' d='M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3l3 3 3-3h5a2 2 0 0 0 2-2z'/%3E%3C/svg%3E") !important;
}

/* 2 Bookings */
body.page-id-2265 .mojan-bottomnav .mojan-navitem:nth-child(2) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a92ff' d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z'/%3E%3Cpath fill='%238a92ff' d='M12 14c-4.42 0-8 2.24-8 5v2h16v-2c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E") !important;
}

/* 3 Services */
body.page-id-2265 .mojan-bottomnav .mojan-navitem:nth-child(3) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f29ab5' d='M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm3 4h6v2H9V8zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/%3E%3C/svg%3E") !important;
}



/* 5 Profile */
body.page-id-2265 .mojan-bottomnav .mojan-navitem:nth-child(5) .mojan-navic{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2368c7a7' d='M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") !important;
}