/* =============================================================
   my-profile.css  —  Sidebar-based dashboard layout
   Design tokens: Primary gold #B48350 · Dark navy #1B1F3D
   Font: HelveticaNowDisplay
   ============================================================= */


/* ---------------------------------------------------------------
   0. GLOBAL MICRO-INTERACTIONS
--------------------------------------------------------------- */
html { scroll-behavior: smooth; }

::selection {
    background: rgba(180,131,80,0.28);
    color: #1B1F3D;
}

/* Gold hover for content-area links */
.mp-content a:not(.mp-nav-item):not(.mp-sidebar-view-btn):not(.mp-sidebar-logout) {
    transition: color 0.18s ease;
}
.mp-content a:not(.mp-nav-item):not(.mp-sidebar-view-btn):not(.mp-sidebar-logout):hover {
    color: #B48350;
}

/* ---------------------------------------------------------------
   1. MAIN LAYOUT (sidebar + content)
--------------------------------------------------------------- */
.mp-layout {
    display: flex;
    min-height: calc(100vh - 56px); /* minus header height */
}

/* ---------------------------------------------------------------
   2. LEFT SIDEBAR (260px, fixed, dark)
--------------------------------------------------------------- */
.mp-sidebar {
    width: 260px;
    min-width: 260px;
    /* Subtle vertical gradient: slightly lighter at top, deeper at bottom */
    background: linear-gradient(180deg, #22274a 0%, #1B1F3D 40%, #171b36 100%);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px; /* below header */
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(180,131,80,0.18) transparent;
    /* Refined right-edge shadow to separate from content */
    box-shadow: 4px 0 24px rgba(0,0,0,0.28);
}
.mp-sidebar::-webkit-scrollbar { width: 3px; }
.mp-sidebar::-webkit-scrollbar-track { background: transparent; }
.mp-sidebar::-webkit-scrollbar-thumb {
    background: rgba(180,131,80,0.22);
    border-radius: 2px;
}
.mp-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(180,131,80,0.40);
}

/* Profile mini card */
.mp-sidebar-profile {
    padding: 28px 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Warm gold-tinted gradient wash behind profile area */
    background: linear-gradient(160deg, rgba(180,131,80,0.10) 0%, rgba(180,131,80,0.03) 60%, transparent 100%);
    border-bottom: 1px solid rgba(180,131,80,0.12);
    position: relative;
}
.mp-sidebar-avatar {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.mp-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    z-index: 2; /* sits above gap ring */
}
.mp-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-online-dot {
    display: none;
    z-index: 3;
    box-shadow: 0 0 6px rgba(39,174,96,0.55);
}
.mp-sidebar-profile-info { min-width: 0; }
.mp-sidebar-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.mp-sidebar-balance {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin-top: 5px;
}
.mp-sidebar-location {
    font-size: 11px;
    color: rgba(180,131,80,0.65);
    margin-top: 3px;
    letter-spacing: 0.02em;
}

/* Navigation */
.mp-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
}

/* Section labels: PROFILE / INSIGHTS / ACCOUNT */
.mp-nav-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(180,131,80,0.40);
    padding: 20px 14px 7px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-nav-label:first-child { padding-top: 4px; }
/* Fading line decoration extending from the label */
.mp-nav-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(180,131,80,0.20) 0%, transparent 100%);
    margin-left: 2px;
}

/* Nav items */
.mp-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.42);
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        background 0.2s ease;
    cursor: pointer;
    margin-bottom: 1px;
    position: relative;
}
.mp-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease, opacity 0.2s ease;
}
.mp-nav-item:hover {
    color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.05);
}
.mp-nav-item:hover i {
    color: rgba(180,131,80,0.85);
    opacity: 1;
    transform: scale(1.15);
}

.mp-nav-item.active {
    color: #fff;
    background: rgba(255,255,255,0.08);
    font-weight: 500;
}
.mp-nav-item.active i {
    color: #B48350;
    opacity: 1;
}

/* Sidebar footer */
.mp-sidebar-footer {
    padding: 16px 16px 18px;
    border-top: 1px solid rgba(180,131,80,0.10);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(0deg, rgba(0,0,0,0.14) 0%, transparent 100%);
}

/* "View Public Profile" — premium gold-gradient hover treatment */
.mp-sidebar-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid rgba(180,131,80,0.28);
    color: rgba(180,131,80,0.75);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
