/* ========= THEME TOKENS ========= */
:root[data-eeap-theme="light"] {
--eeap-bg: #f6f8fb;
--eeap-card: #ffffff;
--eeap-text: #3b82f6;
--eeap-sub: #0b1220;
--eeap-accent: #3b82f6; /* EquitEdge cool blue vibe */
--eeap-accent-2: #3b82f6; /* secondary accent */
--eeap-border: rgba(16, 24, 40, 0.08);
--eeap-pill-done: #10b981;
--eeap-shadow: 0 30px 80px rgba(16, 24, 40, 0.12);
--eeap-header-bg: rgba(255, 255, 255, 0.75);
--eeap-header-text: #0b1220;
}
:root[data-eeap-theme="dark"] {
--eeap-bg: #0b0f17;
--eeap-card: #0f1522;
--eeap-text: #e5e9f0;
--eeap-sub: #9aa3b2;
--eeap-accent: #60a5fa;
--eeap-accent-2: #8b5cf6;
--eeap-border: rgba(148, 163, 184, 0.18);
--eeap-pill-done: #34d399;
--eeap-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
--eeap-header-bg: rgba(10, 12, 16, 0.82); /* keep nav visible */
--eeap-header-text: #e5e9f0;
}
/* Force typical headers/navbars to stay visible on dark */
.eeap-dark-header header,
.eeap-dark-header .navbar,
.eeap-dark-header .ltn__header-area,
.eeap-dark-header .site-header {
background: var(--eeap-header-bg) !important;
color: var(--eeap-header-text) !important;
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}
/* ========= PAGE LAYOUT ========= */
.eeap-page {
position: relative;
/* background: var(--eeap-bg); <-- remove this line */
background: transparent; /* let the bg image show through */
min-height: 100vh;
padding-top: 96px; /* avoid nav overlap */
}
.eeap-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 18px;
}
.eeap-title h1 {
margin: 0 0 6px 0;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--eeap-text);
}
.eeap-gradient-text {
background: linear-gradient(90deg, var(--eeap-accent), var(--eeap-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: black;
}
.eeap-sub {
margin: 0;
color: var(--eeap-sub);
font-size: 14px;
}
.eeap-header-rt {
display: flex;
align-items: center;
gap: 16px;
}
.eeap-theme-toggle {
border: 1px solid var(--eeap-border);
background: var(--eeap-card);
color: var(--eeap-text);
border-radius: 999px;
padding: 8px 12px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.eeap-id {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px 10px 12px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0)
);
border: 1px solid var(--eeap-border);
border-radius: 14px;
color: var(--eeap-text);
}
.eeap-id-text {
opacity: 0.7;
font-size: 12px;
}
.eeap-id-value {
font-weight: 700;
}
/* Background layer */
.eeap-sky {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* ========= PILLS ========= */
.eeap-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
/* margin: 6px 0 18px 0; */
padding-bottom: 1%;
}
.eeap-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid var(--eeap-border);
background: var(--eeap-card);
color: var(--eeap-sub);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.eeap-pill:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
color: var(--eeap-text);
}
.eeap-pill.is-current {
border-color: var(--eeap-accent);
color: var(--eeap-text);
}
.eeap-pill.is-done .eeap-pill-dot {
background: var(--eeap-pill-done);
}
.eeap-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
}
.eeap-pill-text {
font-size: 13px;
color: #e0e2e4;
}
/* ========= PANELS + SHIMMER ========= */
.eeap-flow {
position: relative;
padding-left: 10px;
}
.eeap-panel-head h4 {
margin: 0;
color: var(--eeap-text);
}
.eeap-panel-head small {
color: var(--eeap-sub);
}
/* Subtle shimmer overlay on the card */
.eeap-shimmer::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 20%,
rgba(255, 255, 255, 0.12) 40%,
rgba(255, 255, 255, 0.06) 60%,
transparent 80%
);
transform: translateX(-120%);
animation: eeapShine 1.8s linear infinite;
pointer-events: none;
mix-blend-mode: soft-light;
}
@keyframes eeapShine {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
/* Grid */
.eeap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 14px;
}
/* Compact form grid for single screen view */
.eeap-grid-compact {
gap: 12px;
margin-top: 0;
margin-bottom: 10px;
}
.eeappr-compact-form {
padding: 16px;
}
.eeappr-compact-form .eeap-grid-compact:last-child {
margin-bottom: 0;
}
/* Compact textarea */
.eeappr-textarea-group-compact {
margin-top: 0;
}
.eeappr-textarea-compact {
min-height: 60px;
font-size: 14px;
padding: 8px 12px;
}
/* Compact document grids */
.eeappr-compact-form .eeappr-docs-grid2,
.eeappr-compact-form .eeappr-docs-grid3,
.eeappr-docs-compact {
margin-top: 10px;
gap: 8px;
}
/* FINAL OVERRIDES FOR ADD/EDIT PROPERTY READABILITY */
.eev2-root .dropzone .dz-message,
.eev2-root .dropzone .dz-message span,
.eev2-root .dropzone .dz-message-text,
.eev2-root .dropzone .dz-message-text span,
.eev3-root .dropzone .dz-message,
.eev3-root .dropzone .dz-message span,
.eev3-root .dropzone .dz-message-text,
.eev3-root .dropzone .dz-message-text span {
color: #000000 !important;
}
.eeappr-docs-drop .eeap-label,
.eeappr-docs-drop .eeap-label span {
color: #000000 !important;
font-weight: 600 !important;
}
.eeappr-docs-drop .eeap-help {
color: #000000 !important;
font-weight: 200 !important;
}
.dark .eev2-root .eeap-footerbar,
.eev2-root[data-theme="light"] .eeap-footerbar {
background: #ffffff !important;
}
/* === FINAL FIXES APPENDED AT FILE END TO WIN CASCADE === */
.eev2-root .eeap-footerbar,
.eev3-root .eeap-footerbar {
background: #ffffff !important;
border-top: 1px solid #000000 !important;
}
.eev2-root .eeap-footer-inner,
.eev3-root .eeap-footer-inner {
color: #000000 !important;
}
.eev2-root .dropzone .dz-message,
.eev2-root .dropzone .dz-message span,
.eev2-root .dropzone .dz-message-text,
.eev2-root .dropzone .dz-message-text span,
.eev3-root .dropzone .dz-message,
.eev3-root .dropzone .dz-message span,
.eev3-root .dropzone .dz-message-text,
.eev3-root .dropzone .dz-message-text span {
color: #000000 !important;
font-weight: 700 !important;
}
/* Optional new class names to opt-in explicitly, no clashes */
.eefix-step-bold {
font-weight: 700 !important;
color: #0b1220 !important;
}
.eefix-footer-light {
background: #ffffff !important;
color: #000 !important;
}
/* Stepper label in react-stepper-js (CSS module class _2ZdKn) */
.eefix-stepper ._2ZdKn {
font-weight: 700 !important;
color: #0b1220 !important;
font-size: 13px !important;
}
[data-eeap-theme="light"] .eqx-contact-left,
[data-eeap-theme="dark"] .eqx-contact-left {
padding-left: clamp(16px, 2.4vw, 28px) !important;
}
[data-eeap-theme="light"] .eeap-footerbar,
[data-eeap-theme="dark"] .eeap-footerbar,
.eev2-root .eeap-footerbar,
.eev3-root .eeap-footerbar {
border-top: none !important;
background: transparent !important;
box-shadow: none !important;
}
[data-eeap-theme="light"] .eeap-footer-inner,
[data-eeap-theme="dark"] .eeap-footer-inner,
.eev2-root .eeap-footer-inner,
.eev3-root .eeap-footer-inner {
border: none !important;
border-radius: 22px !important;
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12) !important;
padding: 12px 18px !important;
}
.eeappr-compact-form .eeappr-docs-cell,
.eeappr-docs-compact .eeappr-docs-cell {
padding: 8px;
}
.eeappr-compact-form .eeappr-docs-thumb,
.eeappr-docs-compact .eeappr-docs-thumb {
width: 50px;
height: 50px;
font-size: 18px;
}
.eeappr-compact-form .eeappr-docs-rowtitle,
.eeappr-docs-compact .eeappr-docs-rowtitle {
font-size: 12px;
margin-bottom: 6px;
}
.eeappr-compact-form .eeappr-docs-meta,
.eeappr-docs-compact .eeappr-docs-meta {
font-size: 11px;
padding: 4px 0;
}
.eeappr-compact-form .eeappr-docs-meta-sub,
.eeappr-docs-compact .eeappr-docs-meta-sub {
font-size: 10px;
}
.eeappr-compact-form .eeappr-docs-drop,
.eeappr-docs-compact .eeappr-docs-drop {
padding: 8px;
gap: 8px;
}
/* Reduce header height for compact form */
.eeappr-header {
margin-bottom: 16px;
padding-bottom: 12px;
}
.eeappr-title {
font-size: 22px;
margin-bottom: 4px;
}
.eeappr-sub {
font-size: 13px;
}
/* Reduce panel padding further */
.eeappr-compact-form {
padding: 14px;
}
/* Make form fields more compact */
.eeappr-compact-form .form-label {
font-size: 13px;
margin-bottom: 4px;
}
.eeappr-compact-form .form-control {
padding: 8px 12px;
font-size: 14px;
min-height: 38px;
}
.eeap-col {
grid-column: span 2;
}
.eeap-col-lg {
grid-column: span 2;
}
.eeap-col-sm {
grid-column: span 1;
min-width: 220px;
}
.eeap-col-auto {
grid-column: span 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
@media (min-width: 992px) {
.eeap-col {
grid-column: span 2;
}
.eeap-col-lg {
grid-column: span 2;
}
.eeap-col-sm {
grid-column: span 1;
}
.eeap-col-auto {
grid-column: span 2;
}
}
/* Panel actions */
.eeap-panel-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 16px;
padding-left: 10px;
}
.eeap-panel-actions.spread {
justify-content: space-between;
}
/* Buttons */
.eeap-btn {
background: linear-gradient(90deg, var(--eeap-accent), var(--eeap-accent-2));
color: #fff;
border: 0;
border-radius: 16px;
padding: 10px 16px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.eeap-btn.ghost {
background: transparent;
color: var(--eeap-text);
border: 1px solid var(--eeap-border);
border-radius: 16px;
}
.eeap-icon-btn {
border: 1px solid var(--eeap-border);
background: var(--eeap-card);
color: var(--eeap-text);
border-radius: 10px;
padding: 8px 10px;
cursor: pointer;
}
.eeap-icon-btn.danger {
border-color: rgba(239, 68, 68, 0.35);
color: #ef4444;
}
/* Live preview chip */
.eeap-preview {
margin-top: 6px;
border: 1px dashed var(--eeap-border);
padding: 10px 12px;
border-radius: 12px;
display: inline-flex;
gap: 8px;
align-items: center;
color: var(--eeap-text);
}
.eeap-preview-label {
opacity: 0.7;
font-size: 12px;
}
.eeap-preview-text {
font-weight: 600;
}
/* Decorative orb */
.eeap-orb-xl {
width: 34px;
height: 34px;
border-radius: 999px;
background: radial-gradient(
circle at 30% 30%,
var(--eeap-accent),
transparent 60%
),
radial-gradient(circle at 70% 70%, var(--eeap-accent-2), transparent 60%),
rgba(255, 255, 255, 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
position: relative;
overflow: hidden;
}
.eeap-shine {
position: absolute;
inset: auto;
width: 80%;
height: 2px;
top: 8px;
left: 10%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.7),
transparent
);
transform: translateX(-120%);
animation: orbShine 2.8s ease-in-out infinite;
}
@keyframes orbShine {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
/* ========= SLIDING PANES ========= */
.eeap-pane {
position: relative;
will-change: transform, opacity;
transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 0.28s ease;
}
.eeap-pane--show {
transform: translateX(calc((var(--eeap-slide-dir, 1) * 0%)));
opacity: 1;
}
.eeap-pane--hide {
transform: translateX(calc((var(--eeap-slide-dir, 1) * -6%)));
opacity: 0;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
/* Links */
.apx-link {
color: var(--eeap-accent);
text-decoration: underline;
}
/* to increase background white colour */
.eeap-sky-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(108%) saturate(115%) contrast(102%);
opacity: 0.6; /* increase visibility of background */
}
.eeap-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(
rgba(255, 255, 255, 0.04) 1px,
transparent 1px
);
background-size: 3px 3px;
opacity: 0.08; /* very subtle noise only */
}
:root[data-eeap-theme="light"] {
--eeap-card-alpha: rgba(
255,
255,
255,
0.95
); /* more opaque for better readability */
}
:root[data-eeap-theme="dark"] {
--eeap-card-alpha: rgba(
15,
21,
34,
0.92
); /* more opaque for better readability */
}
.eeap-panel {
background: var(--eeap-card-alpha);
border: 1px solid var(--eeap-border);
border-radius: 18px;
padding: 18px;
box-shadow: var(--eeap-shadow);
overflow: hidden;
backdrop-filter: blur(8px); /* slightly more blur */
-webkit-backdrop-filter: blur(8px);
}
:root[data-eeap-theme="dark"] .eeap-panel input,
:root[data-eeap-theme="dark"] .eeap-panel select,
:root[data-eeap-theme="dark"] .eeap-panel textarea {
background: rgba(255, 255, 255, 0.08);
color: #f0f4f9;
border-color: rgba(255, 255, 255, 0.22);
}
.eepropv3-preview .eeap-panel {
padding-top: 16px;
}
:root[data-eeap-theme="dark"] .eeap-panel ::placeholder {
color: rgba(200, 210, 240, 0.7);
}
/* Step pills contrast in dark */
:root[data-eeap-theme="dark"] .eeap-pill {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: var(--eeap-text);
}
.eeap-footerbar {
position: sticky;
bottom: 0;
z-index: 50;
padding: 10px 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent 40%);
margin-top: 18px;
}
:root[data-eeap-theme="light"] .eeap-footerbar {
background: linear-gradient(to top, rgba(17, 1, 1, 0.6), transparent 40%);
}
.eeap-footerbar {
position: sticky; /* or fixed if you prefer */
bottom: 0;
z-index: 40;
background: #0a0f1a; /* or your brand surface */
border-top: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
}
.eeap-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 12px 16px;
color: #222 !important;
}
.eeap-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--eeap-card-alpha);
border: 1px solid var(--eeap-border);
border-radius: 14px;
padding: 10px 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #222 !important;
}
.eeap-footer-step {
display: flex;
align-items: center;
gap: 8px;
color: var(--eeap-text);
}
.eeap-step-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--eeap-accent);
color: #222 !important;
}
/* 3D Rotating Hero Orb */
.eeap-hero-orb {
position: relative;
width: 80px;
height: 80px;
margin-left: 10px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: radial-gradient(
circle at 25% 25%,
var(--eeap-accent),
transparent 65%
),
radial-gradient(circle at 75% 75%, var(--eeap-accent-2), transparent 65%),
rgba(255, 255, 255, 0.06);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
0 0 40px rgba(139, 92, 246, 0.25);
overflow: hidden;
transform-style: preserve-3d;
perspective: 800px;
animation: eeapOrbRotate3D 18s linear infinite;
}
.eeap-hero-orb::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(
circle at 50% 30%,
rgba(255, 255, 255, 0.15),
transparent 70%
);
animation: eeapGlowPulse 3.5s ease-in-out infinite alternate;
}
.eeap-hero-orb i {
font-size: 32px;
color: #fff;
opacity: 0.92;
transform: translateZ(25px);
animation: eeapIconRotate 24s linear infinite;
}
@keyframes eeapOrbRotate3D {
0% {
transform: rotateX(0deg) rotateY(0deg) scale(1);
}
50% {
transform: rotateX(15deg) rotateY(180deg) scale(1.03);
}
100% {
transform: rotateX(0deg) rotateY(360deg) scale(1);
}
}
@keyframes eeapIconRotate {
0% {
transform: translateZ(25px) rotateY(0deg) rotateX(0deg);
}
100% {
transform: translateZ(25px) rotateY(360deg) rotateX(360deg);
}
}
@keyframes eeapGlowPulse {
0% {
opacity: 0.5;
filter: brightness(1);
}
100% {
opacity: 1;
filter: brightness(1.3);
}
}
.eeap-panel-head h4 {
margin: 0 0 4px 0;
}
.eeap-panel-head small {
display: block;
margin-bottom: 6px;
}
/* Optional: smaller help line under panel titles */
.eeap-help {
display: block;
margin-top: 2px;
color: var(--eeap-sub);
}
/* Address compact card look, matching your glass panels */
.addr-compact.card {
background: var(--eeap-card-alpha);
border: 1px solid var(--eeap-border);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Make the bootstrap .card padding play nice on dark mode */
:root[data-eeap-theme="dark"] .addr-compact.card {
background: rgba(15, 21, 34, 0.55);
}
.eeap-checkbox {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 14px;
color: var(--eeap-text);
user-select: none;
}
.eeap-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.eeap-checkmark {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background: transparent;
border: 1.6px solid var(--eeap-border);
border-radius: 4px;
transition: all 0.2s ease;
}
.eeap-checkbox input:checked ~ .eeap-checkmark {
background: var(--eeap-accent);
border-color: var(--eeap-accent);
}
.eeap-checkbox i {
font-size: 13px;
color: var(--eeap-accent);
}
/* Stepper polish inside eeap-panel */
.eeap-panel .react-stepper-js {
--stepper-primary: var(--eeap-accent);
--stepper-muted: var(--eeap-border);
padding: 8px 6px;
}
.eeap-panel .react-stepper-js .step {
transform: translateZ(0);
}
.eeap-panel .react-stepper-js .step .label {
color: var(--eeap-sub);
}
.eeap-panel .react-stepper-js .step.active .label {
color: var(--eeap-text);
font-weight: 700;
}
/* Document & features checkboxes */
.eeap-checkbox {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--eeap-border);
background: var(--eeap-card);
color: var(--eeap-text);
border-radius: 12px;
cursor: pointer;
user-select: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.eeap-checkbox:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.eeap-checkbox input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.eeap-checkmark {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid var(--eeap-border);
display: inline-block;
position: relative;
}
.eeap-checkbox input:checked + .eeap-checkmark {
background: linear-gradient(90deg, var(--eeap-accent), var(--eeap-accent-2));
border-color: transparent;
}
/* --- Floating/rotating orb icon --- */
.eeap-hero-orb {
width: 64px;
height: 64px;
border-radius: 999px;
background: radial-gradient(
circle at 30% 30%,
var(--eeap-accent),
transparent 60%
),
radial-gradient(circle at 70% 70%, var(--eeap-accent-2), transparent 60%),
rgba(255, 255, 255, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
border: 1px solid var(--eeap-border);
overflow: hidden;
}
.eeap-hero-orb i {
font-size: 22px;
color: #fff;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.eeap-float-spin {
animation: eeapFloat 4.6s ease-in-out infinite, eeapSpin 18s linear infinite;
transform-style: preserve-3d; /* subtle 3D spin */
}
@keyframes eeapFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes eeapSpin {
0% {
transform: rotateZ(0deg) rotateX(0deg);
}
50% {
transform: rotateZ(180deg) rotateX(6deg);
}
100% {
transform: rotateZ(360deg) rotateX(0deg);
}
}
/* Soft corner shines on the orb */
.eeap-hero-orb .eeap-shine {
position: absolute;
top: 8px;
left: 10%;
width: 80%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.75),
transparent
);
animation: orbShine 3s ease-in-out infinite;
}
@keyframes orbShine {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
/* --- Background glows (non-intrusive, keeps your bg visible) --- */
.eeap-glow {
position: fixed;
width: 320px;
height: 320px;
border-radius: 50%;
filter: blur(72px);
opacity: 0.25;
pointer-events: none;
z-index: -1;
}
.eeap-glow--tl {
top: 10%;
left: -80px;
background: radial-gradient(closest-side, var(--eeap-accent), transparent);
}
.eeap-glow--br {
bottom: 8%;
right: -80px;
background: radial-gradient(closest-side, var(--eeap-accent-2), transparent);
}
/* --- Footerbar polish (you likely already have; repeat-safe) --- */
.eeap-footerbar {
position: sticky;
bottom: 0;
inset-inline: 0;
background: color-mix(in oklab, var(--eeap-card), transparent 20%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--eeap-border);
padding: 10px 0;
z-index: 15;
}
.eeap-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
color: #222 !important;
}
.eeap-footer-step {
display: inline-flex;
gap: 10px;
align-items: center;
color: var(--eeap-text);
}
.eeap-step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--eeap-accent);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--eeap-accent), transparent 70%);
color: #222 !important;
}
/* Buttons (repeat-safe; same as your eeap-btn styles) */
.eeap-btn {
background: linear-gradient(90deg, var(--eeap-accent), var(--eeap-accent-2));
color: #fff;
border: 0;
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.eeap-btn.ghost {
background: transparent;
color: var(--eeap-text);
border: 1px solid var(--eeap-border);
}
/* Optional: tone down shimmer if needed (repeat-safe) */
.eeap-shimmer::before {
mix-blend-mode: soft-light;
opacity: 0.6;
}
/* Page layout: keep your tower bg visible like Add Property */
.eeap-page {
position: relative;
}
.eeap-sky {
position: fixed;
inset: 0;
z-index: -2;
}
.eeap-sky-img {
/* same tower image you used on Add Property; adjust path if needed */
background: url("/assets/images/background/towers2-blue2.png") center/cover
no-repeat fixed;
width: 100%;
height: 100%;
filter: saturate(1) contrast(1) brightness(0.98);
}
.eeap-noise {
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.08;
pointer-events: none;
}
/* Soft glows (already used earlier) */
.eeap-glow {
position: fixed;
width: 320px;
height: 320px;
border-radius: 50%;
filter: blur(72px);
opacity: 0.25;
pointer-events: none;
z-index: -1;
}
.eeap-glow--tl {
top: 10%;
left: -80px;
background: radial-gradient(closest-side, var(--eeap-accent), transparent);
}
.eeap-glow--br {
bottom: 8%;
right: -80px;
background: radial-gradient(closest-side, var(--eeap-accent-2), transparent);
}
/* Two-column */
.eeap-two-col {
display: grid;
grid-template-columns: 1fr 340px;
gap: 18px;
}
@media (max-width: 992px) {
.eeap-two-col {
grid-template-columns: 1fr;
}
.eeap-right {
position: static;
top: auto;
}
}
.eeap-left {
min-width: 0;
}
.eeap-right {
position: sticky;
top: 90px;
}
/* Summary card */
.eeap-summary {
border-radius: 16px;
background: color-mix(in oklab, var(--eeap-card), transparent 6%);
border: 1px solid var(--eeap-border);
padding: 16px;
}
.eeap-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.eeap-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 8px;
}
.eeap-summary-grid label {
display: block;
font-size: 12px;
opacity: 0.7;
margin-bottom: 2px;
}
.eeap-summary-grid p {
margin: 0;
color: var(--eeap-text);
}
.eeap-span-2 {
grid-column: span 2;
}
.eeap-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eeap-divider {
height: 1px;
background: var(--eeap-border);
margin: 12px 0;
}
.eeap-thumb-row {
display: flex;
gap: 10px;
}
.eeap-thumb {
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--eeap-border);
background: #fff2;
display: flex;
align-items: center;
justify-content: center;
}
.eeap-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.eeap-thumb--empty {
color: var(--eeap-text);
opacity: 0.4;
border-style: dashed;
}
.eeap-summary-actions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.eeap-mini-link {
border: 1px solid var(--eeap-border);
background: transparent;
padding: 6px 10px;
border-radius: 10px;
cursor: pointer;
color: var(--eeap-text);
}
.eeap-mini-link i {
margin-right: 6px;
}
/* Accordion */
.eeap-accordion {
border-radius: 16px;
background: var(--eeap-card);
border: 1px solid var(--eeap-border);
margin-bottom: 12px;
overflow: hidden;
}
.eeap-accordion-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: color-mix(in oklab, var(--eeap-card), transparent 15%);
border: 0;
cursor: pointer;
}
.eeap-accordion-title {
font-weight: 700;
}
.eeap-accordion-meta {
display: flex;
gap: 10px;
align-items: center;
}
.eeap-accordion-body {
padding: 14px;
}
.eeap-chip {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: #f0f3f7;
color: #3d4a5a;
border: 1px solid var(--eeap-border);
}
.eeap-chip.success {
background: #e8f8ef;
color: #167c46;
border-color: #bfead2;
}
.eeap-section-cta {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
/* Hero orb (floating icon) */
.eeap-hero-orb {
width: 64px;
height: 64px;
border-radius: 999px;
background: radial-gradient(
circle at 30% 30%,
var(--eeap-accent),
transparent 60%
),
radial-gradient(circle at 70% 70%, var(--eeap-accent-2), transparent 60%),
rgba(255, 255, 255, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
border: 1px solid var(--eeap-border);
overflow: hidden;
}
.eeap-hero-orb i {
font-size: 22px;
color: #fff;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.eeap-float-spin {
animation: eeapFloat 4.6s ease-in-out infinite, eeapSpin 18s linear infinite;
transform-style: preserve-3d;
}
@keyframes eeapFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes eeapSpin {
0% {
transform: rotateZ(0) rotateX(0);
}
50% {
transform: rotateZ(180deg) rotateX(6deg);
}
100% {
transform: rotateZ(360deg) rotateX(0);
}
}
.eeap-hero-orb .eeap-shine {
position: absolute;
top: 8px;
left: 10%;
width: 80%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.75),
transparent
);
animation: orbShine 3s ease-in-out infinite;
}
@keyframes orbShine {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
/* Footer (same as your existing) */
.eeap-footerbar {
position: sticky;
bottom: 0;
inset-inline: 0;
background: color-mix(in oklab, var(--eeap-card), transparent 20%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--eeap-border);
padding: 10px 0;
z-index: 15;
}
.eeap-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
color: #222 !important;
}
.eeap-footer-step {
display: inline-flex;
gap: 10px;
align-items: center;
color: black;
}
.eeap-step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--eeap-accent);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--eeap-accent), transparent 70%);
color: #222 !important;
}
/* Buttons */
.eeap-btn {
background: linear-gradient(90deg, var(--eeap-accent), var(--eeap-accent-2));
color: #fff;
border: 0;
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
font-weight: 600;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.eeap-btn.ghost {
background: transparent;
color: var(--eeap-text);
border: 1px solid var(--eeap-border);
}
/* Grid helpers (shared) */
.eeap-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}
.eeap-grid-tight {
gap: 10px;
margin-top: 8px;
}
/* ===== Valuation Modal (compact) ===== */
.eeap-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1000;
}
.eeap-modal-card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--eeap-modal-width, 92vw);
max-width: var(--eeap-modal-max, 560px);
background: var(--eeap-card-alpha);
border: 1px solid var(--eeap-border);
border-radius: 16px;
box-shadow: var(--eeap-shadow);
z-index: 1001;
padding: 14px;
}
.eeap-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.eeap-modal-title {
font-weight: 700;
}
.eeap-modal-sub {
font-size: 12px;
opacity: 0.8;
}
.eeap-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
@media (max-width: 480px) {
.eeap-modal-grid {
grid-template-columns: 1fr 1fr;
}
}
.eeap-option {
border: 1px solid var(--eeap-border);
background: var(--eeap-card);
color: var(--eeap-text);
border-radius: 12px;
padding: 10px;
text-align: center;
cursor: pointer;
}
.eeap-option:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.eeap-modal-actions {
/* display: flex; */
/* justify-content: flex-end; */
gap: 8px;
margin-top: 10px;
}
.eeap-close-btn {
border: 1px solid var(--eeap-border);
background: transparent;
border-radius: 10px;
padding: 6px 10px;
cursor: pointer;
}
/* ===== MyProperty banner ===== */
.eeap-alert {
border: 1px solid rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
border-radius: 12px;
padding: 10px 12px;
margin: 8px 0 12px 0;
}
.eeap-alert a {
color: #b91c1c;
text-decoration: underline;
}
/* ===== Valuation Pending Dropdown ===== */
.eeap-valuation-alert {
border: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 16px 20px;
margin: 8px 0 20px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
.eeap-valuation-alert:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: rgba(148, 163, 184, 0.35);
}
.eeap-valuation-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
color: #1e293b;
}
[data-eeap-theme="dark"] .eeap-valuation-header {
color: #e5edff;
}
.eeap-valuation-content {
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.2);
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.eeap-valuation-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.eeap-valuation-item {
display: block;
padding: 12px 16px;
background: rgba(248, 250, 252, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
}
.eeap-valuation-item:hover {
background: rgba(241, 245, 249, 1);
border-color: rgba(59, 130, 246, 0.4);
transform: translateX(4px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
text-decoration: none;
color: inherit;
}
[data-eeap-theme="dark"] .eeap-valuation-alert {
border-color: rgba(148, 163, 184, 0.3);
background: rgba(30, 41, 59, 0.95);
}
[data-eeap-theme="dark"] .eeap-valuation-item {
background: rgba(15, 23, 42, 0.6);
border-color: rgba(148, 163, 184, 0.25);
color: #e5edff;
}
[data-eeap-theme="dark"] .eeap-valuation-item:hover {
background: rgba(15, 23, 42, 0.8);
border-color: rgba(59, 130, 246, 0.4);
color: #ffffff;
}
.eeap-col {
grid-column: span 12;
}
.eeap-col-auto {
grid-column: auto;
display: flex;
align-items: flex-end;
}
.eeap-col-sm {
grid-column: span 6;
}
.eeap-col-lg {
grid-column: span 8;
}
@media (max-width: 992px) {
.eeap-col-sm,
.eeap-col-lg {
grid-column: span 12;
}
}
.eeap-icon-row {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.eeap-icon-btn {
border: 1px solid var(--eeap-border);
background: transparent;
border-radius: 10px;
width: 38px;
height: 38px;
}
.eeap-icon-btn.danger {
color: #b84a4a;
border-color: #e6bcbc;
}
/* Micro */
.eeap-micro {
font-size: 12px;
opacity: 0.8;
}
/* Tokens — ensure these exist (light/dark switch picks from your theme) */
:root {
--eeap-card: rgba(15, 1, 1, 0.6);
--eeap-border: rgba(15, 23, 42, 0.12);
--eeap-text: #0f172a;
--eeap-accent: #31acd2; /* EquitEdge cyan */
--eeap-accent-2: #4f46e5; /* Accent purple/blue */
}
html.dark :root {
--eeap-card: rgba(17, 25, 40, 0.6);
--eeap-border: rgba(148, 163, 184, 0.18);
--eeap-text: #e2e8f0;
}
/* ============================
Edit Property v2 — Namespaced
Scope: .eev2-root, .eeap-*
============================ */
.eev2-root {
position: relative;
isolation: isolate;
--eeap-bg-url: url("/assets/images/background/towers2-blue2.png"); /* << set your tower image here */
--eeap-c1: #0a2533;
--eeap-c2: #0f1f29;
--eeap-ink: #0b1a21;
--eeap-ink-2: #20323b;
--eeap-muted: #6b7b86;
--eeap-line: rgba(15, 23, 42, 0.1);
--eeap-card: #ffffff;
--eeap-card-2: #f7f9fc;
--eeap-brand: #31acd2; /* EquitEdge blue */
--eeap-brand-ink: #071c1f;
--eeap-ok: #10b981;
--eeap-danger: #ef4444;
--eeap-shadow: 0 20px 60px rgba(16, 24, 40, 0.14);
--eeap-radius: 16px;
--eeap-radius-sm: 12px;
--eeap-radius-xs: 10px;
}
/* Background stack (image + soft overlays) */
.eev2-root .eeap-sky {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
background: radial-gradient(
1200px 600px at 100% -20%,
rgba(49, 172, 210, 0.1),
transparent 60%
),
radial-gradient(
900px 500px at -10% 120%,
rgba(7, 28, 31, 0.12),
transparent 60%
),
linear-gradient(180deg, #f7fbff 0%, #eef5fb 35%, #eaf2f8 100%);
}
.eev2-root .eeap-sky-img {
position: absolute;
inset: 0;
background-image: var(--eeap-bg-url);
background-size: cover;
background-position: center;
opacity: 0.25; /* make the tower visible but subtle */
filter: saturate(1.05) contrast(1.02);
}
.eev2-root .eeap-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.35;
mix-blend-mode: multiply;
pointer-events: none;
}
/* Floating orb accent */
.eev2-root .eeap-hero-orb {
position: absolute;
top: -80px;
right: -80px;
width: 280px;
height: 280px;
border-radius: 999px;
background: radial-gradient(
circle at 35% 35%,
rgba(49, 172, 210, 0.35),
transparent 60%
),
radial-gradient(circle at 70% 70%, rgba(7, 28, 31, 0.28), transparent 60%);
filter: blur(8px);
z-index: -1;
}
.eev2-root .eeap-shine {
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
closest-side,
rgba(255, 255, 255, 0.35),
rgba(255, 255, 255, 0) 70%
);
mix-blend-mode: screen;
}
/* Header area — tighter spacing */
.eev2-root .eeap-header {
padding: 8px 6px 18px 6px;
}
.eev2-root .eeap-title h1 {
margin: 0 0 6px 0;
font-size: 28px;
font-weight: 700;
color: var(--eeap-ink);
letter-spacing: -0.2px;
}
.eev2-root .eeap-gradient-text {
background: linear-gradient(90deg, var(--eeap-brand), #58c7e6 60%, #9ae3f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.eev2-root .eeap-sub {
margin: 0;
color: var(--eeap-muted);
font-size: 13px;
}
/* Cards / panels */
.eev2-root .card {
background: var(--eeap-card);
border: 1px solid var(--eeap-line);
border-radius: var(--eeap-radius);
box-shadow: var(--eeap-shadow);
}
.eev2-root .eeap-shimmer {
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.65),
rgba(255, 255, 255, 0.65)
),
radial-gradient(
1200px 500px at -20% 120%,
rgba(49, 172, 210, 0.06),
transparent 60%
);
background-blend-mode: overlay, normal;
}
/* Accordion */
.eev2-root .eeap-accordion {
margin-bottom: 12px;
}
.eev2-root .eeap-accordion-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 0;
background: transparent;
cursor: pointer;
}
.eev2-root .eeap-accordion-head:hover {
background: rgba(7, 28, 31, 0.035);
}
.eev2-root .eeap-accordion-head-lt {
display: flex;
align-items: center;
gap: 12px;
}
.eev2-root .eeap-head-icon {
font-size: 18px;
line-height: 1;
}
.eev2-root .eeap-accordion-title {
font-weight: 600;
color: var(--eeap-ink);
}
.eev2-root .eeap-accordion-sub {
color: var(--eeap-muted);
}
.eev2-root .eeap-accordion-chevron {
transform: rotate(0deg);
transition: transform 0.25s ease;
}
.eev2-root .eeap-accordion[aria-expanded="true"] .eeap-accordion-chevron,
.eev2-root
.eeap-accordion
.eeap-accordion-head[aria-expanded="true"]
.eeap-accordion-chevron {
transform: rotate(180deg);
}
.eev2-root .eeap-accordion-body {
padding: 8px 16px 16px 16px;
border-top: 1px solid var(--eeap-line);
display: grid;
gap: 12px;
}
.eev2-root .eeap-accordion-body.is-closed {
display: none;
}
/* Grid helpers */
.eev2-root .eeap-grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
.eev2-root .eeap-col,
.eev2-root .eeap-col-auto,
.eev2-root .eeap-col-sm,
.eev2-root .eeap-col-lg {
min-width: 0;
}
.eev2-root .eeap-col-auto {
justify-self: end;
}
@media (min-width: 576px) {
.eev2-root .eeap-grid {
grid-template-columns: repeat(2, 1fr);
}
.eev2-root .eeap-col-sm {
grid-column: span 1;
}
.eev2-root .eeap-col {
grid-column: 1 / -1;
}
}
@media (min-width: 992px) {
.eev2-root .eeap-grid {
grid-template-columns: repeat(12, 1fr);
}
.eev2-root .eeap-col-lg {
grid-column: span 6;
}
.eev2-root .eeap-col-sm {
grid-column: span 3;
}
.eev2-root .eeap-col {
grid-column: 1 / -1;
}
.eev2-root .eeap-col-auto {
grid-column: span 2;
}
}
/* Inline preview line */
.eev2-root .eeap-preview {
padding: 10px 12px;
border: 1px dashed var(--eeap-line);
border-radius: var(--eeap-radius-sm);
background: var(--eeap-card-2);
display: flex;
align-items: center;
gap: 8px;
}
/* FINAL READABILITY OVERRIDES */
.eev2-root .eeap-footerbar,
.eev3-root .eeap-footerbar {
background: #ffffff !important;
border-top: 1px solid #000000 !important;
}
.dark .eev2-root .eeap-footerbar,
.eev2-root[data-theme="light"] .eeap-footerbar {
background: #ffffff !important;
}
.eev2-root .eeap-footer-inner,
.eev3-root .eeap-footer-inner {
background: #ffffff !important;
color: #000000 !important;
border-color: #000000 !important;
}
.react-stepper-js .step .label,
.eev2-root .react-stepper-js .step .label,
.eev3-root .react-stepper-js .step .label {
color: #000000 !important;
font-weight: 700 !important;
opacity: 1 !important;
}
.eev2-root .eeap-panel-head h4,
.eev3-root .eeap-panel-head h4 {
color: #000000 !important;
font-weight: 700 !important;
}
.eev2-root .eeap-panel small,
.eev3-root .eeap-panel small {
color: #000000 !important;
}
.eev2-root .eeappr-docs-drop,
.eev3-root .eeappr-docs-drop {
color: #000000 !important;
font-weight: 600 !important;
}
.eev2-root .eeappr-docs-drop a,
.eev3-root .eeappr-docs-drop a {
color: #000000 !important;
font-weight: 600 !important;
text-decoration: underline;
}
.eev2-root .eeappr-docs-meta,
.eev2-root .eeappr-docs-meta-sub,
.eev2-root .eeappr-docs-rowtitle,
.eev3-root .eeappr-docs-meta,
.eev3-root .eeappr-docs-meta-sub,
.eev3-root .eeappr-docs-rowtitle {
color: #000000 !important;
font-weight: 600 !important;
}
.eeap-footerbar {
background: transparent !important;
border-top: none !important;
}
.eeap-footer-inner {
color: #000000 !important;
background: #ffffff !important;
border: none !important;
}
.eeap-panel-head h4 {
color: #000000 !important;
font-weight: 700 !important;
}
.eeap-panel-head small,
.eeap-help,
.eeap-sub {
color: #000000 !important;
}
.eeap-panel .react-stepper-js .step .label {
color: #000000 !important;
font-weight: 700 !important;
}
.eeappr-compact-form .eeappr-docs-drop,
.eeappr-docs-compact .eeappr-docs-drop,
.eeappr-compact-form .eeappr-docs-meta,
.eeappr-docs-compact .eeappr-docs-meta,
.eeappr-compact-form .eeappr-docs-meta-sub,
.eeappr-docs-compact .eeappr-docs-meta-sub,
.eeappr-compact-form .eeappr-docs-rowtitle,
.eeappr-docs-compact .eeappr-docs-rowtitle {
color: #000000 !important;
font-weight: 600;
}
.eeap-pill-text {
color: #000000 !important;
font-weight: 600 !important;
}
.eev2-root .eeap-preview-label {
font-size: 12px;
color: var(--eeap-muted);
}
.eev2-root .eeap-preview-text {
font-weight: 600;
color: var(--eeap-ink-2);
}
/* Summary card */
.eev2-root .eeap-summary {
position: sticky;
top: 88px;
}
.eev2-root .eeap-summary-grid {
display: grid;
gap: 8px;
padding: 6px 14px 16px 14px;
}
.eev2-root .eeap-summary-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px;
padding: 10px 0;
border-bottom: 1px dashed var(--eeap-line);
}
.eev2-root .eeap-summary-row:last-child {
border-bottom: 0;
}
.eev2-root .eeap-summary-label {
color: var(--eeap-muted);
font-size: 12px;
}
.eev2-root .eeap-summary-value a.apx-link {
color: var(--eeap-brand);
text-decoration: none;
}
.eev2-root .eeap-summary-value a.apx-link:hover {
text-decoration: underline;
}
/* Panel head + actions */
.eev2-root .eeap-panel-head {
padding: 14px 16px 6px 16px;
}
.eev2-root .eeap-panel-head h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--eeap-ink);
}
.eev2-root .eeap-help {
color: var(--eeap-muted);
}
.eev2-root .eeap-panel-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 6px 2px 2px;
}
.eev2-root .eeap-panel-actions.spread {
justify-content: space-between;
}
/* Icon buttons (add/remove in Media) */
.eev2-root .eeap-icon-btn {
border: 1px solid var(--eeap-line);
background: #fff;
color: var(--eeap-ink);
border-radius: 10px;
padding: 8px 10px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06);
}
.eev2-root .eeap-icon-btn:hover {
background: #f9fbfd;
}
.eev2-root .eeap-icon-btn.danger {
color: var(--eeap-danger);
}
/* Footer bar (sticky) */
.eev2-root .eeap-footerbar {
position: sticky;
bottom: 0;
z-index: 5;
margin-top: 14px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
border-top: 1px solid var(--eeap-line);
}
.eev2-root .eeap-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 6px;
color: #222 !important;
}
.eev2-root .eeap-footer-step {
display: flex;
align-items: center;
gap: 10px;
color: var(--eeap-muted);
}
.eev2-root .eeap-step-dot {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--eeap-brand);
box-shadow: 0 0 0 3px rgba(49, 172, 210, 0.15);
}
/* Buttons (uses your CustomButton classes; add light variants) */
.eev2-root .eeap-btn {
border-radius: 999px;
background: var(--eeap-brand);
color: #072026;
border: 1px solid rgba(7, 28, 31, 0.12);
padding: 10px 16px;
font-weight: 600;
}
.eev2-root .eeap-btn:hover {
filter: brightness(0.96);
}
.eev2-root .eeap-btn.ghost {
background: #fff;
color: var(--eeap-brand-ink);
border: 1px solid rgba(49, 172, 210, 0.35);
}
/* Inputs from shared components often inherit; ensure consistent spacing */
.eev2-root .eeap-grid .form-group,
.eev2-root .eeap-grid .ltn__form-box {
margin-bottom: 0 !important;
}
/* Dark mode (wrap parent with .dark or data-theme="dark") */
.dark .eev2-root,
.eev2-root[data-theme="dark"] {
--eeap-card: #0f1720;
--eeap-card-2: #111c25;
--eeap-ink: #e7eef4;
--eeap-ink-2: #cbd8e1;
--eeap-muted: #8da0ad;
--eeap-line: rgba(203, 216, 225, 0.12);
--eeap-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
background: linear-gradient(180deg, #0a1218, #0b1820 60%, #0a1a22);
}
.dark .eev2-root .eeap-sky,
.eev2-root[data-theme="dark"] .eeap-sky {
background: radial-gradient(
1200px 600px at 100% -20%,
rgba(49, 172, 210, 0.1),
transparent 60%
),
radial-gradient(
900px 500px at -10% 120%,
rgba(49, 172, 210, 0.08),
transparent 60%
),
linear-gradient(180deg, #0a1218 0%, #0a1a22 100%);
}
.dark .eev2-root .eeap-sky-img,
.eev2-root[data-theme="dark"] .eeap-sky-img {
opacity: 0.2;
filter: saturate(0.9) contrast(1.05) brightness(0.9);
}
.dark .eev2-root .eeap-footerbar,
.eev2-root[data-theme="light"] .eeap-footerbar {
background: rgba(15, 23, 32, 0.9) !important;
}
/* Utility: trim excessive gaps under H1 if any global CSS pushes it down */
.eev2-root h1 {
margin-block-start: 0.2rem;
}
/* ====== EEV2 NAMESPACE FIXES ====== */
.eev2-root {
position: relative;
isolation: isolate; /* ensure z-index stack is local */
}
/* Background visibility like Add Property */
.eev2-root .eeap-sky {
position: fixed; /* keep it behind and full-screen */
inset: 0;
z-index: -2;
pointer-events: none;
}
.eev2-root .eeap-sky-img {
position: absolute;
inset: 0;
background: radial-gradient(
1000px 600px at 90% -10%,
rgba(49, 172, 210, 0.12),
transparent 30%
),
radial-gradient(
800px 600px at 10% 100%,
rgba(7, 28, 31, 0.1),
transparent 30%
),
url("/assets/images/background/towers2-blue2.png") center/cover no-repeat; /* <-- your tower bg */
filter: saturate(1.05);
}
.eev2-root .eeap-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0.04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.7;
}
/* Cards transparent so background is visible */
.eev2-root .card,
.eev2-root .eeap-accordion,
.eev2-summary {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
border: 1px solid rgba(7, 28, 31, 0.1);
border-radius: 16px;
}
/* Reduce header top gap */
.eev2-root .eeap-header {
margin-top: 6px;
margin-bottom: 12px;
}
.eev2-root .eeap-title h1 {
margin: 0 0 4px 0;
line-height: 1.2;
}
.eev2-root .eeap-sub {
margin: 0;
}
/* Accordion paddings tightened */
.eev2-root .eeap-accordion-head {
padding: 14px 16px;
}
.eev2-root .eeap-accordion-title {
font-size: 16px;
}
.eev2-root .eeap-accordion-sub {
font-size: 12px;
opacity: 0.75;
}
.eev2-root .eeap-accordion-body {
padding: 12px 16px 16px;
}
.eev2-root .eeap-accordion-chevron {
font-size: 14px;
}
/* Floating orb icon: smaller, sharper */
.eev2-root .eeap-hero-orb {
position: absolute;
top: -8px;
right: 6px;
width: 64px;
height: 64px;
z-index: -1; /* keep it behind the header text */
border-radius: 50%;
background: radial-gradient(
circle at 30% 30%,
rgba(49, 172, 210, 0.45),
rgba(49, 172, 210, 0) 60%
);
filter: drop-shadow(0 8px 18px rgba(7, 28, 31, 0.15));
}
.eev2-root .eeap-hero-orb .eeap-shine {
display: none;
}
/* Summary grid (no flooding) */
.eev2-summary-head {
padding-bottom: 6px;
}
.eev2-summary-grid {
display: grid;
gap: 8px;
padding: 8px 12px 14px;
}
.eev2-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 8px;
align-items: start;
}
.eev2-label {
font-size: 12px;
color: #0d2a2f;
opacity: 0.75;
white-space: nowrap;
}
.eev2-val {
font-size: 13px;
color: #071c1f;
word-break: break-word;
}
.eev2-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eev2-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.eev2-links .apx-link {
font-size: 12px;
text-decoration: underline;
}
/* Footer bar tight */
.eev2-root .eeap-footerbar {
margin-top: 10px;
border-radius: 14px;
background: rgba(18, 3, 3, 0.82);
backdrop-filter: blur(8px);
}
/* Make preview chip compact */
.eev2-root .eeap-preview {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 6px 10px;
border: 1px dashed rgba(7, 28, 31, 0.2);
border-radius: 10px;
background: rgba(11, 2, 2, 0.6);
}
.eev2-root .eeap-preview-label {
font-size: 12px;
opacity: 0.7;
}
.eev2-root .eeap-preview-text {
font-size: 12px;
}
/* =========================
Edit Property v3 (EEV3)
Namespaced: .eev3-*
========================= */
/* Page & Background */
.eev3-root {
position: relative;
isolation: isolate;
}
.eev3-sky {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
}
.eev3-sky-img {
position: absolute;
inset: 0;
background: radial-gradient(
1000px 600px at 90% -10%,
rgba(49, 172, 210, 0.12),
transparent 50%
),
radial-gradient(
800px 600px at 10% 100%,
rgba(7, 28, 31, 0.1),
transparent 60%
),
url("/assets/images/background/towers2-blue2.png") center/cover no-repeat;
filter: saturate(1.05);
opacity: 0.28; /* visible but subtle */
}
.eev3-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.2;
}
/* Header (tight) */
.eev3-header {
padding: 8px 0 10px 0;
}
.eev3-title h1 {
margin: 0 0 4px 0;
font-weight: 800;
letter-spacing: -0.02em;
color: #0b1220;
}
.eev3-gradient {
background: linear-gradient(90deg, #31acd2, #58c7e6 60%, #9ae3f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.eev3-sub {
margin: 0;
color: #6b7b86;
font-size: 14px;
}
/* Floating orb icon (smaller) */
.eev3-hero-orb {
position: absolute;
top: 4px;
right: 8px;
width: 56px;
height: 56px;
border-radius: 50%;
background: radial-gradient(
circle at 35% 35%,
rgba(49, 172, 210, 0.35),
transparent 60%
),
radial-gradient(circle at 70% 70%, rgba(7, 28, 31, 0.25), transparent 60%);
filter: drop-shadow(0 8px 18px rgba(7, 28, 31, 0.15));
z-index: -1;
}
.eev3-shine {
display: none;
}
/* Cards & common */
.eev3-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(7, 28, 31, 0.1);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(16, 24, 40, 0.14);
text-align: center;
}
/* Accordion */
.eev3-accordion {
margin-bottom: 12px;
overflow: hidden;
}
.eev3-accordion-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: transparent;
border: 0;
cursor: pointer;
}
.eev3-accordion-head:hover {
background: rgba(7, 28, 31, 0.035);
}
.eev3-accordion-lt {
display: flex;
align-items: center;
gap: 10px;
}
.eev3-head-icon {
font-size: 18px;
line-height: 1;
}
.eev3-accordion-title {
font-weight: 700;
color: #0b1220;
}
.eev3-accordion-sub {
color: #6b7b86;
}
.eev3-accordion-chevron {
transition: transform 0.25s ease;
}
.eev3-accordion-body {
padding: 10px 14px 14px;
display: grid;
gap: 12px;
}
.eev3-accordion-body.is-closed {
display: none;
}
/* Grid */
.eev3-grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
.eev3-col {
grid-column: 1 / -1;
}
.eev3-col-auto {
grid-column: 1 / -1;
align-self: end;
justify-self: end;
}
.eev3-col-sm {
grid-column: 1 / -1;
}
.eev3-col-lg {
grid-column: 1 / -1;
}
@media (min-width: 576px) {
.eev3-grid {
grid-template-columns: repeat(2, 1fr);
}
.eev3-col-sm {
grid-column: span 1;
}
}
@media (min-width: 992px) {
.eev3-grid {
grid-template-columns: repeat(12, 1fr);
}
.eev3-col-lg {
grid-column: span 8;
}
.eev3-col-sm {
grid-column: span 6;
}
.eev3-col {
grid-column: 1 / -1;
}
.eev3-col-auto {
grid-column: span 2;
}
}
/* Panel actions */
.eev3-panel-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding-top: 2px;
}
.eev3-panel-actions.eev3-spread {
justify-content: space-between;
}
/* Buttons */
.eev3-btn {
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
font-weight: 600;
color: #072026;
border: 1px solid rgba(7, 28, 31, 0.12);
background: #31acd2; /* EquitEdge cyan */
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.eev3-btn:hover {
filter: brightness(0.96);
}
.eev3-btn.ghost {
background: #fff;
color: #072026;
border: 1px solid rgba(49, 172, 210, 0.35);
}
/* Footer (solid, not transparent) */
.eev3-footerbar {
position: sticky;
bottom: 0;
z-index: 8;
margin-top: 12px;
background: #ffffff;
border-top: 1px solid rgba(7, 28, 31, 0.1);
}
.eev3-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 6px;
}
.eev3-footer-step {
display: flex;
align-items: center;
gap: 10px;
color: #6b7b86;
}
.eev3-step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #31acd2;
box-shadow: 0 0 0 3px rgba(49, 172, 210, 0.15);
}
/* Inline preview chip */
.eev3-preview {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.6);
}
.eev3-preview-label {
font-size: 12px;
opacity: 0.7;
}
.eev3-preview-text {
font-weight: 600;
color: #0d2a2f;
}
/* Summary (EquitEdge tint) */
.eev3-summary {
position: sticky;
top: 84px;
}
.eev3-summary-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 6px;
}
.eev3-help {
color: #6b7b86;
}
.eev3-summary-grid {
display: grid;
gap: 8px;
padding: 6px 14px 14px;
}
.eev3-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 8px;
padding: 8px 0;
border-bottom: 1px dashed rgba(7, 28, 31, 0.12);
}
.eev3-row:last-child {
border-bottom: 0;
}
.eev3-label {
color: #6b7b86;
font-size: 12px;
}
.eev3-val {
color: #071c1f;
font-size: 13px;
word-break: break-word;
}
.eev3-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.eev3-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.eev3-link {
color: #31acd2;
text-decoration: underline;
}
/* Icon row/buttons */
.eev3-icon-row {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.eev3-icon-btn {
border: 1px solid rgba(7, 28, 31, 0.15);
background: #fff;
color: #071c1f;
border-radius: 10px;
padding: 8px 10px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06);
}
.eev3-icon-btn:hover {
background: #f9fbfd;
}
.eev3-icon-btn.danger {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
}
/* Tighten default top gaps under h1 if globals add space */
.eev3-root h1 {
margin-block-start: 0.2rem;
}
/* ---- Fixed fullscreen background ---- */
.eev3-root {
position: relative;
isolation: isolate;
}
.ee-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
.ee-bg-img {
position: absolute;
inset: 0;
background: url("/assets/images/background/towers2-blue2.png") center/cover
no-repeat fixed;
filter: saturate(1.05) contrast(1.03);
opacity: 0.28; /* tune if too subtle */
}
.ee-bg-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.18;
}
/* ---- Ensure no white paint over bg on this page ---- */
.eev3-root,
.eev3-root .eeap-page,
.eev3-root .eeap-flow,
.eev3-root .container,
.eev3-root .row {
background: transparent !important;
overflow: visible !important;
}
/* Common theme culprits in your stack that paint white */
.eev3-root .liton__wishlist-area,
.eev3-root .ltn__myaccount-tab-content-inner,
.eev3-root .ltn__product-area,
.eev3-root .ltn__checkout-area {
background: transparent !important;
}
/* Make panels glassy so bg stays visible */
.eev3-root .eeap-panel,
.eev3-root .eev3-card,
.eev3-root .card {
background: rgba(255, 255, 255, 0.74) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(7, 28, 31, 0.1);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(16, 24, 40, 0.14);
text-align: center;
}
/* Keep header readable over image (optional but recommended) */
.eev3-root .ltn__header-area,
.eev3-root header.navbar,
.eev3-root .site-header {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
}
/* Remove any page-level solid background that may win on specificity */
body.eev3-force,
html.eev3-force {
background: transparent !important;
}
.eev3-root #that-wrapper,
.eev3-root .that-wrapper {
background: transparent !important;
}
/* Root + isolate to avoid bleed */
.eedocv2-root {
position: relative;
isolation: isolate;
}
/* Force any default whites behind to be transparent (scoped) */
.eedocv2-root .container,
.eedocv2-root .row,
.eedocv2-root .eeap-flow {
background: transparent !important;
}
/* ===== Fixed background just for this step ===== */
.eedocv2-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
.eedocv2-bg-img {
position: absolute;
inset: 0;
background: url("/assets/images/background/towers2-blue2.png") center/cover
no-repeat fixed;
opacity: 0.32; /* tweak visibility */
filter: saturate(1.02) contrast(1.03);
}
.eedocv2-bg-noise {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.18;
}
/* ===== Glass panel ===== */
.eedocv2-panel {
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 16px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 24px 60px rgba(16, 24, 40, 0.14);
}
/* Side-by-side headings + uploader */
.eedocv2-grid {
align-items: flex-start;
}
.eedocv2-col {
display: flex;
flex-direction: column;
}
/* Locked rows (Title Deed / NEC) left heading */
.eedocv2-dochead {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 6px;
}
.eedocv2-docname {
margin: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.eedocv2-status {
color: #475569;
}
/* Actions area */
.eedocv2-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.eedocv2-addwrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.eedocv2-addlabel {
color: #334155;
}
/* Blue plus button */
.eedocv2-addbtn {
border: 1px solid #2563eb;
color: #2563eb;
background: #eff6ff;
border-radius: 10px;
line-height: 1;
padding: 6px 10px;
font-weight: 700;
}
.eedocv2-addbtn:hover {
background: #dbeafe;
color: #1e40af;
border-color: #1e40af;
}
/* ===== Property Detail v3 (scoped) ===== */
.eepropv3-wrap {
position: relative;
}
/* Background — same visual language as Documents step, new scope */
.eepropv3-bg {
position: absolute;
inset: 0;
background: radial-gradient(
1200px 600px at 110% -20%,
rgba(29, 78, 216, 0.14),
transparent 62%
),
radial-gradient(
900px 520px at -10% 120%,
rgba(2, 132, 199, 0.12),
transparent 60%
),
url("/assets/images/background/towers2-blue2.png") no-repeat right center /
contain;
opacity: 0.55; /* was ~0.35 */
pointer-events: none;
z-index: 0;
}
.eepropv3-panel {
overflow: visible;
}
/* Two-column content + sticky preview */
.eepropv3-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px; /* was 360; gives a touch more left space */
gap: 22px;
}
.eepropv3-left {
position: relative;
z-index: 2;
}
.eepropv3-preview {
position: sticky;
top: 84px;
z-index: 1;
}
.eepropv3-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
background: #fff;
}
.eepropv3-card-media {
display: none !important;
}
.eepropv3-card-body {
padding: 14px 16px 16px;
}
.eepropv3-card-body h5 {
margin: 0 0 8px;
font-weight: 600;
}
.eepropv3-kv {
display: flex;
justify-content: space-between;
margin: 6px 0;
font-size: 14px;
}
.eepropv3-kv span {
color: #6b7280;
}
.eepropv3-hr {
height: 1px;
background: rgba(0, 0, 0, 0.06);
margin: 10px 0;
}
.eepropv3-para {
font-size: 13px;
color: #374151;
line-height: 1.4;
max-height: 3.6em;
overflow: hidden;
}
/* Form grid */
.eepropv3-grid {
display: grid;
grid-template-columns: repeat(2, minmax(260px, 1fr));
gap: 18px 22px;
}
.eepropv3-col {
min-width: 0;
}
/* Gen-Z chips (pills) */
.eepropv3-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.eepropv3-chip {
--ring: rgba(59, 130, 246, 0.35);
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
line-height: 1;
cursor: pointer;
user-select: none;
transition: box-shadow 0.2s, transform 0.04s, border-color 0.2s,
background 0.2s;
}
.eepropv3-chip:hover {
transform: translateY(-1px);
}
.eepropv3-chip input {
display: none;
}
.eepropv3-chipicon {
display: inline-flex;
}
.eepropv3-chiplabel {
white-space: nowrap;
}
.eepropv3-chip.is-checked {
border-color: rgba(37, 99, 235, 0.35);
background: linear-gradient(
180deg,
rgba(37, 99, 235, 0.08),
rgba(37, 99, 235, 0.02)
);
box-shadow: 0 0 0 3px var(--ring);
}
/* Advanced header toggle */
.eepropv3-advanced-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.eepropv3-adv-toggle {
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
}
/* Footer */
.eepropv3-footer {
position: sticky;
bottom: 0;
}
@media (max-width: 992px) {
.eepropv3-grid {
grid-template-columns: 1fr;
}
}
.eepropv3-wrap.eeap-flow {
overflow: visible;
}
/* Collapse to one-column a bit earlier to avoid overlap on medium screens */
@media (max-width: 1280px) {
.eepropv3-main {
grid-template-columns: 1fr;
}
.eepropv3-preview {
position: static;
}
}
/* Ensure app sits above */
#root,
.site-wrapper,
.app-main {
position: relative;
z-index: 1;
}
/* Optional: a soft glass card wrapper if you want to wrap each step panel */
.eeq-glass {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 18px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 18px 18px 6px 18px;
}
/* STEP LABEL INLINE STYLE OVERRIDE */
.eev2-root [class*="step"] .label,
.eev2-root [class*="step"] span,
.eev3-root [class*="step"] .label,
.eev3-root [class*="step"] span {
color: #0b1220 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
/* Inputs and labels clean spacing */
.eeq-field + .eeq-field {
margin-top: 12px;
}
.eeq-row {
row-gap: 12px;
}
/* Disabled inputs have subtle style */
input[disabled],
select[disabled],
textarea[disabled] {
background-color: #f6f7fb !important;
color: #6b7280 !important;
cursor: not-allowed;
}
/* Small helper texts */
.form-text,
.field-info,
small {
color: #6b7280;
}
/* Buttons: keep padding compact in stepper */
.btn.padding-0 {
padding: 0.45rem 0.8rem;
}
/* ====== Color Cards / Gen-Z chips (scoped) ====== */
/* Shared card shell */
.eerentv3-card,
.eefinv3-card,
.eemgrv3-card {
background: linear-gradient(
135deg,
rgba(2, 132, 199, 0.1),
rgba(29, 78, 216, 0.08)
);
border: 1px solid rgba(2, 132, 199, 0.18);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
margin-bottom: 16px;
}
/* Head with a stronger tint */
.eerentv3-card-head,
.eefinv3-card-head,
.eemgrv3-card-head {
padding: 14px 16px;
background: linear-gradient(
135deg,
rgba(2, 132, 199, 0.18),
rgba(29, 78, 216, 0.12)
);
border-bottom: 1px solid rgba(2, 132, 199, 0.18);
}
.eerentv3-card-head.alt {
background: linear-gradient(
135deg,
rgba(29, 78, 216, 0.2),
rgba(2, 132, 199, 0.16)
);
}
.eerentv3-title,
.eefinv3-title,
.eemgrv3-title {
font-weight: 700;
letter-spacing: 0.2px;
}
.eerentv3-sub,
.eefinv3-sub,
.eemgrv3-sub {
font-size: 0.85rem;
opacity: 0.85;
}
/* Body grid */
.eerentv3-body,
.eefinv3-body,
.eemgrv3-body {
padding: 16px;
}
.eerentv3-row,
.eefinv3-row,
.eemgrv3-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 12px;
}
.eerentv3-spacer,
.eefinv3-spacer {
height: 1px;
}
/* File rows */
.eerentv3-file-row,
.eemgrv3-file-row {
display: grid;
grid-template-columns: 1.2fr 1.8fr auto;
gap: 12px;
align-items: end;
margin-bottom: 12px;
}
.eerentv3-file-col.wide,
.eemgrv3-file-col.wide {
min-width: 320px;
}
.eerentv3-file-actions,
.eemgrv3-file-actions {
display: flex;
gap: 8px;
align-items: center;
}
.eerentv3-icon,
.eemgrv3-icon {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(2, 132, 199, 0.35);
display: grid;
place-items: center;
font-size: 18px;
cursor: pointer;
background: #fff;
transition: transform 0.12s ease, background 0.12s ease;
}
.eerentv3-icon.add,
.eemgrv3-icon.add {
color: #2563eb;
background: rgba(37, 99, 235, 0.08);
}
.eerentv3-icon.danger,
.eemgrv3-icon.danger {
color: #ef4444;
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.35);
}
.eerentv3-icon:hover,
.eemgrv3-icon:hover {
transform: translateY(-1px);
}
.eerentv3-viewfile,
.eemgrv3-viewfile {
display: inline-block;
margin-top: 6px;
}
.eerentv3-hint,
.eemgrv3-hint {
margin-top: 6px;
opacity: 0.85;
}
/* Manager yes/no pills */
.eemgrv3-yesno {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
}
.eemgrv3-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(2, 132, 199, 0.35);
cursor: pointer;
user-select: none;
}
.eemgrv3-pill input {
display: none;
}
.eemgrv3-pill.is-checked {
background: rgba(37, 99, 235, 0.1);
color: #1e3a8a;
border-color: rgba(37, 99, 235, 0.4);
}
.eemgrv3-note {
padding: 10px 12px;
background: rgba(2, 132, 199, 0.08);
border: 1px dashed rgba(2, 132, 199, 0.35);
border-radius: 12px;
}
/* Footer buttons spacing */
.eerentv3-btns,
.eefinv3-btns,
.eemgrv3-btns {
display: flex;
gap: 10px;
}
/* Responsive */
@media (max-width: 992px) {
.eerentv3-row,
.eefinv3-row,
.eemgrv3-row {
grid-template-columns: 1fr;
}
.eerentv3-file-row,
.eemgrv3-file-row {
grid-template-columns: 1fr;
}
}
:root {
/* Tweak these to match your layout */
--ee-header: 88px; /* navbar height */
--ee-footer: 140px; /* footer height */
--ee-bg-maxw: 720px; /* max width of the tower graphic area */
--ee-bg-opacity: 0.55; /* image + halo opacity */
}
/* page wrapper */
.ee-screen {
position: relative;
z-index: 0; /* under content but above the page background */
}
/* background layer that lives BETWEEN header and footer */
.ee-bg {
position: absolute;
top: var(--ee-header);
right: 0;
bottom: var(--ee-footer);
left: 0;
/* keep the halo + tower to the right */
background: radial-gradient(
1000px 520px at 110% -10%,
rgba(29, 78, 216, 0.14),
transparent 62%
),
radial-gradient(
820px 460px at -10% 110%,
rgba(2, 132, 199, 0.12),
transparent 60%
),
url("/assets/images/background/towers2-blue2.png") no-repeat right center;
background-size: auto, /* gradient 1 */ auto,
/* gradient 2 */ min(40vw, var(--ee-bg-maxw)) auto; /* tower image width */
opacity: var(--ee-bg-opacity);
pointer-events: none;
z-index: 0;
}
/* your actual content sits above the bg */
.ee-content {
position: relative;
z-index: 1;
}
/* Remove the pale media/banner on the preview card if it’s still there */
.eepropv3-card-media {
display: none !important;
}
.eepropv3-preview .eeap-panel {
padding-top: 16px;
}
/* Ensure preview never overlaps the form */
.eepropv3-left {
position: relative;
z-index: 2;
}
.eepropv3-preview {
position: sticky;
top: 84px;
z-index: 1;
}
/* Responsive: stack on smaller screens so nothing collides */
.eepropv3-main {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 22px;
}
@media (max-width: 1280px) {
.eepropv3-main {
grid-template-columns: 1fr;
}
.eepropv3-preview {
position: static;
}
}
/* Optional: dark mode balance */
html.dark .ee-bg {
opacity: 0.48;
}
/* ===== Financial v4 dynamic accordion (scoped) ===== */
.eefinV4-wrap {
position: relative;
}
.eefinV4-tabs {
position: sticky;
top: 76px;
z-index: 3; /* under your navbar */
display: flex;
gap: 8px;
padding: 8px 0 10px;
background: linear-gradient(#fff, rgba(255, 255, 255, 0.92));
backdrop-filter: saturate(1.2) blur(2px);
}
.eefinV4-tab {
border: 1px solid rgba(2, 132, 199, 0.25);
background: #fff;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.92rem;
}
.eefinV4-tab.is-active {
background: rgba(37, 99, 235, 0.08);
color: #1e3a8a;
border-color: rgba(37, 99, 235, 0.35);
}
.eefinV4-acc {
border: 1px solid rgba(2, 132, 199, 0.18);
border-radius: 14px;
margin-bottom: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.eefinV4-acc-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
cursor: pointer;
background: linear-gradient(
135deg,
rgba(2, 132, 199, 0.12),
rgba(29, 78, 216, 0.1)
);
}
.eefinV4-acc-head h5 {
margin: 0;
font-weight: 700;
}
.eefinV4-acc-caret {
width: 16px;
height: 16px;
border-right: 2px solid #1e3a8a;
border-bottom: 2px solid #1e3a8a;
transform: rotate(-45deg);
transition: transform 0.18s ease;
}
.eefinV4-acc.open .eefinV4-acc-caret {
transform: rotate(45deg);
}
.eefinV4-acc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, padding 0.2s ease;
padding: 0 14px;
}
.eefinV4-acc.open .eefinV4-acc-body {
max-height: 1000px;
padding: 12px 14px 14px;
}
.eefinV4-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 12px;
}
.eefinV4-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.eefinV4-pills.wide .eefinV4-pill {
min-width: 220px;
}
.eefinV4-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid rgba(2, 132, 199, 0.25);
background: #fff;
border-radius: 12px;
padding: 8px 10px;
font-size: 0.92rem;
}
.eefinV4-pill.muted {
opacity: 0.8;
}
.eefinV4-footer .eefinV4-btns {
display: flex;
gap: 10px;
}
@media (max-width: 992px) {
.eefinV4-row {
grid-template-columns: 1fr;
}
}
/* Financial v5 layout */
.eefinV5-wrap {
position: relative;
}
.eefinV5-2col .eefinV5-main {
display: grid;
grid-template-columns: 1fr 360px;
gap: 16px;
align-items: start;
}
@media (max-width: 992px) {
.eefinV5-2col .eefinV5-main {
grid-template-columns: 1fr;
}
.eefinV5-right {
order: -1;
}
}
.eefinV5-left .eefinV5-tabs {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.eefinV5-tab {
padding: 8px 12px;
border-radius: 999px;
border: 1px solid var(--ee-border, #e5e7eb);
background: #fff;
font-weight: 600;
}
.eefinV5-tab.is-active {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
}
.eefinV5-acc {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
margin-bottom: 12px;
overflow: hidden;
}
.eefinV5-acc-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
cursor: pointer;
}
.eefinV5-acc-caret {
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
opacity: 0.5;
}
.eefinV5-acc-body {
padding: 14px 16px;
border-top: 1px dashed #e5e7eb;
}
.eefinV5-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 640px) {
.eefinV5-row {
grid-template-columns: 1fr;
}
}
.eefinV5-right .eefinV5-card {
position: sticky;
top: 84px;
background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
color: #f8fafc;
border-radius: 16px;
padding: 16px;
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
}
.eefinV5-card-head {
margin-bottom: 8px;
}
.eefinV5-card-title {
font-size: 16px;
font-weight: 700;
}
.eefinV5-card-sub {
font-size: 12px;
opacity: 0.75;
}
.eefinV5-kv {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
}
.eefinV5-hr {
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 8px 0;
}
.eefinV5-note {
margin-top: 8px;
font-size: 12px;
opacity: 0.8;
}
.eefinV5-footer .eeap-btn {
min-width: 120px;
}
/* Layout */
.eefinV7-2col .eefinV7-main {
display: grid;
grid-template-columns: 1fr 360px;
gap: 16px;
align-items: start;
}
@media (max-width: 992px) {
.eefinV7-2col .eefinV7-main {
grid-template-columns: 1fr;
}
.eefinV7-right {
order: -1;
}
}
/* Tabs + panels */
.eefinV7-tabs {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.eefinV7-tab {
padding: 8px 12px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #fff;
font-weight: 600;
}
.eefinV7-tab.is-active {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
}
.eefinV7-acc {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
margin-bottom: 12px;
overflow: hidden;
}
.eefinV7-acc-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
cursor: pointer;
}
.eefinV7-acc-caret {
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
opacity: 0.5;
}
.eefinV7-acc-body {
padding: 14px 16px;
border-top: 1px dashed #e5e7eb;
}
.eefinV7-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 640px) {
.eefinV7-row {
grid-template-columns: 1fr;
}
}
/* Right card */
.eefinV7-right .eefinV7-card {
position: sticky;
top: 84px;
background: linear-gradient(180deg, #0b1220 0%, #0a1020 100%);
color: #f8fafc;
border-radius: 16px;
padding: 16px;
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35);
}
.eefinV7-card-head {
margin-bottom: 8px;
}
.eefinV7-card-title {
font-size: 16px;
font-weight: 700;
}
.eefinV7-card-sub {
font-size: 12px;
opacity: 0.75;
}
.eefinV7-kv {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
}
.eefinV7-hr {
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 8px 0;
}
/* Inline ownership input */
.eefinV7-field-inline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 6px 0 2px;
}
.eefinV7-inline-label {
font-size: 14px;
opacity: 0.9;
}
.eefinV7-input {
width: 140px;
background: #0f172a;
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
padding: 8px 10px;
border-radius: 10px;
}
.eefinV7-input:focus {
outline: none;
border-color: #22d3ee;
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.eefinV7-input-error {
border-color: #f87171;
}
.eefinV7-err {
color: #fecaca;
font-size: 12px;
margin-top: 2px;
}
/* === EquitEdge Rent V3 (eerentV3-*) === */
.eerentV3-wrap {
position: relative;
}
.eerentV3-main {
display: grid;
grid-template-columns: 1fr 360px;
gap: 18px;
align-items: start;
}
@media (max-width: 992px) {
.eerentV3-main {
grid-template-columns: 1fr;
}
}
.eerentV3-panel {
border-radius: 16px;
}
.eerentV3-qhead {
padding: 10px 12px 0;
}
.eerentV3-title {
margin: 0 0 4px;
}
.eerentV3-center {
display: flex;
justify-content: center;
padding: 10px 12px 22px;
}
.eerentV3-statuspick {
width: min(560px, 100%);
}
.eerentV3-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.eerentV3-col {
min-width: 0;
}
.eerentV3-col-lg {
grid-column: span 2;
}
.eerentV3-col-auto {
display: flex;
align-items: end;
}
.eerentV3-actions {
display: flex;
gap: 10px;
align-items: center;
}
.eerentV3-addwrap {
display: flex;
align-items: center;
gap: 8px;
}
.eerentV3-addbtn {
background: linear-gradient(180deg, #4f8df6 0%, #33b1e6 100%);
color: #fff;
}
.eerentV3-right {
position: sticky;
top: 88px;
}
.eerentV3-card {
border-radius: 18px;
padding: 14px 16px;
background: radial-gradient(
800px 400px at 120% -20%,
rgba(79, 141, 246, 0.15),
transparent 60%
),
radial-gradient(
640px 420px at -20% 120%,
rgba(51, 177, 230, 0.14),
transparent 60%
),
linear-gradient(180deg, #0e1a2b 0%, #0b1626 100%);
color: #eaf5ff;
box-shadow: 0 12px 28px rgba(7, 24, 48, 0.28);
}
.eerentV3-cardhead {
margin-bottom: 8px;
}
.eerentV3-cardtitle {
font-weight: 600;
}
.eerentV3-cardsub {
font-size: 12px;
opacity: 0.8;
}
.eerentV3-kv {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.eerentV3-kv:last-child {
border-bottom: 0;
}
.eerentV3-hr {
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
margin: 8px 0;
}
html.light .eerentV3-card {
background: radial-gradient(
800px 400px at 120% -20%,
rgba(79, 141, 246, 0.12),
transparent 60%
),
radial-gradient(
640px 420px at -20% 120%,
rgba(51, 177, 230, 0.12),
transparent 60%
),
linear-gradient(180deg, #ffffff, #f7fbff);
color: #0b2038;
box-shadow: 0 12px 24px rgba(15, 37, 68, 0.14);
}
/* === LiveCard (scoped) === */
.eeaplc-card {
border-radius: 16px;
padding: 16px;
color: #fff; /* <- white text globally */
box-shadow: 0 8px 20px rgba(17, 43, 68, 0.3);
backdrop-filter: saturate(130%) blur(2px);
}
.eeaplc-title {
margin: 0 0 4px;
font-weight: 700;
line-height: 1.1;
color: #fff;
}
.eeaplc-sub {
opacity: 0.85;
font-size: 12.5px;
}
.eeaplc-hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
margin: 10px 0;
}
.eeaplc-list {
display: grid;
gap: 8px;
}
.eeaplc-kv {
display: flex;
justify-content: space-between;
gap: 12px;
}
.eeaplc-k {
opacity: 0.9;
font-size: 13px;
}
.eeaplc-v {
font-weight: 600;
text-align: right;
}
.eeaplc-footer {
margin-top: 12px;
opacity: 0.9;
font-size: 12.5px;
}
/* small screens: stack nicely */
@media (max-width: 992px) {
.eeaplc-card {
position: relative;
top: 0;
}
}
/* Accordion shell */
.eegfm-acc {
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
margin-bottom: 14px;
}
.eegfm-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
cursor: pointer;
}
.eegfm-title {
margin: 0;
font-weight: 700;
color: #182a3a;
}
.eegfm-caret {
width: 10px;
height: 10px;
border-right: 2px solid #8aa3b5;
border-bottom: 2px solid #8aa3b5;
transform: rotate(-45deg);
transition: transform 0.18s ease;
}
.eegfm-caret.is-open {
transform: rotate(45deg);
}
.eegfm-body {
padding: 14px;
}
/* Centered availability question */
.eegfm-qwrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 6px;
}
.eegfm-q {
margin: 0;
text-align: center;
}
.eegfm-qopts {
display: flex;
gap: 18px;
align-items: center;
}
/* Grid for details */
.eegfm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 900px) {
.eegfm-grid {
grid-template-columns: 1fr;
}
}
/* Docs list */
.eegfm-docrow {
display: flex;
gap: 10px;
align-items: flex-end;
margin-bottom: 10px;
}
.eegfm-doccol {
flex: 1;
}
.eegfm-docact {
display: flex;
gap: 8px;
}
.eegfm-add {
border-radius: 8px;
border: 1px solid #33b1e6;
background: #33b1e6;
color: #fff;
padding: 6px 10px;
cursor: pointer;
}
.eegfm-del {
border: none;
background: #fff;
color: #c00;
padding: 6px 10px;
cursor: pointer;
}
/* Sticky wrapper (safe even if you already set inline) */
.eeap-sticky-rt {
position: sticky;
top: 80px; /* keep in sync with stickyTop prop */
align-self: start; /* important so it sticks to the top of its column */
z-index: 2;
}
/* LiveCard base */
.eeaplc-card {
color: #fff; /* white text globally */
border-radius: 16px;
padding: 16px;
box-shadow: 0 8px 20px rgba(17, 43, 68, 0.3);
/* background is set inline via `gradient` prop */
}
/* Titles & text */
.eeaplc-title {
margin: 0 0 4px 0;
font-weight: 600;
font-size: 18px;
line-height: 1.2;
color: #fff;
}
.eeaplc-sub {
opacity: 0.85;
font-size: 13px;
}
.eeaplc-hr {
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin: 12px 0;
}
/* Key–value list */
.eeaplc-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.eeaplc-kv {
display: grid;
grid-template-columns: 120px 1fr;
gap: 8px;
align-items: baseline;
}
.eeaplc-k {
opacity: 0.8;
font-size: 13px;
white-space: nowrap;
}
.eeaplc-v {
font-weight: 500;
color: #fff; /* ensure values are bright on the gradient */
}
/* Footer slot (optional) */
.eeaplc-footer {
margin-top: 12px;
border-top: 1px dashed rgba(255, 255, 255, 0.25);
padding-top: 10px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.eeap-stick-wrap {
position: sticky;
top: 80px; /* match your header height */
align-self: start; /* in CSS grid, keeps it at column top */
z-index: 2;
}
/* Manager section wrapper: apply background only to this area */
.eeapx-stage {
position: relative;
z-index: 0;
padding-top: 12px;
padding-bottom: 12px;
}
/* Background image (does not cover navbar/footer) */
.eeapx-stage[data-eeap-bg="towers"]::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(
--eeapx-bg-url,
url("/assets/images/background/towers2-blue2.png")
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* parallax feel */
filter: saturate(1.05) contrast(1.05);
opacity: 0.9;
pointer-events: none;
}
/* Readability overlay */
.eeapx-stage[data-eeap-bg="towers"]::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 16, 28, 0.45) 0%,
rgba(8, 16, 28, 0.65) 100%
),
radial-gradient(
900px 450px at 75% 10%,
rgba(14, 34, 60, 0.3) 0%,
rgba(8, 16, 28, 0) 60%
);
}
/* Ensure sticky isn't clipped by ancestors */
.eeapx-stage,
.eeapx-tune,
.container {
overflow: visible !important;
}
/* Sticky wrapper for LiveCard */
.eeap-stick-wrap {
position: sticky;
top: 80px; /* align with your header height */
align-self: start;
}
.eeapx-wrap {
position: relative;
z-index: 0;
padding-top: 12px;
padding-bottom: 12px;
overflow: visible;
}
.eeapx-bg {
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.eeapx-bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 16, 28, 0.25) 0%,
rgba(8, 16, 28, 0.45) 100%
),
radial-gradient(
900px 450px at 75% 10%,
rgba(14, 34, 60, 0.25) 0%,
rgba(8, 16, 28, 0) 60%
);
}
.eeap-stick-wrap {
position: sticky;
top: 80px;
align-self: start;
}
:root {
/* adjust to your actual heights */
--eeap-nav-h: 72px;
--eeap-footer-h: 80px;
}
/* scope everything under this */
.eeapx-tune {
position: relative;
isolation: isolate; /* keeps background behind content */
}
/* full-viewport background image (below nav/footer content) */
.eeapx-tune .eeapx-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: 0;
}
/* darker overlay + subtle blur */
.eeapx-tune .eeapx-overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgba(6, 18, 30, 0.7) 0%,
rgba(6, 18, 30, 0.78) 50%,
rgba(6, 18, 30, 0.85) 100%
);
backdrop-filter: blur(2px);
z-index: 0;
pointer-events: none;
}
/* content lives above bg */
.eeapx-tune .eeapx-content {
position: relative;
z-index: 1;
/* keep content between navbar and footer */
padding: 24px 20px calc(24px + var(--eeap-footer-h));
min-height: calc(100vh - var(--eeap-nav-h) - var(--eeap-footer-h));
margin-top: var(--eeap-nav-h);
}
/* glass card look for sections on the steps */
.eeap-card {
color: #0b2038; /* dark readable text */
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* simple radio label styling */
.eeap-radio {
color: #e8eef5;
}
/* grid wrapper in steps (left form + sticky right card) */
.eeap-flow {
display: grid;
gap: 16px;
align-items: start;
}
/* sticky right side */
.eeap-stick-wrap {
position: sticky;
top: 80px; /* match your header height from earlier instruction */
}
/* footer bar consistent + visible above background */
.eeap-footerbar {
position: sticky;
bottom: 0;
margin-top: 16px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background: rgba(12, 28, 44, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
}
.eeap-footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
color: black;
}
.eeap-footer-step {
display: flex;
align-items: center;
gap: 8px;
color: #d8e7f3;
font-weight: 500;
}
.eeap-step-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #33b1e6;
}
/* buttons – re-use your CustomButton but give a consistent look here if needed */
.eeap-btn {
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: #33b1e6;
color: #fff;
}
.eeap-btn.ghost {
background: transparent;
color: #0a0a0b;
}
/* let inputs breathe on glass */
.eeap-card .TextField input,
.eeap-card .TextField textarea,
.eeap-card select {
background: rgba(255, 255, 255, 0.92) !important;
color: #0b1f2d !important;
}
[data-eeap-theme="light"] .eeap-footerbar,
[data-eeap-theme="dark"] .eeap-footerbar {
color: #120a0a !important;
border-top: 1px solid #ffffff0d !important;
}
[data-eeap-theme="light"] .eeap-footer-inner *,
[data-eeap-theme="dark"] .eeap-footer-inner * {
color: #0b0909 !important;
}
/* small headings on glass */
.eeap-card h4,
.eeap-card h5 {
color: #0b2038;
font-weight: 600;
}
/* === DocumentDetail spacing fixes === */
.eedocv2-row {
margin-bottom: 12px !important; /* reduce row spacing */
}
.eedocv2-left {
padding-top: 4px; /* reduce top offset of left label */
}
.eedocv2-drop {
padding: 10px 12px !important;
min-height: 68px; /* more compact look */
}
.eedocv2-drop img {
width: 48px !important;
height: 48px !important;
}
.eedocv2-right {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 4px; /* tighten stack spacing */
}
.eedocv2-actions {
margin-top: 4px !important;
}
.eedocv2-panel {
padding: 18px 20px 32px 20px !important; /* slightly less vertical padding */
}
/* tighter rows */
.eedocv2-row.eedocv2-compact {
padding: 6px 0;
margin-bottom: 8px;
border-bottom: 1px solid rgba(15, 37, 68, 0.05);
}
.eedocv2-row.eedocv2-compact:last-child {
border-bottom: 0;
}
/* align label column closer */
.eedocv2-left {
padding-top: 2px;
}
/* compact drop tile */
.eedocv2-drop--compact {
border: 1px dashed #2b7bbd;
border-radius: 10px;
padding: 8px 10px;
min-height: 64px; /* fixed baseline height - no jump */
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
/* thumbnail sizes */
.eedocv2-thumb {
width: 44px;
height: 44px;
border-radius: 8px;
object-fit: cover;
}
.eedocv2-thumb--placeholder {
background: linear-gradient(135deg, #112b44 0%, #17486b 50%, #2b7bbd 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
/* meta line keeps status inline (prevents vertical growth) */
.eedocv2-meta {
line-height: 1.2;
}
.eedocv2-meta-top {
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.eedocv2-status {
font-size: 12px;
font-weight: 600;
color: #2a8f3a;
opacity: 0.9;
} /* “Uploaded Successfully” */
.eedocv2-meta-sub {
opacity: 0.7;
}
/* right column stack tightened */
.eedocv2-right {
display: flex;
flex-direction: column;
gap: 4px;
}
.eedocv2-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 2px;
}
/* the + button at column 3 */
.eedocv2-col3 {
display: flex;
align-items: center;
justify-content: flex-end;
}
.eedocv2-addbtn {
border: 1px solid #33b1e6;
background: #33b1e6;
color: #fff;
border-radius: 10px;
padding: 6px 10px;
font-weight: 700;
}
.eev3-sky-img::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7) !important; /* make darker/lighter here */
}
/* Dark theme – make text crisp and layout compact */
[data-eeap-theme="dark"] .eeap-page {
color: #f5f7ff;
}
[data-eeap-theme="dark"] .eeap-panel {
/* background: rgba(9, 13, 24, 0.96); */
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
}
[data-eeap-theme="dark"] .eeap-panel-head h4,
[data-eeap-theme="dark"] .eeap-panel-head small {
color: #f8f9ff;
}
.eeap-panel-head--center {
text-align: center;
}
/* Tighter vertical rhythm */
.eeap-grid-tight {
margin-top: 8px;
margin-bottom: 8px;
}
.eeap-grid-two .eeap-col-sm {
min-width: 0;
}
/* Location preview – subtle */
.eeap-preview--compact {
margin-top: 4px;
font-size: 0.8rem;
opacity: 0.9;
}
/* Verification layout */
.eeap-veri-layout {
padding-top: 24px;
padding-bottom: 24px;
}
.eeap-veri-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
}
@media (max-width: 991px) {
.eeap-veri-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.eeap-veri-summary h5 {
font-size: 1rem;
margin-bottom: 8px;
}
.eeap-veri-summary ul {
padding-left: 18px;
margin-bottom: 8px;
}
.eeap-veri-summary p {
font-size: 0.9rem;
opacity: 0.95;
}
/* Chip */
.eeap-veri-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(90, 186, 255, 0.08);
border: 1px solid rgba(90, 186, 255, 0.3);
margin-bottom: 12px;
font-size: 0.78rem;
}
.eeap-veri-chip-label {
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
}
.eeap-veri-chip-value {
font-weight: 600;
}
/* Fee card */
.eeap-veri-card {
display: flex;
justify-content: center;
}
.eeap-veri-card-inner {
width: 100%;
max-width: 320px;
border-radius: 18px;
padding: 18px 20px;
background: radial-gradient(
circle at top,
#1f3458 0,
#050716 60%,
#02030a 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.eeap-veri-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.8;
}
.eeap-veri-amount-row {
display: flex;
align-items: baseline;
gap: 6px;
margin: 4px 0 4px;
}
.eeap-veri-currency {
font-size: 0.9rem;
opacity: 0.9;
}
.eeap-veri-value {
font-size: 1.7rem;
font-weight: 600;
}
.eeap-veri-note {
font-size: 0.85rem;
margin-top: 6px;
margin-bottom: 12px;
opacity: 0.95;
}
.eeap-btn-full {
width: 100%;
justify-content: center;
}
.eeap-veri-small {
font-size: 0.78rem;
margin-top: 10px;
opacity: 0.9;
}
/* Compact vertical spacing between rows */
.eeap-grid-tight {
row-gap: 12px;
}
/* Keep the step title on one line */
.eeap-panel-head--center h4 {
white-space: nowrap;
}
/* DARK MODE: clearer text on inputs + textarea */
[data-eeap-theme="dark"] .eeap-panel {
color: #f5f7ff;
}
[data-eeap-theme="dark"] .eeap-panel .form-label {
color: #e8edff;
font-weight: 600;
}
[data-eeap-theme="dark"] .eeap-panel .form-control {
background-color: rgba(20, 28, 45, 0.95);
border-color: rgba(120, 135, 180, 0.4);
color: #f8fbff;
-webkit-text-fill-color: #f8fbff; /* fixes bluish text on some browsers */
}
[data-eeap-theme="dark"] .eeap-panel .form-control::placeholder {
color: rgba(200, 210, 240, 0.65);
}
[data-eeap-theme="dark"] .eeap-panel .form-control:focus {
border-color: #7fa6ff;
box-shadow: 0 0 0 1px rgba(127, 166, 255, 0.45);
}
/* ===== AddProperty Dark Mode Tunings ===== */
/* Header layout: keep title on one line and pills centered */
.eeap-header.eeap-header--tight {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.eeap-header-lt {
flex: 0 0 auto;
}
.eeap-header-title {
margin: 0;
font-size: 1.25rem;
color: #3b82f6;
white-space: nowrap;
}
.eeap-header-mid {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.eeap-header-rt {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
}
/* --- Compact grid between fields --- */
.eeap-grid-tight .eeap-col,
.eeap-grid-tight .eeap-col-sm {
margin-bottom: 14px;
}
/* Preview line below location */
.eeap-preview--compact {
margin-top: 4px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
}
.eeap-preview--compact .eeap-preview-label {
font-weight: 500;
margin-right: 4px;
}
/* Apply these field styles ONLY in dark mode */
[data-eeap-theme="dark"] .eeapx-field input,
[data-eeap-theme="dark"] .eeapx-field textarea,
[data-eeap-theme="dark"] .eeapx-field select {
color: #e6e6e6 !important;
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-eeap-theme="dark"] .eeapx-field input:focus,
[data-eeap-theme="dark"] .eeapx-field textarea:focus,
[data-eeap-theme="dark"] .eeapx-field select:focus {
background: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
border-color: #6ba8ff !important;
box-shadow: 0 0 0 2px rgba(107, 168, 255, 0.35);
}
/* Dropdown options in dark mode */
[data-eeap-theme="dark"] .eeapx-field select {
background-color: rgba(255, 255, 255, 0.04) !important;
color: #e6e6e6 !important;
}
[data-eeap-theme="dark"] .eeapx-field select option {
background-color: #101523 !important;
color: #e6e6e6 !important;
}
/* Textarea local tweaks */
.eeapx-textarea {
resize: vertical;
min-height: 120px;
}
/* ===== Verification fee layout ===== */
.eeap-veri-layout {
padding-top: 24px;
}
.eeap-veri-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
@media (max-width: 991px) {
.eeap-veri-grid {
grid-template-columns: 1fr;
}
}
.eeap-veri-summary {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.78);
}
.eeap-veri-text h5 {
margin-top: 12px;
margin-bottom: 8px;
font-size: 1rem;
color: #ffffff;
}
.eeap-veri-text ul {
padding-left: 18px;
margin-bottom: 8px;
}
.eeap-veri-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: radial-gradient(circle at top left, #4257ff 0%, #141824 60%);
border: 1px solid rgba(255, 255, 255, 0.12);
margin-bottom: 12px;
}
.eeap-veri-chip-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(234, 232, 239, 0.7);
}
.eeap-veri-chip-label1 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(234, 232, 239, 0.7);
}
.eeap-veri-chip-value {
font-size: 0.82rem;
font-weight: 600;
color: #ffffff;
}
/* Right card */
.eeap-veri-card {
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, #4d79ff, #a37bff);
}
.eeap-veri-card-inner {
border-radius: 16px;
padding: 18px 20px;
background: radial-gradient(circle at top, #151a26 0%, #0b0f18 80%);
color: #f5f5ff;
}
.eeap-veri-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.7);
}
.eeap-veri-amount-row {
display: flex;
align-items: baseline;
gap: 4px;
margin: 6px 0 4px;
}
.eeap-veri-currency {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
}
.eeap-veri-value {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.eeap-veri-note {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 12px;
}
.eeap-veri-small {
margin-top: 8px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
}
.eeap-btn-full {
width: 100%;
}
/* ===== Dark header + navbar text ===== */
.eeap-dark-header .nk-header,
.eeap-dark-header .nk-header * {
color: #ffffff !important;
}
.eeap-dark-header .nk-header,
.eeap-dark-header .nk-header-main {
background: transparent !important;
}
/* You can lighten active menu item if needed */
.eeap-dark-header .nk-menu-link.active {
color: #9fc4ff !important;
}
/* ---------- Global: make navbar text white in dark mode ---------- */
[data-eeap-theme="dark"] .navbar-nav > li > a {
color: #f9fafb;
}
[data-eeap-theme="dark"] .navbar-nav > li > a:hover {
color: #e5e7eb;
}
/* ---------- Header cluster ---------- */
.eeapx-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
padding-bottom: 16px;
gap: 24px;
}
.eeapx-header-left {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.eeapx-header-title {
margin: 0;
font-size: 22px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.04em;
color: #1c448c;
align-items: center !important;
}
.eeapx-header-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Right side: ID + theme toggle + orb */
.eeapx-header-right {
display: flex;
align-items: center;
gap: 16px;
}
.eeapx-id {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.eeapx-id-label {
opacity: 0.7;
}
.eeapx-id-value {
font-weight: 600;
}
/* ID chip colours per theme */
[data-eeap-theme="dark"] .eeapx-id {
background: rgba(9, 15, 40, 0.96);
border: 1px solid #303b74;
color: #1c448c;
}
[data-eeap-theme="light"] .eeapx-id {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 23, 42, 0.12);
color: #0f172a;
}
/* Theme toggle pill */
.eeapx-theme-toggle {
border-radius: 999px;
border: 0;
padding: 6px 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
background: linear-gradient(135deg, #1f2937, #4b5cff);
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.55);
color: #f9fafb;
}
.eeapx-theme-toggle:focus-visible {
box-shadow: 0 0 0 2px #e5e7eb;
}
.eeapx-theme-icon {
font-size: 16px;
line-height: 1;
}
/* Make it a bit softer in light mode */
[data-eeap-theme="light"] .eeapx-theme-toggle {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #f9fafb;
}
/* Hero orb (building icon) */
.eeapx-hero-orb {
width: 42px;
height: 42px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #f9fafb;
background: radial-gradient(circle at 25% 15%, #a855f7, #2563eb 45%, #020617);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
}
/* Light mode orb is a bit calmer */
[data-eeap-theme="light"] .eeapx-hero-orb {
background: radial-gradient(circle at 25% 15%, #6366f1, #0ea5e9 55%, #e5e7eb);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
}
/* Textarea tint – avoid bluish typing colour, keep it neutral */
.eeapx-textarea {
color: var(--eeap-text);
}
[data-eeap-theme="light"] .eeapx-textarea {
color: #111827;
}
/* ---------- HEADER BAR ---------- */
.eeap-proper .eeap-header-bar-proper {
margin-top: 40px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.eeap-proper .eeap-header-left-proper {
display: flex;
flex-direction: column;
gap: 8px;
}
.eeap-proper .eeap-header-title-proper {
margin: 0;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.02em;
}
.eeap-proper .eeap-pills-proper {
padding-left: 0;
}
/* Right side: ID + toggle */
.eeap-proper .eeap-header-right-proper {
display: flex;
align-items: center;
gap: 16px;
}
/* ID pill with glass effect */
.eeap-proper .eeap-id-pill-proper {
padding: 10px 22px;
border-radius: 999px;
background: radial-gradient(
circle at 0% 0%,
#3b82f6 0%,
#020617 45%,
#020617 100%
);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(148, 163, 255, 0.4);
}
.eeap-proper .eeap-id-label-proper {
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(191, 219, 254, 0.85);
}
.eeap-proper .eeap-id-value-proper {
font-size: 13px;
font-weight: 600;
color: #e5edff;
}
/* Theme chip – reuse same feel as earlier toggle */
.eeap-proper .eeap-theme-chip-proper {
border: none;
outline: none;
padding: 10px 18px;
border-radius: 999px;
background: radial-gradient(
circle at 0 0,
#f97316 0%,
#0b1120 55%,
#020617 100%
);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.75);
color: #fefce8;
cursor: pointer;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Light / dark specific header text */
[data-eeap-theme="dark"] .eeap-proper .eeap-header-title-proper {
color: #e5edff;
}
[data-eeap-theme="light"] .eeap-proper .eeap-header-title-proper {
color: #1f2933;
}
/* ---------- TEXT / INPUT COLORS ---------- */
[data-eeap-theme="dark"] .eeap-proper .form-control {
color: #e5edff;
background-color: rgba(15, 23, 42, 0.92);
}
[data-eeap-theme="light"] .eeap-proper .form-control {
color: #111827;
}
/* Textarea specifically */
.eeap-proper .eeap-textarea-proper {
resize: vertical;
min-height: 120px;
}
[data-eeap-theme="dark"] .eeap-proper .eeap-textarea-proper {
color: #e5edff;
background-color: rgba(15, 23, 42, 0.92);
}
[data-eeap-theme="light"] .eeap-proper .eeap-textarea-proper {
color: #0f172a;
}
/* ---------- SELECT DROPDOWN FIX (white text issue) ---------- */
/* Wrapper we added around SelectField on this page only */
.eeap-proper .eeap-select-proper select {
width: 100%;
}
/* Closed state */
[data-eeap-theme="dark"] .eeap-proper .eeap-select-proper select {
color: #e5edff;
background-color: rgba(15, 23, 42, 0.98);
border-color: rgba(148, 163, 255, 0.4);
}
[data-eeap-theme="light"] .eeap-proper .eeap-select-proper select {
color: #111827;
background-color: rgba(255, 255, 255, 0.96);
}
/* Options when dropdown is open (native select) */
.eeap-proper .eeap-select-proper select option {
color: #0b1220;
background-color: #ffffff;
}
/* ---------- STATUS PILL ON VERIFICATION STEP ---------- */
.eeap-proper .eeap-veri-status-pill-proper {
margin-bottom: 24px;
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 999px;
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%, #020617 100%);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
}
.eeap-proper .eeap-status-label-proper {
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(191, 219, 254, 0.86);
margin-right: 12px;
}
.eeap-proper .eeap-status-value-proper {
font-size: 13px;
font-weight: 600;
color: #f9fafb;
}
/* Verification card tint tweaks for dark / light */
[data-eeap-theme="dark"] .eeap-proper .eeap-veri-card-proper {
background: radial-gradient(
circle at 0 0,
#111827 0%,
#020617 55%,
#020617 100%
);
}
[data-eeap-theme="light"] .eeap-proper .eeap-veri-card-proper {
background: linear-gradient(135deg, #ffffff 0%, #e5edff 90%);
color: #0f172a;
}
.eeap-proper .eeap-veri-card-proper .eeap-veri-note,
.eeap-proper .eeap-veri-card-proper .eeap-veri-small {
margin-top: 8px;
}
/* Grid: left bullets + right card */
.eeapx-tune .eeapx-veri-grid {
margin-top: 14px;
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
gap: 32px;
align-items: stretch;
}
.eeapx-tune .eeapx-veri-left {
color: #f4f6ff;
font-size: 14px;
}
.eeapx-tune .eeapx-veri-left h4 {
margin-bottom: 12px;
font-weight: 600;
}
.eeapx-tune .eeapx-veri-left ul {
padding-left: 18px;
margin: 0 0 12px;
}
.eeapx-tune .eeapx-veri-left li + li {
margin-top: 4px;
}
.eeapx-tune .eeapx-veri-footnote {
margin: 6px 0 0;
font-size: 13px;
color: rgba(224, 231, 255, 0.8);
}
/* Gradient fee card – *single* card, white text, centred content */
.eeapx-tune .eeapx-veri-card {
background-image: linear-gradient(135deg, #2646ff, #8b45ff);
border-radius: 30px;
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
padding: 26px 30px 30px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.eeapx-tune .eeapx-veri-card-inner {
max-width: 360px;
text-align: center;
}
/* tiny pill inside card */
.eeapx-tune .eeapx-veri-chip {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.4);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 16px;
opacity: 0.95;
}
/* amount */
.eeapx-tune .eeapx-veri-amount {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-bottom: 4px;
}
.eeapx-tune .eeapx-veri-currency {
font-size: 16px;
opacity: 0.9;
}
.eeapx-tune .eeapx-veri-value {
font-size: 40px;
font-weight: 700;
}
/* copy inside card */
.eeapx-tune .eeapx-veri-note {
margin: 4px 0 18px;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
/* button centred & full-width-ish */
.eeapx-tune .eeapx-veri-btn {
width: 100%;
justify-content: center;
margin-bottom: 12px;
}
.eeapx-tune .eeapx-veri-small {
margin: 0;
font-size: 12px;
line-height: 1.5;
color: rgba(250, 252, 255, 0.9);
}
/* ---------------- Documents section (new names only) ---------------- */
.eeapx-tune .eeapx-docs-head {
margin-top: 18px;
margin-bottom: 10px;
}
.eeapx-tune .eeapx-docs-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #f6f8ff;
}
.eeapx-tune .eeapx-docs-sub {
display: block;
margin-top: 4px;
font-size: 12px;
color: rgba(230, 236, 255, 0.8);
}
.eeapx-tune .eeapx-docs-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: flex-start;
margin-top: 12px;
}
.eeapx-tune .eeapx-docs-rowtitle {
font-size: 13px;
font-weight: 600;
color: #f5f7ff;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.eeapx-tune .eeapx-docs-req {
color: #ffd36b;
margin-left: 4px;
}
.eeapx-tune .eeapx-docs-editname {
margin-bottom: 6px;
}
.eeapx-tune .eeapx-docs-drop {
display: flex;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(10, 16, 34, 0.7);
border: 1px dashed rgba(178, 192, 255, 0.45);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.eeapx-tune .eeapx-docs-drop:hover {
border-color: rgba(178, 192, 255, 0.85);
background: rgba(12, 20, 44, 0.8);
}
.eeapx-tune .eeapx-docs-thumb {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 10px;
flex: 0 0 auto;
}
.eeapx-tune .eeapx-docs-thumb--placeholder {
width: 64px;
height: 64px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #e7ebff;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.eeapx-tune .eeapx-docs-meta {
flex: 1;
min-width: 0;
}
.eeapx-tune .eeapx-docs-meta-top {
font-size: 13px;
color: #f0f3ff;
display: flex;
justify-content: space-between;
gap: 8px;
font-weight: 500;
}
.eeapx-tune .eeapx-docs-status {
font-size: 11px;
color: #cbe2ff;
opacity: 0.9;
}
.eeapx-tune .eeapx-docs-meta-bottom {
margin-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.eeapx-tune .eeapx-docs-meta-sub {
font-size: 11px;
color: rgba(220, 226, 255, 0.75);
}
.eeapx-tune .eeapx-docs-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 18px;
}
.eeapx-tune .eeapx-docs-addbtn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.eeapx-tune .eeapx-docs-note {
margin-top: 10px;
font-size: 11px;
color: rgba(220, 226, 255, 0.7);
}
/* ===== Proper layer (no clash) ===== */
.eeappr-root {
position: relative;
}
/* ---------- Header cluster ---------- */
.eeappr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 12px;
gap: 16px;
position: relative;
margin-bottom: 12px;
}
.eeappr-header-left {
width: 120px;
} /* spacer to help center title */
.eeappr-header-right {
display: flex;
align-items: center;
gap: 10px;
min-width: 120px;
justify-content: flex-end;
}
.eeappr-header-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
flex: 1;
}
.eeappr-title {
margin: 0;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.04em;
color: linear-gradient(
90deg,
#3b82f6 0%,
#020617 65%,
#020617 100%
); /* light mode */
}
/* dark mode title */
[data-eeap-theme="dark"] .eeappr-title {
color: linear-gradient(
90deg,
#3b82f6 0%,
#020617 65%,
#020617 100%
) !important;
text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.eeappr-title-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.eeappr-title {
margin: 0;
font-size: 26px;
font-weight: 700;
letter-spacing: 0.03em;
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%, #020617 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.eeapx-id-chip {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 26px; /* increased padding */
border-radius: 999px;
/* SAME GRADIENT YOU USE FOR STATUS BADGE */
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%, #020617 100%);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
white-space: nowrap; /* prevents wrapping */
}
.eeapx-id-label {
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.05em;
}
.eeapx-id-value {
color: #fff;
font-size: 15px;
font-weight: 700;
}
.eeappr-sub {
margin-top: 4px;
font-size: 14px;
opacity: 0.85;
color: darkblue;
}
.eeappr-header-right {
display: flex;
align-items: center;
gap: 16px;
}
.eeappr-id-chip {
padding: 8px 20px;
border-radius: 999px;
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%, #020617 100%);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
display: flex;
align-items: center;
gap: 10px;
color: white;
}
.eeappr-id-label {
opacity: 0.7;
font-size: 12px;
}
.eeappr-id-value {
font-weight: 600;
font-size: 14px;
}
.eeappr-theme-toggle {
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%);
border: none;
color: white;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 18px;
cursor: pointer;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.eeappr-hero-orb {
width: 42px;
height: 42px;
background: linear-gradient(135deg, #4f46e5, #9333ea, #3b82f6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5);
}
.eeappr-steps {
display: flex;
justify-content: center;
}
/* ---------- Reusable badge gradient (use for ID + toggle now, future badges later) ---------- */
.eeappr-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #3b82f6 0%, #020617 65%, #020617 100%);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.75);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
}
/* ID chip */
.eeappr-idchip {
font-size: 12px;
letter-spacing: 0.06em;
}
.eeappr-idlabel {
opacity: 0.85;
font-weight: 600;
}
.eeappr-idvalue {
font-weight: 700;
}
/* Theme toggle: keep same badge look but circular */
.eeappr-toggle {
width: 38px;
height: 38px;
padding: 0;
justify-content: center;
cursor: pointer;
border: none;
font-size: 16px;
line-height: 1;
}
/* ---------- Textarea visibility + feel ---------- */
.eeappr-textarea-group .form-label {
font-weight: 600;
}
/* Ensure typed text is visible (fix bluish/low-contrast issue) */
.eeappr-textarea {
color: #0b1220 !important; /* light */
background: rgba(255, 255, 255, 0.9);
}
[data-eeap-theme="dark"] .eeappr-textarea {
color: #eef3ff !important; /* dark */
background: rgba(7, 12, 22, 0.55);
border-color: rgba(255, 255, 255, 0.12);
}
/* ---------- Compact preview ---------- */
.eeappr-preview {
margin-top: 4px;
opacity: 0.9;
}
/* ---------- Documents section ---------- */
.eeappr-docs-head {
margin-top: 12px;
margin-bottom: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.eeappr-docs-title {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.eeappr-docs-sub {
font-size: 12px;
opacity: 0.8;
color: white;
}
.eeappr-docs-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: flex-start;
margin-top: 10px;
}
.eeappr-docs-rowtitle {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.eeappr-docs-req {
color: #f87171;
font-weight: 700;
}
.eeappr-docs-opt {
font-size: 12px;
opacity: 0.75;
}
.eeappr-docs-editname {
margin-bottom: 6px;
}
.eeappr-docs-drop {
display: flex;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.16);
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
}
[data-eeap-theme="light"] .eeappr-docs-drop {
border: 1px dashed rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.65);
}
.eeappr-docs-thumb {
width: 52px;
height: 52px;
border-radius: 10px;
object-fit: cover;
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
}
.eeappr-docs-thumb--placeholder {
font-size: 18px;
}
.eeappr-docs-meta {
flex: 1;
min-width: 0;
}
.eeappr-docs-meta-top {
display: flex;
gap: 8px;
align-items: center;
font-weight: 600;
font-size: 13px;
}
.eeappr-docs-status {
font-size: 11px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
color: #22c55e;
font-weight: 700;
}
.eeappr-docs-meta-bottom {
display: flex;
justify-content: space-between;
margin-top: 3px;
font-size: 12px;
opacity: 0.85;
}
.eeappr-docs-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 22px;
}
.eeappr-docs-addbtn {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
border: 1px solid rgba(59, 130, 246, 0.35);
}
.eeappr-docs-note {
margin-top: 8px;
font-size: 12px;
opacity: 0.8;
}
/* ---------- Optional: make SelectField dropdown text stay readable in both modes ---------- */
/* This is intentionally scoped to your new wrapper only */
.eeappr-root select,
.eeappr-root .select2-container--default .select2-selection__rendered {
color: inherit;
}
[data-eeap-theme="dark"] .eeappr-root select {
background-color: rgba(7, 12, 22, 0.75);
color: #eef3ff;
}
/* ---------- Header cluster (new names) ---------- */
.eeappr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
padding-bottom: 16px;
gap: 24px;
}
.eeappr-header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.eeappr-header-title {
margin: 0;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
}
.eeappr-header-subtitle {
margin: 0;
font-size: 16px;
font-weight: 600;
opacity: 0.85;
}
.eeappr-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.eeappr-id-label {
font-size: 11px;
opacity: 0.7;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.eeappr-id-value {
font-size: 12px;
font-weight: 700;
}
.eeappr-hero-orb {
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #1b4fd6 0%, #7b2cff 100%);
color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* ---------- Textarea safety ---------- */
.eeappr-textarea {
color: inherit !important;
background: rgba(255, 255, 255, 0.03) !important;
}
[data-eeap-theme="dark"] .eeappr-textarea {
color: #fff !important;
}
[data-eeap-theme="light"] .eeappr-textarea {
color: #0b1220 !important;
}
[data-eeap-theme="light"] .eeappr-id-value {
font-size: 12px;
font-weight: 700;
color: white;
}
/* Light mode: make Description match the white input box look */
[data-eeap-theme="light"] .eeappr-panel .eeappr-textarea,
[data-eeap-theme="light"] .eeappr-panel textarea.eeappr-textarea {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid rgba(10, 20, 40, 0.2) !important;
border-radius: 8px; /* match TextField radius */
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
}
/* Light mode placeholder for textarea */
[data-eeap-theme="light"] .eeappr-panel .eeappr-textarea::placeholder {
color: rgba(15, 23, 42, 0.6) !important;
}
/* Improve form label visibility in light mode */
[data-eeap-theme="light"] .eeap-panel .form-label {
color: #1e293b !important;
font-weight: 600;
}
/* Improve form control visibility in light mode */
[data-eeap-theme="light"] .eeap-panel .form-control {
background-color: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(0, 0, 0, 0.2) !important;
color: #0f172a !important;
}
[data-eeap-theme="light"] .eeap-panel .form-control::placeholder {
color: rgba(15, 23, 42, 0.55) !important;
}
/* Keep dark mode textarea glassy (no change needed, but safe guard) */
/* [data-eeap-theme="dark"] .eeappr-panel .eeappr-textarea {
background: rgba(8, 14, 26, 0.55) !important;
color: #fff !important;
} */
/* ---------- Docs ---------- */
.eeappr-docs-head {
margin-top: 18px;
margin-bottom: 6px;
}
.eeappr-docs-title {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.eeappr-docs-sub {
font-size: 12px;
opacity: 0.8;
}
.eeappr-docs-grid2 {
margin-top: 20px;
gap: 16px;
align-items: start;
}
.eeappr-docs-cell {
padding-top: 8px;
display: flex;
flex-direction: column;
height: 100%;
}
.eeappr-docs-cell--add {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.eeappr-docs-cell--add .eeappr-docs-rowtitle {
margin-bottom: 10px;
}
.eeappr-docs-rowtitle {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.eeappr-docs-req {
color: #ef4444;
margin-left: 6px;
}
.eeappr-docs-opt {
font-size: 11px;
opacity: 0.7;
margin-left: 6px;
}
.eeappr-docs-drop {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(2, 6, 23, 0.55);
cursor: pointer;
backdrop-filter: blur(6px);
}
.eeappr-docs-thumb {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
}
.eeappr-docs-thumb--placeholder {
display: grid;
place-items: center;
font-size: 20px;
font-weight: 700;
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.eeappr-image-remove-btn {
position: absolute;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff4444;
color: white;
border: none;
font-size: 10px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.2s ease;
}
.eeappr-image-remove-btn:hover {
background: #cc3333;
transform: scale(1.1);
}
.eeappr-view-all-btn {
margin-left: 8px;
padding: 4px 8px;
border-radius: 4px;
background: #3b82f6;
color: white;
border: none;
font-size: 11px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.eeappr-view-all-btn:hover {
background: #2563eb;
}
.eeappr-docs-meta {
flex: 1;
min-width: 0;
}
.eeappr-docs-meta-top {
font-size: 12px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.eeappr-docs-meta-bottom {
margin-top: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.eeappr-docs-meta-sub {
font-size: 11px;
opacity: 0.75;
}
.eeappr-docs-status {
font-size: 11px;
color: #22c55e;
font-weight: 600;
text-align: center;
}
.eeappr-docs-addwrap {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 8px;
width: 100%;
}
.eeappr-docs-addbtn--big {
width: 44px;
height: 44px;
border-radius: 999px;
font-size: 20px;
}
.eeappr-docs-addmenu {
position: absolute;
top: 52px;
left: 0;
min-width: 190px;
background: rgba(2, 6, 23, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
z-index: 20;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
}
.eeappr-docs-addmenu button {
width: 100%;
text-align: left;
padding: 8px 10px;
border-radius: 8px;
background: transparent;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
}
.eeappr-docs-addmenu button:hover {
background: rgba(59, 130, 246, 0.15);
}
.eeappr-docs-addhint {
font-size: 12px;
opacity: 0.75;
}
.eeappr-docs-row--extra {
margin-top: 14px;
display: flex;
gap: 8px;
}
.eeappr-docs-main {
flex: 1;
}
.eeappr-docs-editname {
margin: 6px 0;
}
.eeappr-docs-actions {
display: flex;
align-items: flex-start;
}
.eeappr-docs-note {
margin-top: 8px;
font-size: 11px;
opacity: 0.75;
}
/* responsive */
@media (max-width: 768px) {
.eeappr-docs-grid2 {
grid-template-columns: 1fr;
}
} /* ---------- Header cluster (new names) ---------- */
.eeappr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32px;
padding-bottom: 16px;
gap: 24px;
}
.eeappr-header-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.eeappr-header-title {
margin: 0;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
}
.eeappr-header-subtitle {
margin: 0;
font-size: 16px;
font-weight: 600;
opacity: 0.85;
}
.eeappr-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.eeappr-id-label {
font-size: 11px;
opacity: 0.7;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.eeappr-id-value {
font-size: 12px;
font-weight: 700;
}
.eeappr-hero-orb {
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #1b4fd6 0%, #7b2cff 100%);
color: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* ---------- Textarea safety ---------- */
.eeappr-textarea {
color: inherit !important;
background: rgba(255, 255, 255, 0.03) !important;
}
[data-eeap-theme="dark"] .eeappr-textarea {
color: #fff !important;
}
[data-eeap-theme="dark"] .eeappr-docs-addhint {
font-size: 12px;
opacity: 0.75;
color: white;
}
[data-eeap-theme="dark"] .eeappr-docs-meta-sub {
font-size: 11px;
opacity: 0.75;
color: white;
}
[data-eeap-theme="dark"] .eeappr-docs-meta-sub {
font-size: 11px;
opacity: 0.75;
color: white;
}
[data-eeap-theme="light"] .eeappr-textarea {
color: #0b1220 !important;
}
[data-eeap-theme="light"] .eeappr-docs-thumb--placeholder {
display: grid;
place-items: center;
font-size: 20px;
font-weight: 700;
background: rgba(255, 255, 255, 0.06);
color: #02030a;
}
[data-eeap-theme="light"] .eeappr-id-label {
font-size: 11px;
opacity: 0.7;
letter-spacing: 0.08em;
text-transform: uppercase;
color: white;
}
/* ---------- Docs ---------- */
.eeappr-docs-head {
margin-top: 18px;
margin-bottom: 6px;
}
.eeappr-docs-title {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.eeappr-docs-sub {
font-size: 12px;
opacity: 0.8;
}
.eeappr-docs-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 8px;
}
.eeappr-docs-cell {
min-width: 0;
}
.eeappr-docs-cell--add {
display: flex;
flex-direction: column;
gap: 8px;
}
.eeappr-docs-rowtitle {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.eeappr-docs-req {
color: #ef4444;
margin-left: 6px;
}
.eeappr-docs-opt {
font-size: 11px;
opacity: 0.7;
margin-left: 6px;
}
.eeappr-docs-drop {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(2, 6, 23, 0.55);
cursor: pointer;
backdrop-filter: blur(6px);
}
.eeappr-docs-thumb {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
}
.eeappr-docs-thumb--placeholder {
display: grid;
place-items: center;
font-size: 20px;
font-weight: 700;
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.eeappr-docs-meta {
flex: 1;
min-width: 0;
}
.eeappr-docs-meta-sub {
font-size: 12px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.eeappr-docs-meta-bottom {
margin-top: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.eeappr-docs-meta-sub {
font-size: 11px;
opacity: 0.75;
}
.eeappr-docs-status {
font-size: 11px;
color: #22c55e;
font-weight: 600;
}
.eeappr-docs-addwrap {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 8px;
width: 100%;
}
.eeappr-docs-addbtn--big {
width: 44px;
height: 44px;
border-radius: 999px;
font-size: 20px;
}
.eeappr-docs-addmenu {
position: absolute;
top: 52px;
left: 0;
min-width: 190px;
background: rgba(2, 6, 23, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
z-index: 20;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
}
.eeappr-docs-addmenu button {
width: 100%;
text-align: left;
padding: 8px 10px;
border-radius: 8px;
background: transparent;
border: none;
color: #fff;
font-size: 13px;
cursor: pointer;
}
.eeappr-docs-addmenu button:hover {
background: rgba(59, 130, 246, 0.15);
}
.eeappr-docs-addhint {
font-size: 12px;
opacity: 0.75;
}
.eeappr-docs-row--extra {
margin-top: 14px;
display: flex;
gap: 8px;
}
.eeappr-docs-main {
flex: 1;
}
.eeappr-docs-editname {
margin: 6px 0;
}
.eeappr-docs-actions {
display: flex;
align-items: flex-start;
}
.eeappr-docs-note {
margin-top: 8px;
font-size: 11px;
opacity: 0.75;
}
/* responsive */
@media (max-width: 768px) {
.eeappr-docs-grid2 {
grid-template-columns: 1fr;
}
}
/* ========= EE Navbar Theme Polish (new safe names) ========= */
.ee-navx-container {
position: relative;
z-index: 5;
}
/* Dark mode nav text + arrows */
[data-eeap-theme="dark"] #topnav.ee-navx-dark .navigation-menu > li > a,
[data-eeap-theme="dark"]
#topnav.ee-navx-dark
.navigation-menu
.sub-menu-item
> a,
[data-eeap-theme="dark"]
#topnav.ee-navx-dark
.navigation-menu
.ee-dropdown-trigger {
color: #ffffff !important;
opacity: 0.92;
}
[data-eeap-theme="dark"] #topnav.ee-navx-dark .navigation-menu > li > a:hover {
opacity: 1;
}
/* Dropdown background/text for dark mode */
[data-eeap-theme="dark"] #topnav.ee-navx-dark .submenu {
background: rgba(8, 12, 20, 0.98) !important;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
[data-eeap-theme="dark"] #topnav.ee-navx-dark .submenu a {
color: #ffffff !important;
}
/* Wallet pill contrast */
.ee-navx-wallet {
color: inherit;
font-weight: 600;
}
/* Light mode stays as-is (no overrides) */
[data-eeap-theme="dark"] .dropdown-menu,
[data-eeap-theme="dark"] .eeap-dropdown,
[data-eeap-theme="dark"] .eeappr-docs-addmenu {
background-color: #1b2431 !important;
color: #b6c6e3 !important;
border-color: #384d69 !important;
}
[data-eeap-theme="dark"] .dropdown-menu a,
[data-eeap-theme="dark"] .eeappr-docs-addmenu button {
color: #b6c6e3 !important;
}
[data-eeap-theme="dark"] .nice-select {
background-color: #1b2431 !important;
color: #b6c6e3 !important;
border-color: #384d69 !important;
}
.eeap-page .eeap-header h1 {
font-size: 28px;
letter-spacing: 0.2px;
}
.eeap-page .eeap-grid.eeap-grid-two {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.eeap-page .eeap-grid.eeap-grid-two .eeap-panel {
background: #ffffff;
border: 1px solid #e6e8f0;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.eeap-page .eeap-grid.eeap-grid-two .eeap-panel:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
border-color: #d2d6e3;
}
.eeap-page .eeap-grid.eeap-grid-two .eeap-panel > div:first-child {
font-weight: 600;
font-size: 18px;
color: #1b2a4e;
}
.eeap-page .eeap-grid.eeap-grid-two .eeap-panel .apx-link {
display: inline-flex;
align-items: center;
margin-top: 6px;
color: #31acd2;
font-weight: 500;
text-decoration: none;
}
.eeap-page .eeap-grid.eeap-grid-two .eeap-panel .apx-link:hover {
text-decoration: underline;
}
[data-eeap-theme="dark"] .eeap-page .eeap-grid.eeap-grid-two .eeap-panel {
background: #1b2431;
border-color: #384d69;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-eeap-theme="dark"]
.eeap-page
.eeap-grid.eeap-grid-two
.eeap-panel
> div:first-child {
color: #dfe9fe;
}
[data-eeap-theme="dark"]
.eeap-page
.eeap-grid.eeap-grid-two
.eeap-panel
.apx-link {
color: #31acd2;
}
.vp-hero {
text-align: center;
margin-bottom: 24px;
position: relative;
padding-top: 40px;
}
.vp-title {
font-size: 32px;
margin: 0;
}
.vp-sub {
color: #8094ae;
margin-top: 8px;
}
.vp-theme-toggle {
position: absolute;
right: 0;
top: 0;
background: transparent;
border: 0;
font-size: 18px;
cursor: pointer;
}
.vp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
padding-top: 40px;
}
.vp-card {
background: #ffffff;
border: 1px solid #e6e8f0;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vp-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.vp-icon-circle {
width: 72px;
height: 72px;
margin: 0 auto 12px auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f7f9fc;
border: 1px solid #e6e8f0;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
color: #1b2a4e;
}
.vp-logo-circle {
max-height: 40px;
max-width: 64px;
}
.vp-name {
font-weight: 600;
font-size: 16px;
color: #1b2a4e;
margin-bottom: 6px;
}
.vp-link {
color: #31acd2;
font-weight: 500;
text-decoration: none;
}
.vp-link:hover {
text-decoration: underline;
}
[data-eeap-theme="dark"] .vp-card {
background: #1b2431;
border-color: #384d69;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-eeap-theme="dark"] .vp-name {
color: #dfe9fe;
}
[data-eeap-theme="dark"] .vp-sub {
color: #b6c6e3;
}
[data-eeap-theme="dark"] .vp-link {
color: #31acd2;
}
[data-eeap-theme="dark"] .vp-icon-circle {
background: #11171f;
border-color: #384d69;
color: #dfe9fe;
}
/* logo switching */
.vp-logo-circle.light-version {
display: inline-block;
}
.vp-logo-circle.dark-version {
display: none;
}
[data-eeap-theme="dark"] .vp-logo-circle.light-version {
display: none;
}
[data-eeap-theme="dark"] .vp-logo-circle.dark-version {
display: inline-block;
}
.dark-mode .dropzone .dz-message,
.dark-mode .dropzone .dz-message span,
.dark-mode .dropzone .dz-message-text,
.dark-mode .dropzone .dz-message-text span {
color: #dfe9fe !important;
}
.dark-mode .data-label {
color: #dfe9fe !important;
}
.eeappr-docs-drop .eeap-label {
font-weight: 600;
}
.eeappr-docs-grid3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-top: 14px;
align-items: start;
}
.eeappr-docs-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
align-items: start;
}
.eeap-grid-two {
grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 768px) {
.eeap-grid-two {
grid-template-columns: 1fr;
}
}
.eeappr-docs-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 768px) {
.eeappr-docs-grid2 {
grid-template-columns: 1fr;
}
}
.eeappr-docs-grid3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 992px) {
.eeappr-docs-grid3 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.eeappr-docs-grid3 {
grid-template-columns: 1fr;
}
}
.eeappr-docs-rowtitle {
display: flex;
align-items: center;
gap: 6px;
}
.eeappr-docs-info-btn {
padding: 4px 8px;
} /* ================================
Details cards like “Product Details”
================================ */
.mpd-basic-wrap .mpd-basic-card {
border: 1px solid #eef0f5;
border-radius: 14px;
padding: 14px 16px;
background: #fff;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
margin-bottom: 14px;
}
.mpd-basic-wrap .mpd-basic-head {
margin-bottom: 10px;
}
.mpd-basic-wrap .mpd-basic-title {
margin: 0;
font-size: 14px;
font-weight: 900;
color: #1e40af;
border-color: #1e40af;
}
.mpd-basic-wrap .mpd-basic-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 26px;
}
@media (max-width: 767px) {
.mpd-basic-wrap .mpd-basic-grid {
grid-template-columns: 1fr;
}
}
/* Row = label left, value right (same line) */
.mpd-basic-wrap .mpd-basic-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
/* Label */
/* Value */
.mpd-basic-wrap .mpd-basic-value {
margin-left: auto;
text-align: right;
font-size: 12.5px;
font-weight: 900;
color: #0f172a;
line-height: 1.2;
white-space: nowrap; /* keeps value on same line */
}
/* If values can be long (like address), allow wrap for only those */
.mpd-basic-wrap .mpd-basic-value.mpd-wrap {
white-space: normal;
word-break: break-word;
}
/* ================================
Featured / Recent Property widget
================================ */
.mpd-featured {
margin-top: 14px;
overflow: hidden;
}
.mpd-featured-head {
padding: 12px 14px;
border-bottom: 1px solid #eef0f5;
display: flex;
justify-content: space-between;
align-items: center;
}
.mpd-featured-title {
font-size: 13px;
font-weight: 900;
color: #0f172a;
}
.mpd-featured-link {
border: none;
background: transparent;
font-size: 12px;
font-weight: 800;
color: #1d4ed8;
cursor: pointer;
padding: 0;
}
.mpd-featured-body {
display: flex;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
}
.mpd-featured-imgwrap {
width: 62px;
height: 62px;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
flex: 0 0 auto;
background: #f1f5f9;
}
.mpd-featured-imgwrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mpd-featured-info {
flex: 1;
min-width: 0;
}
.mpd-featured-name {
font-size: 13px;
font-weight: 900;
color: #0f172a;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpd-featured-sub {
font-size: 12px;
font-weight: 700;
color: #64748b;
margin-bottom: 3px;
}
.mpd-featured-footer {
padding: 0 14px 14px;
}
/* ---------- DETAILS ONLY (scoped) ---------- */
.mpd-basic-wrap .mpd-basic-card {
border: 1px solid #eef0f5;
border-radius: 14px;
background: #fff;
padding: 12px 14px;
margin-bottom: 12px;
}
.mpd-basic-wrap .mpd-basic-head {
margin-bottom: 8px;
}
.mpd-basic-wrap .mpd-basic-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 18px;
}
@media (max-width: 767px) {
.mpd-basic-wrap .mpd-basic-grid {
grid-template-columns: 1fr;
}
}
.mpd-basic-wrap .mpd-basic-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.mpd-basic-wrap .mpd-basic-label {
min-width: 0;
font-size: 12px;
font-weight: 700;
color: black;
line-height: 1.2;
}
.mpd-basic-wrap .mpd-basic-value {
margin-left: auto;
text-align: right;
font-size: 12.5px;
font-weight: 900;
color: #0f172a;
line-height: 1.2;
white-space: nowrap;
}
/* only for long values */
.mpd-basic-wrap .mpd-basic-value.mpd-wrap {
white-space: normal;
word-break: break-word;
}
/* Page base */
.mpd-page {
background: #f7f8fb;
}
.mpd-page .container {
position: relative;
}
/* Title bar */
.mpd-titlebar {
margin: 10px 0 16px;
}
.mpd-titlewrap {
background: #fff;
border: 1px solid #eef0f5;
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
.mpd-title-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.mpd-title {
margin: 0;
font-size: 20px;
font-weight: 800;
color: #0f172a;
line-height: 1.25;
}
.mpd-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
.mpd-pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: rgba(34, 197, 94, 0.12);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.18);
}
.mpd-pill-soft {
background: rgba(59, 130, 246, 0.1);
color: #1d4ed8;
border: 1px solid rgba(59, 130, 246, 0.18);
}
.mpd-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #64748b;
}
.mpd-address {
margin-top: 10px;
color: #334155;
font-size: 13px;
display: flex;
gap: 8px;
align-items: center;
}
.mpd-brief {
margin-top: 10px;
color: #475569;
font-size: 13px;
line-height: 1.55;
}
/* Cards */
.mpd-card {
background: #fff;
border: 1px solid #eef0f5;
border-radius: 14px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.mpd-card-body {
padding: 14px;
}
.mpd-card-body-tight {
padding: 10px;
}
/* Hero grid */
.mpd-hero-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 16px;
align-items: start;
}
@media (max-width: 991px) {
.mpd-hero-grid {
grid-template-columns: 1fr;
}
}
/* ===== SUPERSEDED — disabled =====
This whole block (and the near-duplicate copy further down this file)
was an earlier attempt at fixing the react-slick gallery, now fully
replaced by the hand-built carousel + rules in src/ee-professional-theme.css.
It's disabled rather than deleted so the history stays visible.
THIS is what was actually causing the image to render narrower than its
card and centered with gaps on both sides, across every previous round
of fixes in src/ee-professional-theme.css — none of those ever touched
this file, so this rule kept winning unopposed:
@media (min-width: 992px) {
.mpd-gallery-frame { max-width: 720px; margin: 0 auto; }
}
Original block, disabled below:
.mpd-gallery-wrap {
position: relative;
width: 100%;
}
.mpd-gallery-frame {
width: 100%;
height: 420px;
overflow: hidden;
border-radius: 16px;
background: #0b1220;
}
.mpd-gallery-frame .slick-slider,
.mpd-gallery-frame .slick-list,
.mpd-gallery-frame .slick-track {
height: 100%;
}
.mpd-gallery-frame .slick-slide {
height: 100%;
}
.mpd-gallery-frame .slick-slide > div {
height: 100%;
}
.mpd-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mpd-gallery-wrap img {
max-width: 100%;
}
.mpd-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.12);
}
.mpd-gallery-wrap {
position: relative;
}
.mpd-gallery-frame {
width: 100%;
height: 420px;
}
.mpd-gallery-frame-MAXWIDTH-DISABLED {
max-width: 720px;
margin: 0 auto;
}
.mpd-gallery-wrap .slick-list {
height: 420px;
}
.mpd-thumbbtn {
display: block;
width: 100px;
height: 56px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.mpd-nav-DISABLED {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
background: transparent;
border: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
cursor: pointer;
font-size: 36px;
line-height: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.mpd-nav-DISABLED.prev {
left: 10px;
}
.mpd-nav-DISABLED.next {
right: 10px;
}
===== end disabled block ===== */
/* Owner card */
.mpd-owner-row {
display: flex;
gap: 14px;
align-items: center;
}
.mpd-owner-avatar {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
background: #f1f5f9;
border: 1px solid #e2e8f0;
flex: 0 0 auto;
}
.mpd-owner-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mpd-owner-name {
font-weight: 800;
color: #0f172a;
font-size: 14px;
}
.mpd-owner-desc {
margin-top: 4px;
font-size: 12px;
color: #64748b;
line-height: 1.4;
}
/* Sticky right column */
.mpd-sticky {
position: sticky;
top: 90px;
}
@media (max-width: 991px) {
.mpd-sticky {
position: static;
top: auto;
}
}
/* Invest card */
.mpd-invest-card {
padding: 0;
}
.mpd-invest-head {
padding: 14px 16px;
border-bottom: 1px solid #eef0f5;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
color: #fff;
}
.mpd-invest-title {
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
}
.mpd-progress {
margin-top: 12px;
}
.mpd-progress-top {
display: flex;
justify-content: space-between;
font-size: 12px;
opacity: 0.95;
}
.mpd-progress-bar {
margin-top: 8px;
height: 10px;
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
overflow: hidden;
}
.mpd-progress-fill {
height: 100%;
background: rgba(255, 255, 255, 0.9);
border-radius: 999px;
}
.mpd-progress-sub {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-top: 8px;
opacity: 0.95;
}
.mpd-invest-body {
padding: 12px 16px 16px;
}
/* Qty control polish */
.mpd-qty {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 6px;
background: #f8fafc;
}
.mpd-qty-btn {
border-radius: 10px;
}
.mpd-qty-input {
border-radius: 10px;
}
/* Table inside card */
.mpd-cart-table .table td {
vertical-align: middle;
}
.mpd-cart-table .table tbody tr td:first-child {
color: #475569;
font-weight: 600;
}
.mpd-cart-table .table tbody tr td:last-child {
text-align: right;
font-weight: 700;
color: #0f172a;
}
/* CTA spacing */
.mpd-cta {
padding-top: 14px !important;
margin-top: 6px !important;
}
.mpd-funded {
font-size: 14px;
font-weight: 800;
color: #0f172a;
}
/* Details below */
.mpd-details-wrap {
margin-top: 16px;
}
.mpd-section-title {
margin-top: 8px;
}
.mpd-features ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
@media (max-width: 767px) {
.mpd-features ul {
grid-template-columns: 1fr;
}
}
/* Make list items look cleaner inside the grid */
.mpd-features li {
margin-bottom: 0 !important;
}
.mpd-kv ul li a {
background: #f8fafc;
border: 1px solid #eef0f5;
border-radius: 12px;
padding: 10px 12px;
}
.mpd-kv ul li a span {
font-weight: 800;
}
/* ===============================
PropertyStatus (scoped) – does NOT affect Details page
Uses only .mps-* classes
================================= */
.mps-wrap {
margin-top: 14px;
}
.mps-card {
border: 1px solid #eef0f5;
border-radius: 14px;
background: #fff;
padding: 12px 14px;
margin-bottom: 12px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.mps-head {
margin-bottom: 8px;
}
.mps-title {
margin: 0;
font-size: 14px;
font-weight: 900;
color: #1e40af;
}
.mps-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 18px;
}
@media (max-width: 767px) {
.mps-grid {
grid-template-columns: 1fr;
}
}
.mps-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.mps-label {
min-width: 0;
font-size: 12px;
font-weight: 700;
color: #0f172a;
opacity: 0.75;
line-height: 1.2;
}
.mps-value {
margin-left: auto;
text-align: right;
font-size: 12.5px;
font-weight: 900;
color: #0f172a;
line-height: 1.2;
white-space: nowrap;
}
/* Only for long values like address/email */
.mps-value.mps-wraptext {
white-space: normal;
word-break: break-word;
}
/* Optional: safer image spacing (does not move buttons) */
.mps-imggrid {
margin-top: 10px;
}
.mps-imggrid img {
border-radius: 10px;
border: 1px solid #eef0f5;
} /* ==============================
PropertyStatus V2 (clash-proof)
All NEW classnames: .mpsx-*
Does NOT touch details.js CSS
================================= */
.mpsx-wrap {
margin-top: 10px;
}
/* Main two-column layout like details page */
.mpsx-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 16px;
align-items: start;
}
@media (max-width: 991px) {
.mpsx-grid {
grid-template-columns: 1fr;
}
}
/* Left / Right columns */
.mpsx-left {
min-width: 0;
}
.mpsx-right {
min-width: 0;
}
.mpsx-sticky {
position: sticky;
top: 90px;
}
@media (max-width: 991px) {
.mpsx-sticky {
position: static;
top: auto;
}
}
/* Cards */
.mpsx-card {
border: 1px solid #eef0f5;
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.mpsx-card-body {
padding: 12px 14px;
}
.mpsx-card + .mpsx-card {
margin-top: 12px;
}
/* Basic info top */
.mpsx-basic-title {
font-size: 14px;
font-weight: 900;
color: #1e40af;
margin: 0 0 10px;
}
.mpsx-name {
font-weight: 900;
margin: 0 0 6px;
}
.mpsx-address {
margin: 0;
color: #334155;
font-size: 13px;
}
/* Image grid */
.mpsx-imggrid {
margin-top: 10px;
}
.mpsx-imggrid img {
border-radius: 10px;
border: 1px solid #eef0f5;
}
/* Detail-style mini cards inside left column */
.mpsx-info-card {
border: 1px solid #eef0f5;
border-radius: 14px;
background: #fff;
padding: 12px 14px;
margin-top: 12px;
}
.mpsx-info-head {
margin-bottom: 8px;
}
.mpsx-info-title {
margin: 0;
font-size: 13px;
font-weight: 900;
color: #1e40af;
}
.mpsx-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 18px;
}
@media (max-width: 767px) {
.mpsx-info-grid {
grid-template-columns: 1fr;
}
}
.mpsx-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.mpsx-label {
min-width: 0;
font-size: 12px;
font-weight: 700;
color: #0f172a;
opacity: 0.72;
line-height: 1.2;
}
.mpsx-value {
margin-left: auto;
text-align: right;
font-size: 12.5px;
font-weight: 900;
color: #0f172a;
line-height: 1.2;
white-space: wrap;
}
.mpsx-value.mpsx-wraptext {
white-space: normal;
word-break: break-word;
}
/* Right action panel */
.mpsx-action-title {
font-size: 14px;
font-weight: 900;
color: #0f172a;
margin: 0 0 8px;
}
.mpsx-action-sub {
font-size: 12px;
color: #64748b;
margin: 0 0 12px;
line-height: 1.4;
}
.mpsx-action-stack {
display: grid;
gap: 10px;
}
/* CRITICAL: button reset only inside this component
This prevents fixed/absolute/height:100vh / weird stretching from global CSS */
.mpsx-action-stack .btn,
.mpsx-action-stack button,
.mpsx-action-stack a {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
height: auto !important;
min-height: 44px !important;
width: 100% !important;
max-width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
}
/* If some theme applies crazy line-height/padding */
.mpsx-action-stack .btn {
padding: 10px 14px !important;
}
.slick-dots li button:before {
content: "";
display: none;
}
.slick-dots li {
opacity: 1;
}
.slick-dots li button {
width: auto;
height: auto;
padding: 0;
}
.mpd-dots {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
margin-top: 12px;
}
.mpd-thumbbtn {
display: block;
width: 100px;
height: 56px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
/* ---------------------------------------------------------
PROPERTY DETAILS – PRETTIER UI (SCOPED)
--------------------------------------------------------- */
.mpd-page.mpd-pretty .mpd-titlebar {
margin-bottom: 14px;
}
.mpd-page.mpd-pretty .mpd-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
}
.mpd-page.mpd-pretty .mpd-badge-green {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.25);
}
.mpd-page.mpd-pretty .mpd-badge-slate {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.1);
}
/* -------- Gallery (main + strip) -------- */
.mpd-page.mpd-pretty .mpd-gal {
position: relative;
}
.mpd-page.mpd-pretty .mpd-gal-main {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #0b1220;
}
.mpd-page.mpd-pretty .mpd-galimg {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.mpd-page.mpd-pretty .mpd-galnav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 46px;
height: 46px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(15, 23, 42, 0.25);
color: #fff;
font-size: 32px;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(8px);
}
.mpd-page.mpd-pretty .mpd-galnav.prev {
left: 12px;
}
.mpd-page.mpd-pretty .mpd-galnav.next {
right: 12px;
}
.mpd-page.mpd-pretty .mpd-galstrip {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 12px 2px 2px 2px;
margin-top: 10px;
scroll-snap-type: x mandatory;
}
.mpd-page.mpd-pretty .mpd-galstrip::-webkit-scrollbar {
height: 8px;
}
.mpd-page.mpd-pretty .mpd-galstrip::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(15, 23, 42, 0.2);
}
.mpd-page.mpd-pretty .mpd-galthumb {
flex: 0 0 auto;
width: 92px;
height: 64px;
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
overflow: hidden;
padding: 0;
cursor: pointer;
scroll-snap-align: start;
}
.mpd-page.mpd-pretty .mpd-galthumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* -------- Owner manager line -------- */
.mpd-page.mpd-pretty .mpd-managedby {
margin-top: 6px;
font-size: 13px;
color: rgba(15, 23, 42, 0.75);
}
.mpd-page.mpd-pretty .mpd-managedby span {
font-weight: 800;
color: rgba(15, 23, 42, 0.95);
}
/* -------- Invest widget: Funding ends in -------- */
.mpd-page.mpd-pretty .mpd-fundline {
margin-top: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(15, 23, 42, 0.03);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.mpd-page.mpd-pretty .mpd-fundline-done {
background: rgba(239, 68, 68, 0.07);
border-color: rgba(239, 68, 68, 0.18);
}
.mpd-page.mpd-pretty .mpd-fundlabel {
font-size: 12px;
font-weight: 700;
color: rgba(15, 23, 42, 0.7);
}
.mpd-page.mpd-pretty .mpd-fundtime {
font-size: 12px;
font-weight: 900;
color: rgba(15, 23, 42, 0.92);
}
/* -------- Revamped details cards -------- */
.mpd-page.mpd-pretty .mpd-dgrid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.mpd-page.mpd-pretty .mpd-dcard {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 16px;
background: #fff;
padding: 14px;
}
.mpd-page.mpd-pretty .mpd-dhead {
margin-bottom: 12px;
}
.mpd-page.mpd-pretty .mpd-dhead-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.mpd-page.mpd-pretty .mpd-dtitle {
font-size: 16px;
font-weight: 900;
color: rgba(15, 23, 42, 0.95);
}
.mpd-page.mpd-pretty .mpd-dsub {
margin-top: 3px;
font-size: 13px;
color: rgba(15, 23, 42, 0.65);
}
.mpd-page.mpd-pretty .mpd-linkbtn {
border: none;
background: transparent;
color: #0b63ff;
font-weight: 800;
font-size: 13px;
cursor: pointer;
padding: 6px 8px;
border-radius: 10px;
}
.mpd-page.mpd-pretty .mpd-linkbtn:hover {
background: rgba(11, 99, 255, 0.06);
}
/* What's in */
.mpd-page.mpd-pretty .mpd-statgrid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 992px) {
.mpd-page.mpd-pretty .mpd-statgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.mpd-page.mpd-pretty .mpd-statgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mpd-page.mpd-pretty .mpd-stat {
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.02);
padding: 10px;
text-align: left;
}
.mpd-page.mpd-pretty .mpd-statico {
font-size: 18px;
margin-bottom: 6px;
}
.mpd-page.mpd-pretty .mpd-statval {
font-weight: 900;
color: rgba(15, 23, 42, 0.95);
font-size: 14px;
line-height: 1.1;
}
.mpd-page.mpd-pretty .mpd-statlbl {
margin-top: 4px;
font-size: 12px;
color: rgba(15, 23, 42, 0.62);
font-weight: 700;
}
.mpd-page.mpd-pretty .mpd-softline {
margin-top: 10px;
font-size: 13px;
color: rgba(15, 23, 42, 0.7);
}
/* Key highlights checklist */
.mpd-page.mpd-pretty .mpd-checklist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin-top: 6px;
}
@media (max-width: 720px) {
.mpd-page.mpd-pretty .mpd-checklist {
grid-template-columns: 1fr;
}
}
.mpd-page.mpd-pretty .mpd-check {
display: flex;
align-items: center;
gap: 10px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
padding: 10px 12px;
}
.mpd-page.mpd-pretty .mpd-tick {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.22);
font-weight: 900;
color: rgba(22, 163, 74, 0.95);
flex: 0 0 auto;
}
.mpd-page.mpd-pretty .mpd-checktxt {
font-weight: 800;
color: rgba(15, 23, 42, 0.88);
font-size: 13px;
}
/* Chips row */
.mpd-page.mpd-pretty .mpd-chiprow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.mpd-page.mpd-pretty .mpd-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.02);
font-size: 12px;
font-weight: 800;
color: rgba(15, 23, 42, 0.8);
}
/* More details accordion */
.mpd-page.mpd-pretty .mpd-accbtn {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
cursor: pointer;
}
.mpd-page.mpd-pretty .mpd-acc-title {
font-size: 15px;
font-weight: 900;
color: rgba(15, 23, 42, 0.95);
}
.mpd-page.mpd-pretty .mpd-acc-caret {
transition: transform 0.18s ease;
font-size: 16px;
color: rgba(15, 23, 42, 0.7);
}
.mpd-page.mpd-pretty .mpd-acc-caret.open {
transform: rotate(180deg);
}
.mpd-page.mpd-pretty .mpd-accbody {
padding-top: 12px;
border-top: 1px dashed rgba(15, 23, 42, 0.14);
margin-top: 10px;
}
.mpd-page.mpd-pretty .mpd-mini + .mpd-mini {
margin-top: 14px;
}
.mpd-page.mpd-pretty .mpd-minititle {
font-size: 13px;
font-weight: 900;
color: rgba(15, 23, 42, 0.92);
margin-bottom: 8px;
}
.mpd-page.mpd-pretty .mpd-minigrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 720px) {
.mpd-page.mpd-pretty .mpd-minigrid {
grid-template-columns: 1fr;
}
}
.mpd-page.mpd-pretty .mpd-minrow {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 14px;
background: rgba(15, 23, 42, 0.02);
padding: 10px 12px;
}
.mpd-page.mpd-pretty .mpd-minlbl {
font-size: 12px;
font-weight: 800;
color: rgba(15, 23, 42, 0.66);
margin-bottom: 4px;
}
.mpd-page.mpd-pretty .mpd-minval {
font-size: 13px;
font-weight: 900;
color: rgba(15, 23, 42, 0.92);
}
.mpd-page.mpd-pretty .mpd-minitext {
font-size: 13px;
color: rgba(15, 23, 42, 0.75);
}
/* =========================
MPD2 – Modern details revamp
========================= */
.mpd2-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e9eef5;
background: #fff;
color: #1b2b4a;
line-height: 1;
}
.mpd2-pill-green {
background: #eaf8ef;
border-color: #cfeedd;
color: #126b3a;
}
.mpd2-pill-gray {
background: #f6f8fb;
border-color: #e9eef5;
color: #3b4a63;
}
.mpd2-video-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e7eef9;
background: linear-gradient(180deg, #ffffff, #f6fbff);
color: #0f2d62;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 22px rgba(15, 26, 44, 0.06);
}
.mpd2-video-cta:hover {
text-decoration: none;
transform: translateY(-1px);
}
.mpd2-video-arrow {
margin-left: 6px;
opacity: 0.75;
}
/* Managed by line */
.mpd2-managedby {
margin-top: 10px;
display: inline-block;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid #e9eef5;
background: #f8fbff;
color: #20314e;
font-weight: 600;
}
/* Countdown block under qty */
.mpd2-countdown-wrap {
margin-top: 12px;
}
.mpd2-countdown {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid #e9eef5;
background: #ffffff;
}
.mpd2-countdown-label {
font-size: 12px;
color: #66768f;
font-weight: 600;
}
.mpd2-countdown-title {
font-size: 14px;
color: #182844;
font-weight: 800;
}
.mpd2-countdown-badge {
display: inline-flex;
align-items: center;
padding: 7px 10px;
border-radius: 999px;
background: #f6f8fb;
border: 1px solid #e9eef5;
font-size: 12px;
font-weight: 700;
color: #35435a;
}
.mpd2-countdown-badge--ended {
background: #fff1f1;
border-color: #ffd6d6;
color: #b42318;
}
/* Details revamp container */
.mpd2-details .mpd-card-body {
padding: 18px;
}
.mpd2-section {
padding: 14px 0;
border-bottom: 1px solid #eef2f7;
}
.mpd2-section:last-child {
border-bottom: none;
}
.mpd2-section-title {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #14233d;
}
.mpd2-section-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Stats grid (modern cards) */
.mpd2-stats-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
.mpd2-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.mpd2-stats-grid {
grid-template-columns: 1fr;
}
}
.mpd2-stat {
display: flex;
gap: 12px;
padding: 14px 14px;
border-radius: 14px;
border: 1px solid #e9eef5;
background: #ffffff;
box-shadow: 0 10px 22px rgba(15, 26, 44, 0.05);
}
.mpd2-stat-ico {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #f6fbff;
border: 1px solid #e7eef9;
color: #1a3a6e;
font-size: 16px;
}
.mpd2-stat-val {
font-size: 16px;
font-weight: 900;
color: #14233d;
line-height: 1.15;
}
.mpd2-stat-lbl {
font-size: 12px;
font-weight: 700;
color: #6a7b96;
margin-top: 4px;
}
/* Chips */
.mpd2-chips {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mpd2-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid #e9eef5;
background: #fff;
color: #233552;
font-weight: 700;
font-size: 13px;
}
.mpd2-chip i {
color: #1a3a6e;
}
/* Amenities */
.mpd2-amen-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 992px) {
.mpd2-amen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.mpd2-amen-grid {
grid-template-columns: 1fr;
}
}
.mpd2-amen {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid #e9eef5;
background: #ffffff;
color: #223454;
font-weight: 700;
}
.mpd2-amen i {
width: 22px;
text-align: center;
color: #1a3a6e;
}
/* More details accordion */
.mpd2-more-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 14px;
border-radius: 14px;
border: 1px solid #e9eef5;
background: #f8fbff;
font-weight: 800;
color: #13233e;
}
.mpd2-more-caret {
transition: transform 0.18s ease;
font-size: 18px;
}
.mpd2-more-caret.open {
transform: rotate(180deg);
}
.mpd2-more-body {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
.mpd2-more-body {
grid-template-columns: 1fr;
}
}
.mpd2-more-card {
padding: 14px 14px;
border-radius: 14px;
border: 1px solid #e9eef5;
background: #fff;
box-shadow: 0 10px 22px rgba(15, 26, 44, 0.05);
}
.mpd2-more-title {
font-size: 14px;
font-weight: 900;
color: #14233d;
margin-bottom: 10px;
}
.mpd2-more-grid {
display: grid;
gap: 10px;
}
.mpd2-more-row {
display: flex;
justify-content: space-between;
gap: 14px;
}
.mpd2-more-lbl {
font-size: 12px;
font-weight: 800;
color: #6a7b96;
}
.mpd2-more-val {
font-size: 13px;
font-weight: 800;
color: #14233d;
text-align: right;
}
.mpd2-wrap {
white-space: normal;
word-break: break-word;
}
/* Gallery fixes: keep arrows visible + prevent overflow
— SUPERSEDED, selectors renamed with -DISABLED-2 to take this whole
block out of effect. See src/ee-professional-theme.css for the current
gallery rules (also see the disabled block earlier in this file, which
had the actual max-width:720px bug). */
.mpd-gallery-wrap-DISABLED-2 {
overflow: hidden;
border-radius: 14px;
}
.mpd-gallery-frame-DISABLED-2 {
width: 100%;
height: 420px;
overflow: hidden;
}
.mpd-gallery-img-DISABLED-2 {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mpd-gallery-wrap-DISABLED-2 .slick-slider,
.mpd-gallery-wrap-DISABLED-2 .slick-list,
.mpd-gallery-wrap-DISABLED-2 .slick-track {
height: 420px;
}
.mpd-gallery-wrap-DISABLED-2 .slick-slider,
.mpd-gallery-wrap-DISABLED-2 .slick-list,
.mpd-gallery-wrap-DISABLED-2 .slick-track,
.mpd-gallery-wrap-DISABLED-2 .slick-slide,
.mpd-gallery-wrap-DISABLED-2 .slick-slide > div,
.mpd-gallery-wrap-DISABLED-2 .image-slide {
height: 420px;
}
.slick-slide-DISABLED-2 > div {
height: 100%;
}
.mpd-gallery-wrap-DISABLED-2 .image-slide {
display: block;
}
.mpd-gallery-wrap-DISABLED-2 .mpd-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mpd-gallery-wrap-DISABLED-2 .slick-slider,
.mpd-gallery-wrap-DISABLED-2 .slick-track,
.mpd-gallery-wrap-DISABLED-2 .slick-slide,
.mpd-gallery-wrap-DISABLED-2 .slick-slide > div,
.mpd-gallery-wrap-DISABLED-2 .image-slide {
height: 420px;
}
.mpd-gallery-wrap-DISABLED-2 .slick-prev,
.mpd-gallery-wrap-DISABLED-2 .slick-next {
z-index: 20;
}
.mpd-nav-DISABLED-2 {
opacity: 1;
}
/* -----------------------------
Property Details UI Revamp (scoped)
----------------------------- */
.mpd2-scope .mpd2-titleRow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.mpd2-scope .mpd2-badgeRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.mpd2-scope .mpd2-badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e9eef7;
background: #f7f9ff;
color: #1f2a44;
line-height: 1;
white-space: nowrap;
}
.mpd2-scope .mpd2-badge.is-ok {
background: #ecfdf3;
border-color: #c9f3d8;
color: #106b3b;
}
.mpd2-scope .mpd2-badge.is-soft {
background: #f4f6ff;
border-color: #e2e7ff;
color: #243b7a;
}
.mpd2-scope .mpd2-badge.is-accent {
background: #eef6ff;
border-color: #d7e9ff;
color: #0b4ea2;
}
.mpd2-scope .mpd2-badge.is-pill {
background: #f7f7fb;
border-color: #ececf6;
color: #344155;
}
.mpd2-scope .mpd2-videoCta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid #dbe8ff;
background: #f3f8ff;
color: #0b4ea2;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.mpd2-scope .mpd2-videoCta:hover {
filter: brightness(0.98);
}
.mpd2-scope .mpd2-videoDot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #0b4ea2;
box-shadow: 0 0 0 4px rgba(11, 78, 162, 0.12);
}
.mpd2-scope .mpd2-arrow {
font-weight: 900;
}
/* brief */
.mpd2-scope .mpd2-brief {
margin-top: 10px;
}
/* -----------------------------
Gallery (fixed height, arrows visible, no overflow)
----------------------------- */
.mpd2-scope .mpd2-galleryCard {
overflow: hidden;
border-radius: 16px;
}
.mpd2-scope .mpd2-galleryFrame {
position: relative;
width: 100%;
height: 420px;
}
.mpd2-scope .mpd2-galSlide {
position: relative;
width: 100%;
height: 420px;
}
.mpd2-scope .mpd2-galImg {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.mpd2-scope .mpd2-galCount {
position: absolute;
bottom: 14px;
right: 14px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
/* Ensure slick container doesn’t grow with many dots */
.mpd2-scope .mpd2-galleryCard .slick-list,
.mpd2-scope .mpd2-galleryCard .slick-track {
height: 420px;
}
.mpd2-scope .mpd2-galArrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 28px;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mpd2-scope .mpd2-galArrow.prev {
left: 12px;
}
.mpd2-scope .mpd2-galArrow.next {
right: 12px;
}
.mpd2-scope .mpd2-galArrow:hover {
background: rgba(0, 0, 0, 0.45);
}
/* Clean dots (no thumbnail overflow) */
.mpd2-scope .mpd2-galDots {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
margin: 0 !important;
padding: 0 14px !important;
display: flex !important;
gap: 8px;
justify-content: center;
align-items: center;
list-style: none;
}
.mpd2-scope .mpd2-galDots li {
margin: 0 !important;
}
.mpd2-scope .mpd2-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
display: inline-block;
}
.mpd2-scope .mpd2-galleryCard .slick-dots li.slick-active .mpd2-dot {
background: #fff;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
/* -----------------------------
Owner card tweaks (manager line + description first)
----------------------------- */
.mpd2-scope .mpd2-ownerCard {
border-radius: 16px;
}
.mpd2-scope .mpd2-ownerRow {
align-items: flex-start;
}
.mpd2-scope .mpd2-ownerAvatar img {
width: 54px;
height: 54px;
border-radius: 14px;
object-fit: cover;
border: 1px solid #eef0f5;
}
.mpd2-scope .mpd2-managedBy {
margin-top: 6px;
font-size: 14px;
color: #2b3a55;
}
.mpd2-scope .mpd2-managedName {
font-weight: 800;
color: #0b4ea2;
}
.mpd2-scope .mpd2-ownerDesc {
margin-top: 10px;
color: #5a6782;
}
/* -----------------------------
New sections: What's in + Highlights
----------------------------- */
.mpd2-scope .mpd2-sectionCard {
margin-top: 18px;
border: 1px solid #eef0f5;
border-radius: 16px;
background: #fff;
padding: 18px;
}
.mpd2-scope .mpd2-secHead {
margin-bottom: 14px;
}
.mpd2-scope .mpd2-secHeadRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mpd2-scope .mpd2-secTitle {
font-size: 18px;
font-weight: 800;
color: #1f2a44;
}
.mpd2-scope .mpd2-secSub {
margin-top: 3px;
font-size: 13px;
color: #6b7894;
}
.mpd2-scope .mpd2-iconGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
.mpd2-scope .mpd2-iconGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mpd2-scope .mpd2-iconItem {
border: 1px solid #edf0f7;
border-radius: 14px;
padding: 12px 12px;
background: #fbfcff;
}
.mpd2-scope .mpd2-iconLabel {
font-size: 12px;
color: #6b7894;
font-weight: 700;
}
.mpd2-scope .mpd2-iconValue {
margin-top: 4px;
font-size: 14px;
color: #1f2a44;
font-weight: 800;
}
.mpd2-scope .mpd2-chipWrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mpd2-scope .mpd2-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid #e6f0ff;
background: #f3f8ff;
color: #1f2a44;
font-weight: 700;
}
.mpd2-scope .mpd2-chipIcon {
width: 22px;
height: 22px;
border-radius: 999px;
background: #eaf7ef;
color: #106b3b;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
}
.mpd2-scope .mpd2-bChip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid #eef0f5;
background: #fff;
font-weight: 700;
color: #1f2a44;
}
.mpd2-scope .mpd2-bChipName {
color: #24324a;
}
.mpd2-scope .mpd2-bChipVal {
padding: 5px 10px;
border-radius: 999px;
border: 1px solid #e6f0ff;
background: #f3f8ff;
color: #0b4ea2;
font-weight: 800;
}
/* More details accordion */
.mpd2-scope .mpd2-moreDetails {
margin-top: 14px;
border-top: 1px dashed #e7eaf3;
padding-top: 12px;
}
.mpd2-scope .mpd2-moreSummary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 900;
color: #0b4ea2;
}
.mpd2-scope .mpd2-moreSummary::-webkit-details-marker {
display: none;
}
.mpd2-scope .mpd2-moreBody {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 992px) {
.mpd2-scope .mpd2-moreBody {
grid-template-columns: 1fr;
}
}
.mpd2-scope .mpd2-miniBlock {
border: 1px solid #eef0f5;
border-radius: 14px;
background: #fbfcff;
padding: 12px;
}
.mpd2-scope .mpd2-miniTitle {
font-weight: 900;
color: #1f2a44;
margin-bottom: 10px;
}
.mpd2-scope .mpd2-miniGrid {
display: grid;
gap: 10px;
}
.mpd2-scope .mpd2-miniRow {
display: flex;
justify-content: space-between;
gap: 10px;
}
.mpd2-scope .mpd2-miniLabel {
color: #6b7894;
font-weight: 700;
font-size: 13px;
}
.mpd2-scope .mpd2-miniValue {
color: #1f2a44;
font-weight: 900;
font-size: 13px;
text-align: right;
}
/* Funding ends row inside invest widget */
.mpd2-scope .mpd2-fundingWrap {
margin-top: 10px;
display: flex;
justify-content: center;
}
.mpd2-scope .mpd2-fundingRow {
width: 100%;
max-width: 320px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid #eef0f5;
background: #fff;
}
.mpd2-scope .mpd2-fundingLabel {
font-size: 12px;
font-weight: 800;
color: #6b7894;
}
.mpd2-scope .mpd2-fundingValue {
font-size: 12px;
font-weight: 900;
color: #1f2a44;
}
.mpd2-scope .mpd2-fundingValue.mpd2-danger {
color: #b42318;
}
/* ========= MPD DETAIL REVAMP (scoped) ========= */
.mpd-page .mpd-topcard {
background: #fff;
border: 1px solid #eef0f5;
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
margin-bottom: 14px;
}
.mpd-page .mpd-topline {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.mpd-page .mpd-title {
margin: 0;
font-size: 26px;
font-weight: 800;
letter-spacing: -0.2px;
color: #0f172a;
}
.mpd-page .mpd-badges {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.mpd-page .mpd-badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.mpd-page .mpd-badge-green {
background: #e9f8ef;
color: #16794c;
border-color: #c9f0d8;
}
.mpd-page .mpd-badge-blue {
background: #eef5ff;
color: #1d4ed8;
border-color: #dbeafe;
}
.mpd-page .mpd-badge-soft {
background: #f4f6fb;
color: #334155;
border-color: #e9ebf3;
}
.mpd-page .mpd-subline {
display: flex;
gap: 8px;
align-items: center;
margin-top: 10px;
color: #475569;
}
.mpd-page .mpd-subtext {
font-size: 14px;
}
.mpd-page .mpd-desc {
margin-top: 10px;
font-size: 14px;
color: #334155;
line-height: 1.55;
}
.mpd-page .mpd-quicklinks {
margin-top: 12px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mpd-page .mpd-linkpill {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 9px 12px;
border-radius: 999px;
background: #f1f5ff;
border: 1px solid #dbeafe;
color: #1d4ed8;
font-weight: 700;
font-size: 13px;
text-decoration: none;
}
.mpd-page .mpd-linkpill:hover {
background: #eaf2ff;
}
.mpd-page .mpd-linkpill-dark {
background: #f4f6fb;
border-color: #e9ebf3;
color: #0f172a;
}
/* ===== Gallery: fixed height, no overflow, arrows visible ===== */
.mpd-page .mpd-gallery-card .mpd-card-body-tight {
padding: 0 !important;
}
.mpd-page .mpd-gallery {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 420px;
}
.mpd-page .mpd-gslide {
height: 420px;
}
.mpd-page .mpd-gimg {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
/* Arrows - visible, clickable */
.mpd-page .mpd-garr {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(15, 23, 42, 0.45);
color: #fff;
font-size: 30px;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mpd-page .mpd-garr:hover {
background: rgba(15, 23, 42, 0.6);
}
.mpd-page .mpd-garr-prev {
left: 12px;
}
.mpd-page .mpd-garr-next {
right: 12px;
}
/* Dots (slick) */
.mpd-page .mpd-gallery .slick-dots {
bottom: 10px;
}
.mpd-page .mpd-gallery .slick-dots li button:before {
font-size: 10px;
opacity: 0.6;
}
.mpd-page .mpd-gallery .slick-dots li.slick-active button:before {
opacity: 1;
}
/* ===== Owner card tweaks ===== */
.mpd-page .mpd-owner-card .mpd-owner-desc {
margin-top: 6px;
}
.mpd-page .mpd-managed {
margin-top: 8px;
color: #475569;
font-size: 13px;
}
/* ===== Sections ===== */
.mpd-page .mpd-section-title {
font-size: 16px;
font-weight: 800;
color: #0f172a;
margin-bottom: 6px;
}
.mpd-page .mpd-section-sub {
font-size: 13px;
color: #64748b;
margin-bottom: 12px;
}
/* "What's in" mini cards */
.mpd-page .mpd-whats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 992px) {
.mpd-page .mpd-whats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.mpd-page .mpd-mini {
border: 1px solid #eef0f5;
background: #fff;
border-radius: 12px;
padding: 12px 12px;
}
.mpd-page .mpd-mini-label {
font-size: 12px;
color: #64748b;
font-weight: 700;
}
.mpd-page .mpd-mini-val {
margin-top: 4px;
font-size: 14px;
color: #0f172a;
font-weight: 800;
}
/* Highlight tags */
.mpd-page .mpd-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mpd-page .mpd-tag {
display: inline-flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid #e9eef7;
background: #f7fbff;
}
.mpd-page .mpd-tag-name {
font-weight: 800;
color: #0f172a;
font-size: 13px;
}
.mpd-page .mpd-tag-val {
font-weight: 700;
color: #1d4ed8;
font-size: 13px;
}
.mpd-page .mpd-tags-more {
margin-top: 10px;
}
.mpd-page .mpd-tags-note {
font-size: 13px;
color: #64748b;
font-weight: 700;
}
/* More details accordion */
.mpd-page .mpd-more {
border-top: 1px solid #eef0f5;
padding-top: 12px;
}
.mpd-page .mpd-more-sum {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 800;
color: #0f172a;
user-select: none;
}
.mpd-page .mpd-more-sum::-webkit-details-marker {
display: none;
}
.mpd-page .mpd-more-caret {
color: #64748b;
font-weight: 900;
}
.mpd-page details[open] .mpd-more-caret {
transform: rotate(180deg);
}
.mpd-page .mpd-more-body {
margin-top: 12px;
}
.mpd-page .mpd-more-block {
padding: 12px 0;
}
.mpd-page .mpd-more-title {
font-size: 14px;
font-weight: 900;
color: #0f172a;
margin-bottom: 10px;
}
.mpd-page .mpd-more-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 992px) {
.mpd-page .mpd-more-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.mpd-page .mpd-more-row {
border: 1px solid #eef0f5;
border-radius: 12px;
padding: 10px 12px;
background: #fff;
}
.mpd-page .mpd-more-label {
font-size: 12px;
color: #64748b;
font-weight: 700;
}
.mpd-page .mpd-more-value {
margin-top: 4px;
font-size: 14px;
color: #0f172a;
font-weight: 800;
}
.mpd-page .mpd-more-inline {
border: 1px solid #eef0f5;
border-radius: 12px;
padding: 10px 12px;
background: #fff;
color: #334155;
font-size: 14px;
}
/* Funding ends in inside invest widget */
.mpd-page .mpd-fundwrap {
margin-top: 10px;
padding: 10px 12px;
border: 1px dashed #e9ebf3;
border-radius: 12px;
background: #fafbff;
}
.mpd-page .mpd-fundrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mpd-page .mpd-fundlabel {
font-size: 12px;
font-weight: 800;
color: #64748b;
}
.mpd-page .mpd-fundval {
font-size: 12px;
font-weight: 900;
color: #0f172a;
}
.mpd-page .mpd-fundover {
color: #b91c1c;
}
/* Sidebar list below invest widget */
.mpd-page .mpd-side-list {
margin-top: 12px;
}
.mpd-page .mpd-side-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #eef0f5;
}
.mpd-page .mpd-side-title {
font-size: 14px;
font-weight: 900;
color: #0f172a;
}
.mpd-page .mpd-side-link {
background: none;
border: none;
color: #1d4ed8;
font-weight: 800;
font-size: 13px;
cursor: pointer;
}
.mpd-page .mpd-side-body {
padding: 12px 12px 6px;
}
.mpd-page .mpd-side-empty {
text-align: center;
color: #64748b;
font-size: 13px;
padding: 10px 0;
}
.mpd-page .mpd-side-item {
display: flex;
gap: 10px;
padding: 10px;
border: 1px solid #eef0f5;
border-radius: 12px;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease;
background: #fff;
margin-bottom: 10px;
}
.mpd-page .mpd-side-item:hover {
background: #f8fafc;
transform: translateX(3px);
}
.mpd-page .mpd-side-img {
width: 64px;
height: 64px;
border-radius: 10px;
object-fit: cover;
flex: 0 0 auto;
}
.mpd-page .mpd-side-meta {
min-width: 0;
flex: 1 1 auto;
}
.mpd-page .mpd-side-name {
font-size: 13px;
font-weight: 900;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpd-page .mpd-side-addr {
margin-top: 2px;
font-size: 12px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mpd-page .mpd-side-price {
margin-top: 6px;
font-size: 12px;
font-weight: 900;
color: #1d4ed8;
}
.mpd-page .mpd-side-foot {
padding: 0 12px 14px;
}
.mpd-page .mpd-side-btn {
width: 100%;
border-radius: 12px;
border: 1px solid #dbeafe;
background: #eef5ff;
color: #1d4ed8;
font-weight: 900;
padding: 10px 12px;
cursor: pointer;
}
.mpd-page .mpd-side-btn:hover {
background: #eaf2ff;
}
/* Sidebar widget spacing under invest box */
.ee-pd-sidewidget {
margin-top: 14px;
}
/* Each property row */
.ee-pd-minirow {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border: 1px solid #eef0f5;
border-radius: 12px;
background: #fff;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ee-pd-minirow:hover {
background: #f8f9fa;
transform: translateX(4px);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
/* Thumb */
.ee-pd-miniimg {
width: 74px;
height: 74px;
object-fit: cover;
border-radius: 10px;
flex: 0 0 auto;
}
/* Text */
.ee-pd-minitxt {
min-width: 0;
flex: 1 1 auto;
}
.ee-pd-mininame {
font-size: 14px;
font-weight: 700;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ee-pd-miniaddr {
margin-top: 2px;
font-size: 12px;
color: #6b7280;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ee-pd-miniprice {
margin-top: 4px;
font-size: 12px;
font-weight: 700;
color: #2563eb;
}
.ee-pd-minifooter {
border-top: 1px solid #e9ecef;
}
/* =========================
Scoped UI upgrades
========================= */
.mpd2-scope .mpd2-fundingWrap {
margin-top: 10px;
padding: 10px 10px;
border: 1px solid rgba(20, 60, 130, 0.12);
border-radius: 10px;
background: #f7fbff;
}
.mpd2-scope .mpd2-fundingRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
}
.mpd2-scope .mpd2-fundingLabel {
color: rgba(20, 30, 60, 0.72);
font-weight: 600;
}
.mpd2-scope .mpd2-fundingValue {
font-weight: 700;
color: #0b2a66;
letter-spacing: 0.2px;
}
.mpd2-scope .mpd2-danger {
color: #b42318;
}
/* WRAPPER */
.mpsv-wrap {
padding: 14px 0;
}
.mpsv-grid {
display: grid;
grid-template-columns: 1.6fr 0.8fr;
gap: 18px;
align-items: start;
}
@media (max-width: 992px) {
.mpsv-grid {
grid-template-columns: 1fr;
}
}
/* HERO */
.mpsv-hero {
border: 1px solid #eef0f5;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
padding: 16px;
margin-bottom: 14px;
}
.mpsv-hero-top {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
margin-bottom: 12px;
}
@media (max-width: 768px) {
.mpsv-hero-top {
flex-direction: column;
}
}
.mpsv-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #0f172a;
}
.mpsv-sub {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 6px;
color: #475569;
font-size: 13px;
}
.mpsv-pin {
display: inline-flex;
margin-top: 2px;
opacity: 0.9;
}
.mpsv-subtext {
line-height: 1.35;
}
/* BADGES */
.mpsv-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.mpsv-badge {
font-size: 12px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid #e8edf6;
background: #f8fafc;
color: #0f172a;
line-height: 1;
white-space: wrap;
}
.mpsv-badge-status {
background: #f1f5f9;
}
.mpsv-badge-list {
background: #eef2ff;
border-color: #e0e7ff;
}
.mpsv-badge-ends {
background: #ecfeff;
border-color: #cffafe;
}
/* MEDIA STRIP (scroll for up to 20 images) */
.mpsv-media {
margin-top: 6px;
}
.mpsv-media-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 6px;
}
.mpsv-media-scroll::-webkit-scrollbar {
height: 8px;
}
.mpsv-media-scroll::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 999px;
}
.mpsv-media-item {
flex: 0 0 auto;
width: 160px;
height: 110px;
border-radius: 14px;
overflow: hidden;
border: 1px solid #eef0f5;
background: #f8fafc;
}
.mpsv-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* INFO CARD */
.mpsv-card {
border: 1px solid #eef0f5;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
margin-bottom: 14px;
overflow: hidden;
}
.mpsv-card-head {
padding: 12px 14px;
border-bottom: 1px solid #eef0f5;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.mpsv-card-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.mpsv-kv {
padding: 10px 14px 14px 14px;
display: grid;
gap: 10px;
}
.mpsv-kv-row {
display: grid;
grid-template-columns: 170px 1fr;
gap: 12px;
align-items: start;
}
@media (max-width: 520px) {
.mpsv-kv-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.mpsv-k {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.mpsv-v {
font-size: 13px;
color: #0f172a;
font-weight: 600;
}
.mpsv-wrap {
word-break: break-word;
overflow-wrap: anywhere;
font-weight: 600;
}
/* ACTIONS */
.mpsv-right {
min-width: 0;
}
.mpsv-sticky {
position: sticky;
top: 90px;
}
.mpsv-actioncard {
border: 1px solid #eef0f5;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
padding: 16px;
}
.mpsv-action-title {
margin: 0 0 6px 0;
font-size: 15px;
font-weight: 800;
color: #0f172a;
}
.mpsv-action-sub {
margin: 0 0 12px 0;
font-size: 13px;
color: #64748b;
}
.mpsv-action-stack {
display: grid;
gap: 10px;
}
/* Scoped: eepsx-* (no collisions) */
.eepsx-page {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.eepsx-sky {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(108%) saturate(115%) contrast(102%);
opacity: 0.7;
}
.eepsx-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(7, 18, 32, 0.55) 0%,
rgba(7, 18, 32, 0.35) 55%,
rgba(7, 18, 32, 0.55) 100%
);
}
.eepsx-shell {
position: relative;
z-index: 2;
padding: 28px 18px 36px;
max-width: 1220px;
margin: 0 auto;
}
.eepsx-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}
.eepsx-title {
margin: 0;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.2px;
color: #0f172a;
}
.eepsx-subtitle {
margin-top: 6px;
font-size: 13px;
color: rgba(15, 23, 42, 0.75);
max-width: 720px;
line-height: 1.35;
}
.eepsx-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.eepsx-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.85);
color: rgba(15, 23, 42, 0.9);
}
.eepsx-pill.is-ok {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.25);
}
.eepsx-pill.is-warn {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.25);
}
.eepsx-pill.is-info {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.25);
}
.eepsx-pill.is-neutral {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.25);
}
.eepsx-pill-inverse {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.26) !important;
color: rgba(255, 255, 255, 0.95) !important;
}
/* grid */
.eepsx-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 16px;
margin-top: 16px;
}
@media (max-width: 980px) {
.eepsx-grid {
grid-template-columns: 1fr;
}
}
/* cards */
.eepsx-card {
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
padding: 16px;
}
.eepsx-card + .eepsx-card {
margin-top: 14px;
}
.eepsx-card-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.eepsx-card-t {
margin: 0;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.2px;
color: #0f172a;
}
.eepsx-loading {
font-size: 12px;
font-weight: 700;
color: rgba(15, 23, 42, 0.7);
}
/* media row */
.eepsx-media-row {
display: grid;
grid-template-columns: 320px 1fr;
gap: 14px;
}
@media (max-width: 980px) {
.eepsx-media-row {
grid-template-columns: 1fr;
}
}
.eepsx-imgwrap {
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.03);
}
.eepsx-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.eepsx-thumbs {
display: flex;
gap: 8px;
padding: 10px;
overflow-x: auto;
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.7);
}
.eepsx-thumb {
width: 58px;
height: 44px;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.1);
flex: 0 0 auto;
}
.eepsx-img-empty {
height: 260px;
border-radius: 16px;
border: 1px dashed rgba(15, 23, 42, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: rgba(15, 23, 42, 0.65);
font-weight: 700;
background: rgba(255, 255, 255, 0.65);
}
/* kv grid */
.eepsx-kvbox {
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.75);
padding: 12px;
}
.eepsx-kvgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 640px) {
.eepsx-kvgrid {
grid-template-columns: 1fr;
}
}
.eepsx-kv {
border-radius: 14px;
padding: 10px 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.9);
}
.eepsx-k {
font-size: 11px;
font-weight: 800;
color: rgba(15, 23, 42, 0.65);
margin-bottom: 6px;
}
.eepsx-v {
font-size: 13px;
font-weight: 800;
color: rgba(15, 23, 42, 0.92);
word-break: break-word;
overflow-wrap: anywhere;
}
/* actions */
.eepsx-card-actions .eepsx-card-s {
display: flex;
align-items: center;
gap: 10px;
}
.eepsx-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.75);
}
.eepsx-dot.is-ok {
background: rgba(16, 185, 129, 0.95);
}
.eepsx-mini {
font-size: 12px;
font-weight: 700;
color: rgba(15, 23, 42, 0.7);
}
.eepsx-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.eepsx-btn {
border-radius: 12px !important;
padding: 10px 14px !important;
font-weight: 900 !important;
letter-spacing: 0.2px;
}
.eepsx-btn-primary {
background: linear-gradient(135deg, #0b3b68 0%, #1a6fb0 100%) !important;
color: #fff !important;
border: 0 !important;
}
.eepsx-btn-dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
color: #fff !important;
border: 0 !important;
}
.eepsx-btn-ghost {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
.eepsx-fundingbox {
margin-top: 12px;
border-radius: 16px;
padding: 12px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.03);
}
.eepsx-fundinglabel {
font-size: 11px;
font-weight: 900;
color: rgba(15, 23, 42, 0.65);
margin-bottom: 8px;
}
.eepsx-fundingmeta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.eepsx-chip {
display: inline-flex;
align-items: center;
padding: 7px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.18);
color: rgba(15, 23, 42, 0.9);
}
.eepsx-fundingdate {
font-size: 13px;
font-weight: 900;
color: rgba(15, 23, 42, 0.92);
}
/* LiveCard footer helper */
.eepsx-live-footer {
margin-top: 12px;
}
.eepsx-live-id {
font-size: 12px;
font-weight: 800;
color: rgba(255, 255, 255, 0.85);
}
/* WRAPPER + SKY */
.mpsxv2-wrap {
position: relative;
padding: 18px 18px 28px;
}
.mpsxv2-sky {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: 18px;
}
.eeap-sky-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(108%) saturate(115%) contrast(102%);
opacity: 0.7;
}
.mpsxv2-sky-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(8, 18, 28, 0.55),
rgba(8, 18, 28, 0.35)
);
}
/* GRID */
.mpsxv2-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 360px;
gap: 18px;
align-items: start;
}
@media (max-width: 1100px) {
.mpsxv2-grid {
grid-template-columns: 1fr;
}
}
/* MAIN CARD */
.mpsxv2-card {
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.mpsxv2-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.mpsxv2-title {
margin: 0;
font-size: 16px;
font-weight: 800;
color: #0f172a;
}
.mpsxv2-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mpsxv2-badge {
font-size: 12px;
font-weight: 700;
padding: 6px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.12);
color: #065f46;
border: 1px solid rgba(16, 185, 129, 0.25);
}
.mpsxv2-badge-soft {
background: rgba(59, 130, 246, 0.1);
color: #1e3a8a;
border-color: rgba(59, 130, 246, 0.22);
}
.mpsxv2-body {
padding: 16px;
}
/* TOP: media + tiles */
.mpsxv2-top {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 16px;
}
@media (max-width: 900px) {
.mpsxv2-top {
grid-template-columns: 1fr;
}
}
.mpsxv2-media {
border-radius: 16px;
background: #f1f5f9;
border: 1px solid rgba(15, 23, 42, 0.1);
overflow: hidden;
}
.mpsxv2-mainimg {
height: 240px;
background: #e2e8f0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mpsxv2-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mpsxv2-img-empty {
color: #334155;
font-weight: 700;
}
.mpsxv2-thumbs {
display: flex;
gap: 8px;
padding: 10px;
overflow-x: auto; /* supports up to 20+ */
border-top: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.55);
}
.mpsxv2-thumb {
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
border-radius: 12px;
padding: 0;
width: 64px;
height: 54px;
overflow: hidden;
cursor: pointer;
flex: 0 0 auto;
}
.mpsxv2-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tiles */
.mpsxv2-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-content: start;
}
@media (max-width: 520px) {
.mpsxv2-tiles {
grid-template-columns: 1fr;
}
}
.mpsxv2-tile {
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 23, 42, 0.1);
padding: 12px 12px;
}
.mpsxv2-tlabel {
font-size: 12px;
font-weight: 700;
color: #64748b;
margin-bottom: 6px;
}
.mpsxv2-tvalue {
font-size: 14px;
font-weight: 800;
color: #0f172a;
}
/* Sections */
.mpsxv2-sections {
margin-top: 14px;
display: grid;
gap: 12px;
}
/* InfoCard */
.mpsxv2-info-card {
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.86);
overflow: hidden;
}
.mpsxv2-info-head {
padding: 12px 12px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.mpsxv2-info-title {
margin: 0;
font-size: 14px;
font-weight: 900;
color: #0f172a;
}
.mpsxv2-info-grid {
display: grid;
gap: 10px;
padding: 12px;
}
.mpsxv2-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: baseline;
}
@media (max-width: 520px) {
.mpsxv2-row {
grid-template-columns: 1fr;
}
}
.mpsxv2-label {
font-size: 12px;
font-weight: 800;
color: #64748b;
}
.mpsxv2-value {
font-size: 13px;
font-weight: 800;
color: #0f172a;
text-align: right;
}
@media (max-width: 520px) {
.mpsxv2-value {
text-align: left;
}
}
.mpsxv2-wraptext {
word-break: break-word;
overflow-wrap: anywhere;
}
/* Actions */
.mpsxv2-actions {
margin-top: 14px;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.86);
padding: 12px;
}
.mpsxv2-actions-title {
font-size: 13px;
font-weight: 900;
margin-bottom: 10px;
color: #0f172a;
}
.mpsxv2-actions-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Right side tweaks */
.mpsxv2-right {
position: relative;
}
.mpsxv2-pill {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.28);
font-weight: 800;
font-size: 12px;
}
/* Modal */
.mpsxv2-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
}
.mpsxv2-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.mpsxv2-modal-card {
position: relative;
width: min(920px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
background: #0b1220;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
display: flex;
flex-direction: column;
}
.mpsxv2-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
}
.mpsxv2-modal-title {
font-weight: 900;
}
.mpsxv2-x {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
border-radius: 10px;
padding: 6px 10px;
cursor: pointer;
font-weight: 900;
}
.mpsxv2-modal-body {
padding: 12px;
overflow: auto;
display: grid;
place-items: center;
}
.mpsxv2-modal-img {
max-width: 100%;
max-height: 72vh;
object-fit: contain;
border-radius: 12px;
}
.mpsxv2-modal-foot {
display: flex;
gap: 10px;
justify-content: center;
padding: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mpsxv2-navbtn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: 12px;
padding: 8px 14px;
cursor: pointer;
font-weight: 900;
}
/* --- PAGE WRAP / BG --- */
.eeapx-tune.mpsx-wrap {
position: relative;
min-height: 100vh;
padding: 18px 16px 28px;
}
.eeapx-tune .eeap-sky-img {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(108%) saturate(115%) contrast(102%);
opacity: 0.7;
z-index: 0;
pointer-events: none;
}
.eeapx-tune .mpsx-inner {
position: relative;
z-index: 1;
}
/* --- LAYOUT --- */
.eeapx-tune .mpsx-grid {
display: grid;
grid-template-columns: 1.6fr 0.9fr;
gap: 18px;
align-items: start;
}
@media (max-width: 992px) {
.eeapx-tune .mpsx-grid {
grid-template-columns: 1fr;
}
.eeapx-tune .mpsx-right {
order: -1;
}
}
/* --- MAIN CARD --- */
.eeapx-tune .mpsx-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(233, 236, 242, 0.9);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
overflow: hidden;
}
.eeapx-tune .mpsx-card-head {
padding: 16px 18px 10px;
border-bottom: 1px solid rgba(233, 236, 242, 0.9);
}
.eeapx-tune .mpsx-title {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.eeapx-tune .mpsx-subtitle {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.eeapx-tune .mpsx-pname {
font-weight: 700;
color: #0f172a;
}
.eeapx-tune .mpsx-pill {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.55);
background: rgba(241, 245, 249, 0.75);
font-weight: 700;
color: #0f172a;
font-size: 12px;
}
.eeapx-tune .mpsx-card-body {
padding: 14px 18px 18px;
}
/* --- IMAGES --- */
.eeapx-tune .mpsx-images {
display: grid;
gap: 12px;
margin-bottom: 14px;
}
.eeapx-tune .mpsx-hero {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(233, 236, 242, 0.9);
cursor: pointer;
background: rgba(248, 250, 252, 0.9);
}
.eeapx-tune .mpsx-heroimg {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.eeapx-tune .mpsx-hero-overlay {
position: absolute;
inset: auto 12px 12px 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-weight: 700;
font-size: 12px;
}
.eeapx-tune .mpsx-thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
}
.eeapx-tune .mpsx-thumbbtn {
border: 1px solid rgba(233, 236, 242, 0.9);
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 0;
width: 78px;
min-width: 78px;
height: 58px;
overflow: hidden;
cursor: pointer;
}
.eeapx-tune .mpsx-thumbimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- INFO CARDS --- */
.eeapx-tune .mpsx-sections {
display: grid;
gap: 12px;
}
.eeapx-tune .mpsx-info-card {
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(233, 236, 242, 0.9);
border-radius: 16px;
padding: 12px 14px;
}
.eeapx-tune .mpsx-info-title {
margin: 0;
font-size: 14px;
font-weight: 800;
color: #0f172a;
}
.eeapx-tune .mpsx-info-grid {
margin-top: 10px;
display: grid;
gap: 8px;
}
.eeapx-tune .mpsx-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 12px;
align-items: baseline;
}
@media (max-width: 640px) {
.eeapx-tune .mpsx-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
.eeapx-tune .mpsx-label {
color: #475569;
font-weight: 700;
font-size: 12px;
}
.eeapx-tune .mpsx-value {
color: #0f172a;
font-weight: 700;
font-size: 13px;
}
.eeapx-tune .mpsx-wraptext {
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
}
/* --- RIGHT LIVE CARD helpers --- */
.eeapx-tune .mpsx-right {
position: relative;
}
.eeapx-tune .mpsx-badge {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
font-weight: 800;
font-size: 12px;
white-space: wrap;
}
.mpsx-hero {
position: relative;
}
/* arrows */
.mpsx-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border: 0;
border-radius: 999px;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
/* readable over images */
background: rgba(17, 43, 68, 0.55);
color: #fff;
font-size: 34px;
line-height: 0;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
}
.mpsx-prev {
left: 14px;
}
.mpsx-next {
right: 14px;
}
.mpsx-nav:hover {
background: rgba(17, 43, 68, 0.7);
}
.mpsx-nav:active {
transform: translateY(-50%) scale(0.98);
}
/* optional: highlight selected thumb */
.mpsx-thumbbtn.is-active {
outline: 2px solid rgba(43, 123, 189, 0.9);
border-radius: 10px;
}
.eeapx-tune .mpsx-id {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.92);
font-weight: 700;
word-break: break-word;
}
/* --- STICKY FOOTER ACTION BAR (fixes your “Action button not visible” issue) --- */
.eeapx-tune .mpsx-footerbar {
position: sticky;
bottom: 12px;
margin-top: 14px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(233, 236, 242, 0.9);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
padding: 12px 14px;
display: grid;
grid-template-columns: 160px 1fr;
gap: 12px;
align-items: center;
z-index: 5;
}
@media (max-width: 640px) {
.eeapx-tune .mpsx-footerbar {
grid-template-columns: 1fr;
}
}
.eeapx-tune .mpsx-footer-title {
font-weight: 900;
color: #0f172a;
}
.eeapx-tune .mpsx-footer-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.eeapx-tune .mpsx-actbtn {
min-height: 40px;
padding: 10px 14px !important;
border-radius: 12px !important;
font-weight: 800 !important;
}
.eeapx-tune .mpsx-muted {
color: #475569;
font-weight: 700;
font-size: 13px;
}
/* --- MODAL --- */
.eeapx-tune .mpsx-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
}
.eeapx-tune .mpsx-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.65);
}
.eeapx-tune .mpsx-modal-close {
position: absolute;
top: 10px;
right: 12px;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.9);
font-size: 22px;
font-weight: 900;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.eeapx-tune .mpsx-modal-img {
width: 100%;
height: auto;
max-height: calc(100vh - 28px);
object-fit: contain;
display: block;
background: #0b1220;
}
.eeappr-docs-grid2 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.eeappr-docs-meta-bottom {
display: flex;
align-items: center;
gap: 10px;
}
.eeappr-docs-meta-sub {
display: inline-block;
line-height: 1.2;
}
.eeappr-docs-view {
margin-left: auto;
position: relative;
z-index: 3;
font-weight: 600;
text-decoration: underline;
}
.mpsx-paycard {
width: 420px;
max-width: 92vw;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
padding: 18px 18px 16px;
position: relative;
}
.mpsx-payhead {
font-weight: 700;
font-size: 18px;
color: #0f172a;
margin-bottom: 12px;
}
.mpsx-paygrid {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid #e2e8f0;
padding-top: 10px;
}
.mpsx-payrow {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #e2e8f0;
}
.mpsx-payrow:last-child {
border-bottom: none;
}
.mpsx-paylabel {
color: #64748b;
font-size: 14px;
}
.mpsx-payvalue {
color: #0f172a;
font-weight: 600;
font-size: 15px;
}
.mpsx-paytotal .mpsx-paylabel {
color: #0f172a;
font-weight: 700;
}
.mpsx-paytotal .mpsx-payvalue {
color: #0e5fb1;
font-weight: 700;
font-size: 16px;
}
.mpsx-paycta {
margin-top: 12px;
display: flex;
justify-content: center;
}
/* =====================================================================
EQUITEDGE PROPERTY-FLOW DESIGN SYSTEM — CONSOLIDATED + RESPONSIVE
=====================================================================
Single source of truth for the shared .eeap-* structural classes used
across Add Property, Edit Property (all steps), Property Status, and
the SPV review/sign panel. Placed last in the file and using
!important on layout-critical properties so it reliably wins over the
many earlier partial/duplicate .eeap-footerbar / .eeap-btn / .eeap-grid
blocks scattered above (left in place intentionally — removing them
individually risks silently breaking a page that depends on one of
their side-effects; this block instead guarantees the *effective*
result is correct and consistent everywhere .eeap-* classes are used,
regardless of which page or wizard wrapper renders them).
Breakpoints match the convention already used in EditProperty.js's
own scoped