/* Shimmer layer */
.mp-sidebar-view-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(212,175,110,0.13) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mp-sidebar-view-btn:hover {
    background: rgba(180,131,80,0.09);
    color: #d4af6e;
    border-color: rgba(180,131,80,0.55);
    box-shadow: 0 0 14px rgba(180,131,80,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: translateY(-1px);
}
.mp-sidebar-view-btn:hover::before { opacity: 1; }
.mp-sidebar-view-btn i {
    font-size: 10px;
    transition: transform 0.22s ease;
}
.mp-sidebar-view-btn:hover i { transform: translate(1px, -1px); }

/* Logout — intentionally recedes, subtle danger hint on hover */
.mp-sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    color: rgba(255,255,255,0.18);
    font-size: 11.5px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 5px;
    transition: color 0.2s ease;
}
.mp-sidebar-logout:hover { color: rgba(220,80,80,0.55); }
.mp-sidebar-logout i {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.mp-sidebar-logout:hover i { transform: translateX(2px); }

/* ---------------------------------------------------------------
   3. MOBILE SIDEBAR TOGGLE & OVERLAY
--------------------------------------------------------------- */
.mp-sidebar-toggle {
    display: none; /* hidden on desktop */
    position: fixed;
    top: 68px;
    left: 12px;
    z-index: 101;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: #1B1F3D;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.mp-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mp-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ---------------------------------------------------------------
   4. RIGHT CONTENT AREA
--------------------------------------------------------------- */
.mp-content {
    flex: 1;
    margin-left: 260px;
    padding: 28px 32px 60px;
    background: #f5f6f8;
    min-height: calc(100vh - 56px);
}

/* Panels — only active one is visible */
.mp-panel {
    display: none;
    animation: mp-slideUp 0.38s cubic-bezier(0.34, 1.30, 0.64, 1);
}
.mp-panel.active {
    display: block;
}
@keyframes mp-slideUp {
    from { opacity: 0; transform: translateY(18px) scale(0.992); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------
   5. PAGE TITLE (each section)
--------------------------------------------------------------- */
.mp-page-title {
    margin-bottom: 24px;
}
.mp-page-title h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1B1F3D;
    margin: 0;
}
.mp-page-title p {
    font-size: 14px;
    color: rgba(0,0,0,0.40);
    margin: 4px 0 0;
}

/* ---------------------------------------------------------------
   6. CARDS (generic)
--------------------------------------------------------------- */
.mp-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.06),
        0 12px 40px rgba(0,0,0,0.05),
        0 0 0 1px rgba(255,255,255,0.8) inset;
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
.mp-card:hover {
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 6px 24px rgba(0,0,0,0.09),
        0 16px 52px rgba(0,0,0,0.07),
        0 0 0 1px rgba(255,255,255,0.8) inset;
}
.mp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 26px 18px;
    background: linear-gradient(180deg, rgba(250,249,247,1) 0%, rgba(255,255,255,0) 100%);
    border-bottom: 1px solid rgba(0,0,0,0.055);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
.mp-card-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1B1F3D;
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.mp-card-header h2 i {
    color: #B48350;
    font-size: 15px;
    opacity: 1;
}
.mp-card-hint {
    font-size: 12px;
    color: rgba(0,0,0,0.30);
}
.mp-card-period {
    font-size: 12px;
    color: rgba(0,0,0,0.38);
    background: rgba(0,0,0,0.035);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.1px;
}
.mp-period-tabs {
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.04);
    border-radius: 7px;
    padding: 3px;
}
.mp-period-tab {
    padding: 4px 12px;
    border-radius: 5px;
    border: none;
    background: none;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0,0,0,0.40);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.mp-period-tab:hover {
    color: rgba(0,0,0,0.60);
}
.mp-period-tab.active {
    background: #fff;
    color: #1B1F3D;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mp-card-body {
    padding: 26px 26px 24px;
}
.mp-card-body-compact {
    padding: 12px 26px;
}
.mp-card-desc {
    font-size: 13px;
    color: rgba(0,0,0,0.45);
    margin: 0 0 16px;
}

/* ---------------------------------------------------------------
   7. OVERVIEW — HERO STAT CARDS (2-col with sparklines)
--------------------------------------------------------------- */
.mp-ov-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.mp-ov-hero-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 20px 22px 14px;
    position: relative;
    overflow: hidden;
}
.mp-ov-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.mp-ov-hero-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0,0,0,0.42);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mp-ov-hero-num {
    font-size: 32px;
    font-weight: 800;
    color: #1B1F3D;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
.mp-sparkline {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 10px;
}
.mp-ov-stat-change {
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.mp-ov-stat-change.up {
    color: #16a34a;
    background: rgba(22,163,74,0.08);
}
.mp-ov-stat-change.down {
    color: #dc2626;
    background: rgba(220,38,38,0.08);
}
.mp-ov-stat-change i { font-size: 8px; }

/* ---------------------------------------------------------------
   7b. SECONDARY STATS ROW (compact)
--------------------------------------------------------------- */
.mp-ov-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.mp-ov-stat-sm {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: box-shadow 0.2s ease;
}
.mp-ov-stat-sm:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.mp-ov-sm-icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}
.mp-ov-sm-info { flex: 1; min-width: 0; }
.mp-ov-sm-num {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #1B1F3D;
    line-height: 1.2;
}
.mp-ov-sm-label {
    display: block;
    font-size: 10px;
    color: rgba(0,0,0,0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-ov-sm-sub {
    font-size: 10px;
    color: rgba(0,0,0,0.30);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   8. OVERVIEW TWO-COLUMN GRID
--------------------------------------------------------------- */
.mp-overview-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* ---------------------------------------------------------------
   9. AREA CHART (SVG-based)
--------------------------------------------------------------- */
.mp-chart-area {
    padding: 0 4px;
    position: relative;
    cursor: pointer;
}
.mp-area-chart {
    display: block;
    width: 100%;
    height: 180px;
}
.mp-chart-crosshair {
    display: none;
}
.mp-chart-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #B48350;
    box-shadow: 0 0 0 3px rgba(180,131,80,0.20);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.12s ease;
}
.mp-chart-tooltip {
    position: absolute;
    background: #1B1F3D;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity 0.12s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.20);
    z-index: 5;
}
.mp-chart-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #1B1F3D;
}
.mp-chart-area:hover .mp-chart-crosshair,
.mp-chart-area:hover .mp-chart-dot,
.mp-chart-area:hover .mp-chart-tooltip {
    opacity: 1;
}
.mp-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(0,0,0,0.28);
    margin-top: 6px;
    padding: 0 2px;
}
.mp-chart-inline-stats {
    display: flex;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 16px;
}
.mp-chart-stat {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    border-right: 1px solid rgba(0,0,0,0.06);
}
.mp-chart-stat:last-child { border-right: none; }
.mp-chart-stat-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1B1F3D;
}
.mp-chart-stat-label {
    display: block;
    font-size: 10.5px;
    color: rgba(0,0,0,0.32);
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   10. ACTIVITY FEED (icon-based)
--------------------------------------------------------------- */
.mp-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 8px;
    margin: 0 -8px;
    transition: background 0.15s ease;
}
.mp-activity-item:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mp-activity-item:hover { background: rgba(180,131,80,0.03); }
.mp-activity-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.mp-ai-view    { background: rgba(59,130,246,0.08);  color: #3b82f6; }
.mp-ai-fav     { background: rgba(239,68,68,0.08);   color: #ef4444; }
.mp-ai-review  { background: rgba(245,166,35,0.08);  color: #f5a623; }
.mp-ai-booking { background: rgba(39,174,96,0.08);   color: #27ae60; }
.mp-activity-body {
    flex: 1;
    min-width: 0;
}
.mp-activity-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1B1F3D;
    line-height: 1.3;
}
.mp-activity-desc {
    display: block;
    font-size: 11.5px;
    color: rgba(0,0,0,0.40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-activity-time {
    font-size: 11px;
    color: rgba(0,0,0,0.25);
    white-space: nowrap;
    font-weight: 500;
}

/* ---------------------------------------------------------------
   10b. UPCOMING SCHEDULE
--------------------------------------------------------------- */
.mp-upcoming-list { }
.mp-upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-radius: 8px;
    margin: 0 -8px;
    transition: background 0.15s ease;
}
.mp-upcoming-item:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mp-upcoming-item:hover { background: rgba(180,131,80,0.03); }
.mp-upcoming-date {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(180,131,80,0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mp-upcoming-day {
    font-size: 17px;
    font-weight: 800;
    color: #1B1F3D;
    line-height: 1;
}
.mp-upcoming-month {
    font-size: 9.5px;
    font-weight: 600;
    color: #B48350;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mp-upcoming-body {
    flex: 1;
    min-width: 0;
}
.mp-upcoming-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1B1F3D;
    line-height: 1.3;
}
.mp-upcoming-desc {
    display: block;
    font-size: 11.5px;
    color: rgba(0,0,0,0.40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-upcoming-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mp-badge-confirmed {
    color: #16a34a;
    background: rgba(22,163,74,0.08);
}
.mp-badge-pending {
    color: #d97706;
    background: rgba(217,119,6,0.08);
}

/* ---------------------------------------------------------------
   11. COUNTRIES GRID
--------------------------------------------------------------- */
.mp-countries-grid { }
.mp-country-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mp-country-row:last-child { border-bottom: none; }
.mp-country-flag { font-size: 20px; }
.mp-country-name {
    width: 110px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1B1F3D;
}
.mp-country-visits {
    font-size: 12px;
    color: rgba(0,0,0,0.35);
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.mp-country-bar {
    flex: 1;
    height: 5px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    overflow: hidden;
}
.mp-country-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #B48350 0%, #D4A76A 100%);
    border-radius: 3px;
    transform-origin: left center;
    animation: mp-bar-grow 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mp-bar-grow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
.mp-country-pct {
    font-size: 12px;
    color: rgba(0,0,0,0.40);
    width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   12. PHOTO GRID
--------------------------------------------------------------- */
.mp-photo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 0 26px 20px;
    padding-top: 20px;
}
.mp-photo-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: transform 0.28s cubic-bezier(0.34, 1.28, 0.64, 1), box-shadow 0.28s ease;
}
.mp-photo-item:hover {
    transform: scale(1.04) translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.20);
}
.mp-photo-inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.mp-photo-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: filter 0.28s ease;
}
.mp-photo-item:hover .mp-photo-inner img {
    filter: brightness(0.88);
}
.mp-photo-gradient-1 { background: linear-gradient(135deg, #B48350, #D4A76A); }
.mp-photo-gradient-2 { background: linear-gradient(135deg, #1B1F3D, #2a3158); }
.mp-photo-gradient-3 { background: linear-gradient(135deg, #6B4C8A, #9B7AB8); }
.mp-photo-gradient-4 { background: linear-gradient(135deg, #3D6B9E, #5A8DBF); }
.mp-photo-gradient-5 { background: linear-gradient(135deg, #b63b4d, #d4606f); }
.mp-photo-gradient-6 { background: linear-gradient(135deg, #2D8B6F, #4AAF8E); }
.mp-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10,12,28,0.72) 0%,
        rgba(10,12,28,0.30) 50%,
        rgba(10,12,28,0.08) 100%
    );
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0;
    transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
}
.mp-photo-item:hover .mp-photo-overlay {
    opacity: 1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mp-photo-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    transform: translateY(4px);
}
.mp-photo-item:hover .mp-photo-action { transform: translateY(0); }
.mp-photo-action:hover {
    background: #B48350;
    border-color: #B48350;
    transform: translateY(-1px) scale(1.08) !important;
}
.mp-btn-delete:hover {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
}
.mp-photo-main-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #B48350, #c99660);
    color: #fff;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(180,131,80,0.45), 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.mp-photo-drag {
    position: absolute;
    top: 8px;
    right: 8px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    z-index: 2;
    cursor: grab;
    transition: color 0.18s ease;
}
.mp-photo-item:hover .mp-photo-drag { color: rgba(255,255,255,0.85); }
.mp-photo-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 0 0 2px #B48350;
}
.mp-photo-item.drag-over {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #B48350, 0 8px 28px rgba(180,131,80,0.3);
}

/* Upload area & subsections inside cards */
.mp-upload-area,
.mp-subsection {
    padding: 0 24px 20px;
}

/* ---------------------------------------------------------------
   13. DROPZONE
--------------------------------------------------------------- */
.mp-dropzone {
    border: 2px dashed rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.mp-dropzone:hover {
    border-color: rgba(180,131,80,0.4);
    background: rgba(180,131,80,0.02);
}
.mp-dropzone.dragover {
    border-color: #B48350;
    background: rgba(180,131,80,0.05);
}
.mp-dropzone-icon {
    font-size: 36px;
    color: #B48350;
    opacity: 0.55;
    margin-bottom: 10px;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mp-dropzone:hover .mp-dropzone-icon {
    opacity: 0.85;
    transform: translateY(-2px);
}
.mp-dropzone-text { font-size: 14px; color: rgba(0,0,0,0.50); margin-bottom: 4px; font-weight: 500; }
.mp-dropzone-hint { font-size: 12px; color: rgba(0,0,0,0.28); }
.mp-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 9px 20px;
    background: #B48350;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'HelveticaNowDisplay', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mp-upload-btn:hover { background: #9a6e40; }
.mp-upload-previews { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mp-upload-preview { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; }
.mp-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.mp-upload-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-upload-remove:hover { background: #e74c3c; }

/* ---------------------------------------------------------------
   14. STORY HIGHLIGHTS (Instagram-style grouped stories)
--------------------------------------------------------------- */
.mp-stories-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 6px 8px;
}
.mp-stories-row::-webkit-scrollbar { display: none; }
.mp-story-item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.mp-story-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 0 0 2.5px #fff,
        0 0 0 4.5px #B48350,
        0 0 0 5.5px rgba(180,131,80,0.20),
        0 4px 14px rgba(180,131,80,0.22);
    transition: transform 0.22s cubic-bezier(0.34, 1.36, 0.64, 1), box-shadow 0.22s ease;
}
.mp-story-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-story-item:hover .mp-story-circle {
    transform: scale(1.08);
    box-shadow:
        0 0 0 2.5px #fff,
        0 0 0 5px #B48350,
        0 0 0 6.5px rgba(180,131,80,0.28),
        0 8px 22px rgba(180,131,80,0.35);
}
.mp-story-name {
    font-size: 11px;
    font-weight: 600;
    color: #2c2c2c;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.mp-story-count {
    font-size: 9.5px;
    color: #999;
    margin-top: -4px;
}
.mp-story-edit,
.mp-story-delete {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
    font-size: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.15s ease, transform 0.15s ease;
}
.mp-story-item:hover .mp-story-edit,
.mp-story-item:hover .mp-story-delete {
    opacity: 1;
}
.mp-story-delete {
    top: -2px;
    right: -2px;
    background: #e74c3c;
    box-shadow: 0 2px 6px rgba(231,76,60,0.35);
}
.mp-story-delete:hover { background: #c0392b; transform: scale(1.15); }
.mp-story-edit {
    top: -2px;
    left: -2px;
    background: #B48350;
    box-shadow: 0 2px 6px rgba(180,131,80,0.35);
}
.mp-story-edit:hover { background: #9a6e3e; transform: scale(1.15); }
.mp-story-add {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2.5px dashed rgba(180,131,80,0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 20px;
    color: rgba(180,131,80,0.40);
    cursor: pointer;
    flex-shrink: 0;
    background: rgba(180,131,80,0.03);
    transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.36, 0.64, 1), box-shadow 0.22s ease;
}
.mp-story-add .mp-story-name {
    color: rgba(180,131,80,0.50);
    font-size: 10px;
    margin-top: 6px;
}
.mp-story-add:hover {
    border-color: #B48350;
    color: #B48350;
    background: rgba(180,131,80,0.07);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(180,131,80,0.18);
}
.mp-story-add:hover .mp-story-name {
    color: #B48350;
}

/* ---------------------------------------------------------------
   14b. MODAL (highlight name, etc.)
--------------------------------------------------------------- */
.mp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,12,28,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.mp-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mp-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
    width: 380px;
    max-width: 90vw;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1);
}
.mp-modal-overlay.active .mp-modal {
    transform: scale(1) translateY(0);
}
.mp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.mp-modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1B1F3D;
    margin: 0;
}
.mp-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.40);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.mp-modal-close:hover {
    background: rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.65);
}
.mp-modal-body {
    padding: 20px 24px;
}
.mp-modal-body .mp-input {
    margin-top: 8px;
}
.mp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 20px;
}
.mp-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.mp-btn:active { transform: scale(0.97); }
.mp-btn-sm {
    padding: 7px 16px;
    font-size: 12px;
}
.mp-btn-primary {
    background: linear-gradient(135deg, #B48350, #c99660);
    color: #fff;
    box-shadow: 0 2px 8px rgba(180,131,80,0.30);
}
.mp-btn-primary:hover {
    background: linear-gradient(135deg, #a3743f, #B48350);
    box-shadow: 0 4px 14px rgba(180,131,80,0.40);
}
.mp-btn-secondary {
    background: rgba(0,0,0,0.05);
    color: #555;
}
.mp-btn-secondary:hover {
    background: rgba(0,0,0,0.09);
}

/* Highlight modal — photo management */
.mp-modal-highlight {
    width: 440px;
}
.mp-hl-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 32px;
}
.mp-hl-photo {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.mp-hl-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-hl-photo-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.mp-hl-photo:hover .mp-hl-photo-remove {
    opacity: 1;
}
.mp-hl-photo-remove:hover {
    background: #e74c3c;
}
.mp-hl-empty {
    font-size: 12px;
    color: rgba(0,0,0,0.30);
    padding: 16px 0 8px;
}
.mp-hl-add-wrap {
    margin-top: 10px;
}
.mp-hl-add-btn {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1.5px dashed rgba(180,131,80,0.30);
    background: none;
    color: #B48350;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.mp-hl-add-btn:hover {
    border-color: #B48350;
    background: rgba(180,131,80,0.05);
}

/* Story group header meta */
.mp-story-group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-story-group-count {
    font-size: 12px;
    color: rgba(0,0,0,0.35);
    font-weight: 400;
}
.mp-story-group-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
    background: transparent;
    color: rgba(0,0,0,0.3);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.mp-story-group-delete:hover {
    background: rgba(231,76,60,0.08);
    color: #e74c3c;
    border-color: rgba(231,76,60,0.2);
}

/* ---------------------------------------------------------------
   15. FORM STYLES
--------------------------------------------------------------- */
.mp-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.mp-form-row.mp-full-width { grid-template-columns: 1fr; }
.mp-form-group { display: flex; flex-direction: column; }
.mp-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(0,0,0,0.40);
    margin-bottom: 7px;
}
.mp-input,
.mp-select,
.mp-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: rgba(0,0,0,0.80);
    background: #fff;
    transition: border-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}
.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus { border-color: #B48350; }
.mp-input::placeholder,
.mp-textarea::placeholder { color: rgba(0,0,0,0.25); }
.mp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.mp-textarea { resize: vertical; min-height: 90px; }

/* Rich text editor */
.mp-editor {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 9px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.mp-editor:focus-within {
    border-color: #B48350;
}
.mp-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(27,31,61,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-wrap: wrap;
}
.mp-editor-btn {
    width: 30px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 5px;
    color: rgba(0,0,0,0.45);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.mp-editor-btn:hover {
    background: rgba(180,131,80,0.10);
    color: #B48350;
}
.mp-editor-btn.active {
    background: rgba(180,131,80,0.14);
    color: #B48350;
}
.mp-editor-sep {
    width: 1px;
    height: 18px;
    background: rgba(0,0,0,0.08);
    margin: 0 4px;
}
.mp-editor-content {
    min-height: 120px;
    max-height: 300px;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #1B1F3D;
    outline: none;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
}
.mp-editor-content:empty::before {
    content: 'Write your bio...';
    color: rgba(0,0,0,0.25);
}
.mp-editor-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 0 4px;
}
.mp-editor-content blockquote {
    border-left: 3px solid #B48350;
    margin: 8px 0;
    padding: 4px 12px;
    color: rgba(0,0,0,0.55);
}
.mp-editor-content ul,
.mp-editor-content ol {
    padding-left: 20px;
    margin: 6px 0;
}
.mp-editor-content a {
    color: #B48350;
    text-decoration: underline;
}

.mp-input-suffix-wrap { position: relative; }
.mp-input-suffix-wrap::after {
    content: attr(data-suffix);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: rgba(0,0,0,0.30);
    pointer-events: none;
}
.mp-input-suffix-wrap .mp-input { padding-right: 40px; }
.mp-field-hint { font-size: 11px; color: rgba(0,0,0,0.28); margin-top: 4px; }
.mp-input-sm { padding: 8px 10px; font-size: 13px; width: 90px; }

/* ---------------------------------------------------------------
   16. BUTTONS
--------------------------------------------------------------- */
.mp-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px 20px;
    background: #B48350;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin-top: 6px;
}
.mp-save-btn:hover  { opacity: 0.88; }
.mp-save-btn:active { transform: scale(0.98); }
.mp-btn-small { width: auto; padding: 10px 20px; font-size: 13px; }
.mp-btn-danger {
    background: transparent;
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.30);
    width: auto;
}
.mp-btn-danger:hover { background: rgba(231,76,60,0.06); opacity: 1; }
.mp-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px dashed rgba(0,0,0,0.13);
    border-radius: 10px;
    background: transparent;
    color: rgba(0,0,0,0.38);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    transition: border-color 0.22s ease,
                color 0.22s ease,
                background 0.22s ease,
                box-shadow 0.22s ease;
}
.mp-add-row-btn i {
    font-size: 11px;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mp-add-row-btn:hover {
    border-color: #B48350;
    color: #B48350;
    background: rgba(180,131,80,0.04);
    box-shadow: 0 0 0 3px rgba(180,131,80,0.08);
}
.mp-add-row-btn:hover i { transform: rotate(90deg) scale(1.2); }

/* ---------------------------------------------------------------
   17. TOGGLE SWITCH
--------------------------------------------------------------- */
.mp-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block;
}
.mp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.mp-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.13);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s ease;
}
.mp-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    top: 3px;
    left: 3px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.10);
}
.mp-toggle input:checked + .mp-toggle-slider {
    background: linear-gradient(135deg, #C4944A 0%, #B48350 55%, #9a6e40 100%);
    box-shadow: 0 0 0 3px rgba(180,131,80,0.15);
}
.mp-toggle input:checked + .mp-toggle-slider::before {
    transform: translateX(20px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.14);
}
.mp-toggle-lg { width: 52px; height: 28px; }
.mp-toggle-lg .mp-toggle-slider { border-radius: 14px; }
.mp-toggle-lg .mp-toggle-slider::before { width: 22px; height: 22px; }
.mp-toggle-lg input:checked + .mp-toggle-slider::before { transform: translateX(24px); }

/* Toggle label visibility states */
.mp-toggle-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    min-width: 76px;
    display: inline-block;
    transition: color 0.2s ease;
}
.mp-toggle-label.is-included { color: #27ae60; }
.mp-toggle-label.not-included { color: rgba(0,0,0,0.30); }

/* ---------------------------------------------------------------
   17b. SUBSECTION TITLES
--------------------------------------------------------------- */
.mp-subsection-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #1B1F3D;
    padding-left: 10px;
    margin: 0 0 16px;
    border-left: 3px solid #B48350;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   18. PRICING / RATES TABLE
--------------------------------------------------------------- */
.mp-rates-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 40px;
    gap: 10px;
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(0,0,0,0.38);
    background: rgba(27,31,61,0.03);
    border-radius: 8px;
    margin-bottom: 4px;
}
/* Rate rows -- .mp-pricing-row in existing markup, .mp-rate-row as alias */
.mp-pricing-row,
.mp-rate-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 40px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-radius: 8px;
    transition: background 0.18s ease;
}
.mp-pricing-row:hover,
.mp-rate-row:hover { background: rgba(180,131,80,0.04); }
.mp-pricing-row:last-of-type,
.mp-rate-row:last-of-type { border-bottom: none; }

/* Currency symbol */
.mp-currency {
    color: #B48350;
    font-weight: 700;
    font-size: 14px;
    margin-right: 1px;
    display: inline-block;
}

/* Price field with currency badge */
.mp-price-field {
    position: relative;
    display: flex;
    align-items: center;
}
.mp-price-field .mp-price-currency {
    position: absolute;
    left: 11px;
    font-size: 12px;
    font-weight: 700;
    color: #B48350;
    pointer-events: none;
    z-index: 1;
}
.mp-price-field .mp-input {
    padding-left: 28px;
    width: 100%;
}

/* Inline rate price inputs */
.mp-rate-input,
.mp-pricing-row input[type="number"],
.mp-pricing-row input[type="text"],
.mp-rate-row input[type="number"],
.mp-rate-row input[type="text"] {
    background: rgba(27,31,61,0.03);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 14px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    color: #1B1F3D;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
    outline: none;
}
.mp-rate-input:focus,
.mp-pricing-row input[type="number"]:focus,
.mp-pricing-row input[type="text"]:focus,
.mp-rate-row input[type="number"]:focus,
.mp-rate-row input[type="text"]:focus {
    border-color: #B48350;
    background: #fff;
}

/* Delete buttons -- shared red-glow effect */
.mp-pricing-delete,
.mp-rate-delete {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(0,0,0,0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
}
.mp-pricing-delete:hover,
.mp-rate-delete:hover {
    background: rgba(231,76,60,0.07);
    color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.12),
                0 0 10px rgba(231,76,60,0.10);
    transform: scale(1.08);
}
.mp-pricing-delete:active,
.mp-rate-delete:active { transform: scale(0.95); }

/* ---------------------------------------------------------------
   19. SERVICES LIST
--------------------------------------------------------------- */
.mp-service-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-radius: 8px;
    transition: background 0.18s ease;
}
.mp-service-row:nth-child(even) { background: rgba(27,31,61,0.025); }
.mp-service-row:hover { background: rgba(180,131,80,0.05); }
.mp-service-row:last-child { border-bottom: none; }
.mp-service-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.70);
}
.mp-service-extra { margin-left: 8px; width: 110px; flex-shrink: 0; }
.mp-service-extra-hidden { opacity: 0.28; pointer-events: none; }

/* ---------------------------------------------------------------
   20. SCHEDULE
--------------------------------------------------------------- */
.mp-schedule-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    margin-bottom: 6px;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.mp-schedule-row:nth-child(even) {
    background: rgba(180,131,80,0.03);
}
.mp-schedule-row:hover {
    background: rgba(180,131,80,0.06);
    border-color: rgba(180,131,80,0.22);
    box-shadow: 0 2px 8px rgba(180,131,80,0.07);
}
.mp-schedule-row.mp-schedule-closed {
    background: rgba(0,0,0,0.018);
    border-color: rgba(0,0,0,0.05);
    opacity: 0.72;
}
.mp-schedule-row.mp-schedule-closed:hover {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
    box-shadow: none;
}
.mp-day-name {
    width: 108px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1B1F3D;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mp-day-name::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B48350;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.18s ease;
}
.mp-schedule-row.mp-schedule-closed .mp-day-name::before {
    background: rgba(0,0,0,0.18);
    transform: scale(0.85);
}
.mp-schedule-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
    opacity: 1;
    max-height: 60px;
    transition: opacity 0.25s ease, max-height 0.25s ease;
}
.mp-schedule-times.mp-times-hidden {
    opacity: 0;
    max-height: 0;
}
.mp-time-select {
    width: 116px;
    padding: 8px 32px 8px 11px;
    font-size: 13px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    color: rgba(0,0,0,0.80);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    outline: none;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mp-time-select:focus {
    border-color: #B48350;
    box-shadow: 0 0 0 3px rgba(180,131,80,0.10);
}
.mp-time-sep {
    color: rgba(0,0,0,0.22);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    user-select: none;
}
.mp-schedule-closed-label {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.30);
    font-style: normal;
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    padding: 3px 10px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mp-schedule-row.mp-schedule-closed .mp-schedule-closed-label {
    opacity: 1;
}

/* ── Special Availability Section ── */
.mp-special-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-special-date-row .mp-input {
    flex: 1;
}
.mp-special-dates-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(180, 131, 80, 0.04);
    border: 1px solid rgba(180, 131, 80, 0.12);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    min-height: 48px;
}
.mp-special-dates-list:empty {
    display: none;
}
.mp-special-date-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 3px solid #B48350;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.18s ease, border-left-color 0.18s ease, opacity 0.25s ease, max-height 0.25s ease;
}
.mp-special-date-entry:hover {
    box-shadow: 0 3px 10px rgba(180, 131, 80, 0.12);
    border-left-color: #9a6e3a;
}
.mp-special-date-entry.mp-removing {
    opacity: 0;
    max-height: 0;
    padding: 0 14px;
    margin: 0;
    overflow: hidden;
}
.mp-special-date-val {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1B1F3D;
    white-space: nowrap;
    min-width: 100px;
}
.mp-special-date-val::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', FontAwesome;
    font-weight: 900;
    font-size: 11px;
    color: #B48350;
    flex-shrink: 0;
}
.mp-special-date-note {
    flex: 1;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(27, 31, 61, 0.55);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-special-date-entry .mp-rate-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(27, 31, 61, 0.30);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.16s ease, color 0.16s ease, transform 0.14s ease;
    margin-left: auto;
}
.mp-special-date-entry .mp-rate-delete:hover {
    background: rgba(231, 76, 60, 0.10);
    color: #e74c3c;
    transform: scale(1.08);
}
.mp-special-date-entry .mp-rate-delete:active {
    transform: scale(0.95);
}
.mp-special-date-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #ffffff;
    border: 1px dashed rgba(180, 131, 80, 0.30);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.mp-special-date-add:focus-within {
    border-color: rgba(180, 131, 80, 0.65);
    background: rgba(180, 131, 80, 0.02);
}
.mp-date-input,
.mp-note-input {
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1B1F3D;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    min-width: 0;
}
.mp-date-input:focus,
.mp-note-input:focus {
    border-color: #B48350;
    box-shadow: 0 0 0 3px rgba(180, 131, 80, 0.12);
    background: #ffffff;
}
.mp-date-input:hover:not(:focus),
.mp-note-input:hover:not(:focus) {
    border-color: rgba(0, 0, 0, 0.20);
}
.mp-date-input::placeholder,
.mp-note-input::placeholder {
    color: rgba(27, 31, 61, 0.35);
}
.mp-date-input {
    width: 150px;
    flex-shrink: 0;
    color-scheme: light;
    cursor: pointer;
}
.mp-note-input {
    flex: 1;
    min-width: 160px;
}
.mp-add-row-btn.mp-add-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    background: #B48350;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease;
    box-shadow: 0 2px 8px rgba(180, 131, 80, 0.25);
}
.mp-add-row-btn.mp-add-date-btn:hover {
    background: #9a6e3a;
    box-shadow: 0 4px 14px rgba(180, 131, 80, 0.35);
    transform: translateY(-1px);
}
.mp-add-row-btn.mp-add-date-btn:active {
    background: #8a6030;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(180, 131, 80, 0.20);
}
.mp-add-row-btn.mp-add-date-btn i {
    font-size: 11px;
}

/* ---------------------------------------------------------------
   21. PRIVACY / NOTIFICATION ROWS
--------------------------------------------------------------- */
.mp-privacy-list { }
.mp-privacy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-radius: 8px;
    margin: 0 -10px;
    transition: background 0.15s ease;
}
.mp-privacy-row:hover { background: rgba(180,131,80,0.035); }
.mp-privacy-row:last-child { border-bottom: none; }
.mp-privacy-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0,0,0,0.62);
}
.mp-privacy-label small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(0,0,0,0.30);
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   22. REVIEWS
--------------------------------------------------------------- */
.mp-review-stats {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(135deg, rgba(180,131,80,0.05) 0%, rgba(27,31,61,0.02) 100%);
    border-radius: 12px;
    border: 1px solid rgba(180,131,80,0.12);
    margin-bottom: 24px;
}
.mp-review-big-score {
    text-align: center;
    flex-shrink: 0;
    padding: 8px 24px 8px 8px;
    border-right: 1px solid rgba(0,0,0,0.06);
}
.mp-score-num {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    display: block;
    color: #1B1F3D;
    letter-spacing: -2px;
}
.mp-score-stars {
    color: #B48350;
    font-size: 14px;
    margin: 8px 0 4px;
    letter-spacing: 1px;
}
.mp-score-total { font-size: 12px; color: rgba(0,0,0,0.35); }
.mp-review-breakdown { flex: 1; }
.mp-breakdown-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mp-star-label { font-size: 12px; color: rgba(0,0,0,0.45); width: 48px; text-align: right; }
.mp-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.mp-bar-fill {
    height: 100%;
    background: #B48350;
    border-radius: 4px;
}
.mp-bar-count { font-size: 12px; color: rgba(0,0,0,0.30); width: 24px; }
.mp-review-card {
    padding: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    margin: 0 -4px;
    transition: background 0.18s ease;
}
.mp-review-card:hover {
    background: rgba(180,131,80,0.04);
}
.mp-review-card:last-child { border-bottom: none; }
.mp-review-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mp-reviewer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.mp-reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-reviewer-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mp-reviewer-name { font-size: 13.5px; font-weight: 600; color: #1B1F3D; }
.mp-reviewer-date { font-size: 11px; color: rgba(0,0,0,0.28); }
.mp-review-stars { color: #f5a623; font-size: 12px; }
.mp-review-text { font-size: 14px; color: rgba(0,0,0,0.55); line-height: 1.6; margin-bottom: 10px; }
.mp-review-actions { display: flex; gap: 10px; }
.mp-reply-btn,
.mp-report-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.08);
    background: transparent;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0,0,0,0.38);
    cursor: pointer;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    letter-spacing: 0.1px;
    transition: all 0.2s ease;
}
.mp-reply-btn:hover {
    border-color: rgba(180,131,80,0.55);
    color: #B48350;
    background: rgba(180,131,80,0.06);
    box-shadow: 0 0 0 3px rgba(180,131,80,0.08);
}
.mp-report-btn:hover {
    border-color: rgba(231,76,60,0.40);
    color: #e74c3c;
    background: rgba(231,76,60,0.05);
    box-shadow: 0 0 0 3px rgba(231,76,60,0.07);
}

/* ---------------------------------------------------------------
   VERIFICATION
--------------------------------------------------------------- */
.mp-verify-status-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-verify-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}
.mp-verify-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.mp-verify-done .mp-verify-icon { color: #16a34a; }
.mp-verify-pending .mp-verify-icon { color: #f5a623; }
.mp-verify-none .mp-verify-icon { color: rgba(0,0,0,0.20); }
.mp-verify-info { flex: 1; }
.mp-verify-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1B1F3D;
}
.mp-verify-sub {
    display: block;
    font-size: 11.5px;
    color: rgba(0,0,0,0.35);
}
.mp-verify-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
}
.mp-vb-done { background: rgba(22,163,74,0.08); color: #16a34a; }
.mp-vb-pending { background: rgba(245,166,35,0.10); color: #f5a623; }
.mp-vb-none { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.30); }

/* ---------------------------------------------------------------
   23. PROFILE STATUS (settings)
--------------------------------------------------------------- */
.mp-profile-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(
        135deg,
        rgba(39,174,96,0.07) 0%,
        rgba(39,174,96,0.03) 60%,
        rgba(27,31,61,0.02) 100%
    );
    border-radius: 14px;
    border: 1px solid rgba(39,174,96,0.15);
    margin-bottom: 20px;
    box-shadow: 0 2px 14px rgba(39,174,96,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
    position: relative;
    overflow: hidden;
}
.mp-profile-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, #27ae60 0%, #52d68a 50%, #27ae60 100%);
    border-radius: 14px 14px 0 0;
}
.mp-profile-status-text h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1B1F3D;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.mp-profile-status-text h3::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 0 3px rgba(39,174,96,0.22);
    flex-shrink: 0;
}
.mp-profile-status-text p  { font-size: 12px; color: rgba(0,0,0,0.40); margin: 0; }
.mp-danger-zone {
    margin-top: 24px;
    padding: 22px;
    border-radius: 14px;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(231,76,60,0.025) 0px,
            rgba(231,76,60,0.025) 4px,
            transparent 4px,
            transparent 22px
        ),
        linear-gradient(135deg, rgba(231,76,60,0.04) 0%, rgba(231,76,60,0.01) 100%);
    border: 1.5px solid rgba(231,76,60,0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 2px 12px rgba(231,76,60,0.07);
    position: relative;
    overflow: hidden;
}
.mp-danger-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, #e74c3c 0%, #ff7b6b 50%, #e74c3c 100%);
    border-radius: 14px 14px 0 0;
}
.mp-danger-zone h3 {
    font-size: 15px;
    font-weight: 700;
    color: #c0392b;
    margin: 0 0 6px;
    letter-spacing: -0.1px;
}
.mp-danger-zone h3 i { margin-right: 7px; }
.mp-danger-zone p    { font-size: 13px; color: rgba(0,0,0,0.42); margin: 0 0 14px; line-height: 1.55; }

/* Settings rows */
.mp-settings-list { }
.mp-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}
.mp-settings-list .mp-settings-row:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mp-settings-label {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: #1B1F3D;
}
.mp-settings-desc {
    display: block;
    font-size: 11.5px;
    color: rgba(0,0,0,0.35);
    margin-top: 1px;
}

/* ---------------------------------------------------------------
   24. RESPONSIVE
--------------------------------------------------------------- */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .mp-sidebar {
        transform: translateX(-100%);
        top: 0;
        z-index: 1000;
    }
    .mp-sidebar.open { transform: translateX(0); }
    .mp-sidebar-toggle { display: flex; }
    .mp-content { margin-left: 0; padding: 20px 20px 40px; }
    .mp-ov-hero { grid-template-columns: 1fr 1fr; }
    .mp-ov-stats-row { grid-template-columns: 1fr 1fr 1fr; }
    .mp-overview-grid  { grid-template-columns: 1fr; }
    .mp-photo-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    .mp-content { padding: 16px 12px 40px; }
    .mp-page-title h1 { font-size: 22px; }
    .mp-ov-hero { gap: 10px; }
    .mp-ov-hero-num { font-size: 26px; }
    .mp-ov-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mp-ov-stat-sm { padding: 10px 12px; }
    .mp-photo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .mp-form-row { grid-template-columns: 1fr; }
    .mp-pricing-row,
    .mp-rate-row { grid-template-columns: 1fr 1fr auto; }
    .mp-rates-header { display: none; }
    .mp-card-body { padding: 18px; }
    .mp-card-header { padding: 14px 18px; }
    .mp-review-stats { flex-direction: column; gap: 16px; }
    .mp-schedule-row { flex-wrap: wrap; }
    .mp-privacy-card { padding: 14px 14px; margin-top: 18px; margin-bottom: 16px; }
    .mp-privacy-desc { padding-left: 0; }
    .mp-input-icon-wrap .mp-input { padding-left: 34px; }
    .mp-input-icon { left: 11px; font-size: 12px; }
    .mp-chart-inline-stats { flex-direction: column; }
    .mp-chart-stat {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        padding: 10px 0;
    }
    .mp-chart-stat:last-child { border-bottom: none; }
    .mp-sidebar-toggle { top: 62px; }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    .mp-ov-hero { grid-template-columns: 1fr; }
    .mp-ov-stats-row { grid-template-columns: 1fr 1fr; }
    .mp-photo-grid { gap: 8px; }
    .mp-special-date-row { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   CONTACT SECTION — icon inputs, privacy card upgrades
--------------------------------------------------------------- */

/* Input with left icon */
.mp-input-icon-wrap {
    position: relative;
}
.mp-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: rgba(0,0,0,0.28);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}
.mp-input-icon-wrap .mp-input {
    padding-left: 36px;
}
.mp-input-icon-wrap:focus-within .mp-input-icon {
    color: #B48350;
}
.mp-input-icon-wrap .mp-input:focus {
    border-color: #B48350;
    box-shadow: 0 0 0 3px rgba(180,131,80,0.10);
}

/* Privacy card */
.mp-privacy-card {
    background: rgba(0,0,0,0.025);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 24px;
    margin-bottom: 22px;
}
.mp-privacy-card .mp-subsection-title {
    margin-bottom: 10px;
}
.mp-privacy-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mp-privacy-icon {
    margin-right: 7px;
    font-size: 12px;
    color: #B48350;
    opacity: 0.75;
}
.mp-privacy-icon--online {
    color: #27ae60;
    font-size: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.mp-privacy-desc {
    font-size: 11px;
    color: rgba(0,0,0,0.32);
    line-height: 1.4;
    padding-left: 19px;
}


/* =============================================================
   25. PERSONAL INFO FORM — PREMIUM OVERRIDES
   Scoped under .mp-content to avoid touching other modal usage.
   Targets legacy .modal-input / .modal-submit HTML classes used
   in the Personal Info panel, plus profile-specific classes:
   .mp-form-group-title, .mp-input-suffix-wrap, .mp-input-suffix,
   .mp-field-hint, .mp-form-save.
   Design tokens: gold #B48350 · navy #1B1F3D · HelveticaNowDisplay
   ============================================================= */

/* ---- CSS custom properties scoped to the content area ---- */
.mp-content {
    --gold:        #B48350;
    --gold-light:  #C8995F;
    --gold-dim:    rgba(180, 131, 80, 0.18);
    --gold-glow:   0 0 0 3px rgba(180, 131, 80, 0.14),
                   0 2px 10px rgba(180, 131, 80, 0.10);
    --navy:        #1B1F3D;
    --border-idle: rgba(0, 0, 0, 0.13);
    --radius-fld:  12px;
    --ease:        0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------
   25a. Form group titles — gold-bordered section dividers
   ---------------------------------------------------------------- */
.mp-content .mp-form-group-title {
    position: relative;
    display: block;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.65px;
    text-transform: uppercase;
    color: var(--navy);
    padding: 18px 14px 14px 16px;
    margin-bottom: 6px;
    border-left: 3px solid var(--gold);
    background: linear-gradient(
        90deg,
        rgba(180, 131, 80, 0.05) 0%,
        transparent 65%
    );
    border-radius: 0 6px 6px 0;
}
.mp-content .mp-form-group-title::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(180, 131, 80, 0.24) 0%,
        transparent 72%
    );
}

/* ----------------------------------------------------------------
   25b. Input & textarea base overrides
   ---------------------------------------------------------------- */
.mp-content .modal-input input,
.mp-content .modal-input select,
.mp-content .modal-input textarea {
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    border-radius: var(--radius-fld);
    border: 1.5px solid var(--border-idle);
    background: #fdfdfd;
    color: rgba(0, 0, 0, 0.75);
    transition:
        border-color var(--ease),
        box-shadow   var(--ease),
        background   var(--ease);
    outline: none;
}

.mp-content .modal-input input::placeholder,
.mp-content .modal-input textarea::placeholder {
    color: rgba(0, 0, 0, 0.28);
    font-style: italic;
}

/* ---- Focus: signature gold glow ring ---- */
.mp-content .modal-input input:focus,
.mp-content .modal-input select:focus,
.mp-content .modal-input textarea:focus {
    border-color: var(--gold);
    box-shadow: var(--gold-glow);
    background: #ffffff;
}

/* ----------------------------------------------------------------
   25c. Select — custom gold chevron
   ---------------------------------------------------------------- */
.mp-content .modal-input select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23B48350' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ----------------------------------------------------------------
   25d. Textarea — inner shadow + resize hint
   ---------------------------------------------------------------- */
.mp-content .modal-input textarea {
    padding: 16px 20px;
    line-height: 1.65;
    resize: vertical;
    min-height: 110px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}
.mp-content .modal-input textarea:focus {
    box-shadow:
        var(--gold-glow),
        inset 0 2px 6px rgba(0, 0, 0, 0.02);
}
.mp-content .modal-input textarea::-webkit-resizer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M9 1L1 9M9 5L5 9' stroke='%23B48350' stroke-width='1.3' opacity='0.55'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* ----------------------------------------------------------------
   25e. Input suffix wrap — cm / kg badge
   ---------------------------------------------------------------- */
.mp-content .mp-input-suffix-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.mp-content .mp-input-suffix {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 2px);
    min-width: 44px;
    padding: 0 11px;
    background: linear-gradient(
        135deg,
        rgba(180, 131, 80, 0.11),
        rgba(180, 131, 80, 0.07)
    );
    border-left: 1px solid rgba(180, 131, 80, 0.22);
    border-radius: 0 var(--radius-fld) var(--radius-fld) 0;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--gold);
    pointer-events: none;
    white-space: nowrap;
    transition: background var(--ease);
}

/* Also covers the ::after pseudo-suffix pattern */
.mp-content .mp-input-suffix-wrap::after {
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold);
    right: 14px;
}

/* Right padding for inputs inside a suffix wrap */
.mp-content .mp-input-suffix-wrap .modal-input input,
.mp-content .mp-input-suffix-wrap .mp-input {
    padding-right: 54px;
}

/* ----------------------------------------------------------------
   25f. Field hints — refined italic caption
   ---------------------------------------------------------------- */
.mp-content .mp-field-hint {
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.32);
    letter-spacing: 0.1px;
    line-height: 1.5;
    margin-top: 5px;
    padding-left: 2px;
}

/* ----------------------------------------------------------------
   25g. Save buttons — premium gradient + hover lift
   ---------------------------------------------------------------- */
.mp-content .modal-submit button,
.mp-content .mp-form-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-fld);
    padding: 16px 52px;
    margin-top: 28px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #C8995F  0%,
        #B48350 46%,
        #9A6F40 100%
    );
    box-shadow:
        0 4px 16px rgba(180, 131, 80, 0.32),
        0 1px 4px  rgba(180, 131, 80, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition:
        transform     var(--ease),
        box-shadow    var(--ease),
        background    var(--ease);
}

/* Shimmer sheen overlay */
.mp-content .modal-submit button::before,
.mp-content .mp-form-save::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        108deg,
        transparent 30%,
        rgba(255, 255, 255, 0.09) 50%,
        transparent 70%
    );
    pointer-events: none;
}

/* Hover: lift + expanded shadow */
.mp-content .modal-submit button:hover,
.mp-content .mp-form-save:hover {
    transform: translateY(-2px);
    background: linear-gradient(
        135deg,
        #D4A76A  0%,
        #C0904E 46%,
        #A87640 100%
    );
    box-shadow:
        0 8px 24px rgba(180, 131, 80, 0.40),
        0 3px 8px  rgba(180, 131, 80, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Active: press-down */
.mp-content .modal-submit button:active,
.mp-content .mp-form-save:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px  rgba(180, 131, 80, 0.24),
        inset 0 2px 4px rgba(0, 0, 0, 0.10);
}

/* Keyboard focus ring */
.mp-content .modal-submit button:focus-visible,
.mp-content .mp-form-save:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ----------------------------------------------------------------
   25h. Field label h4 inside .modal-input
   ---------------------------------------------------------------- */
.mp-content .modal-input h4 {
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 7px;
}
.mp-content .modal-input h4 span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 0.34);
    font-size: 12px;
}

/* ----------------------------------------------------------------
   25i. modal-input-flex — responsive single-column collapse
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .mp-content .modal-input-flex {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   26. CALENDAR PREVIEW (mp- prefix, Availability panel)
   Design tokens: gold #B48350 · navy #1B1F3D
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   26b. BOOKING LIST
--------------------------------------------------------------- */
.mp-badge-count {
    background: rgba(180,131,80,0.10) !important;
    color: #B48350 !important;
}
.mp-booking-list { }
.mp-booking-item {
    padding: 12px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.mp-booking-item:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.mp-booking-item:hover { background: rgba(180,131,80,0.03); }
.mp-booking-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-booking-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.mp-booking-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-booking-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1B1F3D;
    flex-shrink: 0;
    margin-right: 4px;
}
.mp-booking-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.mp-booking-tag {
    font-size: 11.5px;
    color: rgba(0,0,0,0.45);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.mp-booking-tag i {
    font-size: 9px;
    color: rgba(180,131,80,0.55);
}
.mp-booking-tag + .mp-booking-tag::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    margin-right: 2px;
}
.mp-tag-type {
    font-weight: 600;
    color: #B48350;
}
.mp-tag-type::before { display: none !important; }
.mp-booking-note {
    font-size: 11.5px;
    color: rgba(0,0,0,0.32);
    font-style: italic;
    padding-left: 42px;
    margin-top: 4px;
}
.mp-booking-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-self: center;
}
.mp-booking-chat,
.mp-booking-accept,
.mp-booking-decline {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
}
.mp-booking-chat {
    background: rgba(59,130,246,0.10);
    color: #3b82f6;
}
.mp-booking-chat:hover {
    background: #3b82f6;
    color: #fff;
    transform: scale(1.08);
}
.mp-booking-accept {
    background: rgba(22,163,74,0.10);
    color: #16a34a;
}
.mp-booking-accept:hover {
    background: #16a34a;
    color: #fff;
    transform: scale(1.08);
}
.mp-booking-decline {
    background: rgba(231,76,60,0.08);
    color: #e74c3c;
}
.mp-booking-decline:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.08);
}
.mp-booking-status {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mp-status-completed {
    background: rgba(22,163,74,0.08);
    color: #16a34a;
}
.mp-status-declined {
    background: rgba(231,76,60,0.08);
    color: #e74c3c;
}
.mp-status-confirmed {
    background: rgba(59,130,246,0.08);
    color: #3b82f6;
}

.mp-cal-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.mp-cal-left {
    flex: 0 0 380px;
    min-width: 0;
}
.mp-cal-right {
    flex: 1;
    min-width: 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}
.mp-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mp-cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    color: rgba(0,0,0,0.40);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mp-cal-nav-btn:hover {
    background: rgba(180,131,80,0.07);
    color: #B48350;
    border-color: rgba(180,131,80,0.25);
}
.mp-cal-month-label {
    font-size: 16px;
    font-weight: 700;
    color: #1B1F3D;
}
.mp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.mp-cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0,0,0,0.30);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 8px;
}
.mp-cal-day {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    background: transparent;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1B1F3D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    position: relative;
}
.mp-cal-day:hover {
    transform: scale(1.08);
}
/* Available day — gold fill like profile.html */
.mp-cal-day:not(.mp-cal-off):not(.mp-cal-today):not(.mp-cal-past):not(.mp-cal-empty) {
    background: rgba(180,131,80,0.12);
    border-color: rgba(180,131,80,0.20);
    color: #B48350;
    font-weight: 600;
}
.mp-cal-day:not(.mp-cal-off):not(.mp-cal-today):not(.mp-cal-empty):hover {
    background: rgba(180,131,80,0.22);
    border-color: #B48350;
}
/* Closed / off day */
.mp-cal-day.mp-cal-off {
    background: rgba(0,0,0,0.025);
    color: rgba(0,0,0,0.20);
    cursor: pointer;
}
.mp-cal-day.mp-cal-off:hover {
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.35);
}
/* Past dates */
.mp-cal-day.mp-cal-past {
    opacity: 0.40;
    cursor: pointer;
}
/* Today */
.mp-cal-day.mp-cal-today {
    background: #1B1F3D;
    color: #fff;
    font-weight: 700;
    border-color: #1B1F3D;
}
.mp-cal-day.mp-cal-today:hover {
    background: #2a3158;
    border-color: #2a3158;
}
/* Selected */
.mp-cal-day.mp-cal-selected {
    border-color: #B48350;
    box-shadow: 0 0 0 1px #B48350;
    transform: scale(1.06);
}
.mp-cal-day.mp-cal-today.mp-cal-selected {
    border-color: #B48350;
    box-shadow: 0 0 0 1px #B48350;
}
/* Empty spacer cell */
.mp-cal-day.mp-cal-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}
/* Detail panel (right side) */
.mp-cal-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: rgba(0,0,0,0.18);
    font-size: 13px;
    gap: 6px;
    text-align: center;
    padding: 20px;
}
.mp-cal-detail-empty i {
    font-size: 28px;
    color: rgba(180,131,80,0.22);
    margin-bottom: 4px;
}
.mp-cal-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.30);
}
.mp-cal-empty-desc {
    font-size: 12px;
    color: rgba(0,0,0,0.22);
    line-height: 1.5;
    max-width: 280px;
}
.mp-cal-empty-desc strong {
    color: rgba(0,0,0,0.35);
}
.mp-cal-detail-title {
    font-size: 12px;
    font-weight: 700;
    color: #1B1F3D;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-cal-slots-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.mp-cal-slots-list {
    flex-wrap: wrap;
    flex-direction: row;
}
.mp-cal-slot-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(180,131,80,0.08);
    border: 1px solid rgba(180,131,80,0.18);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #B48350;
}
.mp-cal-slot-item .mp-cal-slot-time {
    flex: 1;
}
.mp-cal-slot-item .mp-cal-slot-remove {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(0,0,0,0.22);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.mp-cal-slot-item .mp-cal-slot-remove:hover {
    background: rgba(231,76,60,0.10);
    color: #e74c3c;
}
.mp-cal-slots-empty {
    color: rgba(0,0,0,0.25);
    font-size: 12px;
    font-style: italic;
    padding: 12px 0;
}
.mp-cal-add-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mp-cal-add-slot input[type="time"] {
    padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 7px;
    font-size: 13px;
    font-family: 'HelveticaNowDisplay', Helvetica, Arial, sans-serif;
    color: #1B1F3D;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease;
    width: 90px;
}
.mp-cal-add-slot input[type="time"]:focus {
    border-color: #B48350;
}
.mp-cal-add-slot .mp-cal-range-sep {
    color: rgba(0,0,0,0.20);
    font-size: 11px;
}
.mp-cal-add-btn {
    padding: 6px 12px;
    border-radius: 7px;
    border: none;
    background: #B48350;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.mp-cal-add-btn:hover {
    background: #a3743f;
}
.mp-cal-add-btn.mp-cal-bulk-inline {
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.50);
}
.mp-cal-add-btn.mp-cal-bulk-inline:hover {
    background: rgba(180,131,80,0.12);
    color: #B48350;
}

@media (max-width: 900px) {
    .mp-cal-layout { flex-direction: column; }
    .mp-cal-left { flex: none; width: 100%; max-width: 420px; }
}
@media (max-width: 600px) {
    .mp-cal-day { font-size: 12px; border-radius: 9px; }
    .mp-cal-weekday { font-size: 10px; }
    .mp-cal-left { max-width: 100%; }
}