/* Real Estate Pro Max - Professional Frontend Styles */
/* KILL ALL ORANGE BORDERS - AGGRESSIVE OVERRIDE */
.repmx-search-term-pill,
.repmx-search-term-pill *,
.repmx-search-input,
.repmx-premium-search-container input,
.repmx-premium-search-container input[type="text"] {
--theme-form-field-border-initial-color: #e5e7eb !important;
--theme-form-field-border-hover-color: #e5e7eb !important;
--theme-form-field-border-focus-color: #e5e7eb !important;
border-color: #e5e7eb !important;
box-shadow: none !important;
outline: none !important;
z-index: 1;
}
/* ===== PREMIUM PILL-BASED SEARCH BAR ===== */
/* Main Container - No Background */
.repmx-premium-search-container {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}
.repmx-premium-search-form {
display: flex;
align-items: center;
gap: 16px;
max-width: 1200px;
width: 100%;
}
/* Search Wrapper - Clean Design */
.repmx-search-wrapper {
background: #ffffff00;
border-radius: 30px;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Top Row - Perfect Alignment */
.repmx-top-row {
display: flex;
align-items: center;
gap: 12px;
height: 44px;
flex-direction: row-reverse;
}
/* Search Term Pill - White Background with Integrated Button */
.repmx-search-term-pill {
background: #ffffff !important;
border: 2px solid #e5e7eb !important;
border-color: #e5e7eb !important;
border-radius: 50px !important;
padding: 0;
padding-right: 0px !important; /* NO space - button at edge */
padding-left: 0 !important;
overflow: visible;
flex: 1;
min-width: 180px;
height: 44px;
display: flex;
align-items: center;
gap: 0;
box-shadow: none !important;
outline: none !important;
position: relative;
}
.repmx-search-term-pill:hover,
.repmx-search-term-pill:focus,
.repmx-search-term-pill:focus-within {
border-color: #e5e7eb !important;
box-shadow: none !important;
outline: none !important;
}
.repmx-search-input {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0 18px;
padding-right: 50px !important; /* Space for button */
color: #374151 !important;
font-size: 15px;
font-weight: 600;
flex: 1;
height: 100%;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: none !important;
z-index: 1;
}
.repmx-search-input:hover,
.repmx-search-input:focus,
.repmx-search-input:active {
border: none !important;
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.repmx-search-input::placeholder {
color: #9ca3af !important;
font-weight: 600;
}
/* Toggle Switches - True Toggle Behavior */
.repmx-toggle-switch {
height: 44px;
display: flex;
align-items: center;
}
.repmx-toggle-container {
position: relative;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 50px;
height: 44px;
display: flex;
overflow: hidden;
cursor: pointer;
}
.repmx-toggle-option {
position: relative;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
z-index: 2;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
min-width: 30px;
}
.repmx-toggle-text {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
transition: color 0.3s ease;
white-space: nowrap;
}
/* Toggle Slider - Animated Background */
.repmx-toggle-slider {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
border-radius: 47px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
/* Triple Toggle Container */
.repmx-triple-container {
display: flex;
}
.repmx-triple-container .repmx-toggle-slider {
width: 33.333%;
}
/* BUY/SALE/RENT Triple Toggle Colors */
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-buy-option .repmx-toggle-text {
color: #10b981;
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-sale-option .repmx-toggle-text {
color: #f97316;
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-rent-option .repmx-toggle-text {
color: #3b82f6;
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-buy-option.active .repmx-toggle-text,
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-sale-option.active .repmx-toggle-text,
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-rent-option.active .repmx-toggle-text {
color: white;
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-toggle-slider {
background: #10b981;
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-sale-option.active ~ .repmx-toggle-slider {
background: #f97316;
transform: translateX(100%);
}
.repmx-toggle-switch[data-toggle="listing_type"] .repmx-rent-option.active ~ .repmx-toggle-slider {
background: #3b82f6;
transform: translateX(200%);
}
/* RESIDENTIAL/COMMERCIAL Toggle Colors (RESIDENTIAL default - ORANGE) */
.repmx-toggle-switch[data-toggle="property_category"] .repmx-residential-option .repmx-toggle-text {
color: #f97316;
}
.repmx-toggle-switch[data-toggle="property_category"] .repmx-commercial-option .repmx-toggle-text {
color: #3b82f6;
}
.repmx-toggle-switch[data-toggle="property_category"] .repmx-residential-option.active .repmx-toggle-text {
color: white;
}
.repmx-toggle-switch[data-toggle="property_category"] .repmx-commercial-option.active .repmx-toggle-text {
color: white;
}
.repmx-toggle-switch[data-toggle="property_category"] .repmx-toggle-slider {
background: #f97316;
}
.repmx-toggle-switch[data-toggle="property_category"] .repmx-commercial-option.active ~ .repmx-toggle-slider {
background: #3b82f6;
transform: translateX(100%);
}
/* Hover Effects */
.repmx-toggle-option:hover {
transform: scale(1.02);
}
.repmx-toggle-container:hover {
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}
/* Bottom Row - Perfect Spacing */
.repmx-bottom-row {
display: flex;
align-items: center;
gap: 8px;
height: 44px;
}
/* Filter Pills - Uniform Design */
.repmx-filter-pill {
background: #00000078;
border-radius: 50px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 6px;
color: white;
position: relative;
height: 44px;
flex: 1;
min-width: 110px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
pointer-events: auto;
backdrop-filter: blur(4px);
}
.repmx-filter-pill:hover {
background: rgba(255, 255, 255, 0.95);
color: #000000;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.repmx-filter-pill:hover .repmx-pill-icon,
.repmx-filter-pill:hover .repmx-dropdown-arrow {
stroke: #000000;
fill: #000000;
}
.repmx-filter-pill:hover .repmx-pill-select {
color: #000000;
}
.repmx-pill-icon {
width: 14px;
height: 14px;
stroke: white;
fill: white;
flex-shrink: 0;
stroke-width: 2.5;
}
.repmx-pill-select {
background: transparent;
border: none;
outline: none;
color: white;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
appearance: none;
cursor: pointer;
flex: 1;
padding-right: 16px;
height: 100%;
position: relative;
z-index: 20;
pointer-events: auto;
}
.repmx-pill-select option {
background: #3b82f6;
color: white;
padding: 10px;
font-weight: 600;
}
.repmx-dropdown-arrow {
width: 10px;
height: 10px;
stroke: white;
position: absolute;
right: 10px;
pointer-events: none;
stroke-width: 2.5;
}
/* Search Button - BRAND NEW FROM SCRATCH */
.repmx-search-button {
position: relative;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
margin-left: auto;
margin-right: 0px;
box-shadow: 0 2px 4px rgba(251, 146, 60, 0.2);
z-index: 100;
}
/* Force icon via pseudo-element to avoid any SVG overrides */
.repmx-search-button::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
z-index: 101;
background-image: url('data:image/svg+xml;utf8,');
}
/* Hide inline SVG if some theme styles are conflicting */
.repmx-search-button svg { display: none !important; }
.repmx-search-button:hover {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
box-shadow: 0 4px 8px rgba(251, 146, 60, 0.3);
transform: translateY(-1px);
}
.repmx-search-button:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(251, 146, 60, 0.2);
}
.repmx-search-button svg {
display: none !important; /* We draw icon via ::after to avoid theme overrides */
width: 18px !important;
height: 18px !important;
stroke: #ffffff !important;
stroke-width: 2.5 !important;
fill: none !important;
transition: transform 0.2s ease;
color: #ffffff !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 101 !important;
position: relative !important;
}
.repmx-search-button:hover svg {
transform: scale(1.05);
}
.repmx-search-button-text {
display: none;
}
/* Drag scroll state for filters */
.repmx-bottom-row.is-dragging { cursor: grabbing; }
.repmx-bottom-row.is-dragging .repmx-pill-select { pointer-events: none; }
/* Responsive Design - Optimized */
@media (max-width: 1200px) {
.repmx-premium-search-form { gap: 12px; }
.repmx-filter-pill { min-width: 100px; }
}
@media (max-width: 1024px) {
.repmx-premium-search-container { padding: 0 12px; }
.repmx-premium-search-form { flex-direction: column; gap: 12px; }
.repmx-search-wrapper { width: 100%; }
.repmx-top-row { justify-content: center; flex-wrap: wrap; height: auto; gap: 8px; }
.repmx-search-term-pill { min-width: 100%; width: 100%; }
/* Two toggles: SALE/RENT wider, RESIDENTIAL/COMMERCIAL much wider */
.repmx-toggle-switch[data-toggle="listing_type"] { flex: 0 0 42%; min-width: 0; }
.repmx-toggle-switch[data-toggle="property_category"] { flex: 0 0 calc(58% - 12px); min-width: 0; }
.repmx-toggle-container { width: 100%; }
/* Horizontal scrollable grid for filter pills - wider columns for full text */
.repmx-bottom-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(140px, 1fr); /* Min 140px to show full text */
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
padding-bottom: 6px;
touch-action: pan-x;
cursor: grab;
}
.repmx-bottom-row::-webkit-scrollbar { display: none; }
.repmx-bottom-row:active { cursor: grabbing; }
.repmx-filter-pill {
scroll-snap-align: start;
scroll-snap-stop: normal;
pointer-events: auto;
}
/* Search button on tablet */
.repmx-search-button {
width: 38px;
height: 38px;
min-width: 38px;
margin-right: 0px;
}
.repmx-search-button svg {
width: 17px !important;
height: 17px !important;
stroke: #ffffff !important;
fill: none !important;
}
.repmx-search-term-pill { height: 44px; padding-right: 0px !important; }
}
@media (max-width: 768px) {
.repmx-search-wrapper { padding: 12px 12px; gap: 10px; }
.repmx-top-row { flex-wrap: wrap; gap: 8px; }
.repmx-search-term-pill { width: 100%; }
/* Two toggles: SALE/RENT wider, RESIDENTIAL/COMMERCIAL much wider */
.repmx-toggle-switch[data-toggle="listing_type"] { flex: 0 0 42%; min-width: 0; }
.repmx-toggle-switch[data-toggle="property_category"] { flex: 0 0 calc(58% - 12px); min-width: 0; }
.repmx-toggle-container { width: 100%; }
/* Filters: horizontal grid with wider columns for full text */
.repmx-bottom-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(130px, 1fr); /* Min 130px for mobile */
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
padding-bottom: 6px;
touch-action: pan-x;
cursor: grab;
}
.repmx-bottom-row::-webkit-scrollbar { display: none; }
.repmx-bottom-row:active { cursor: grabbing; }
.repmx-filter-pill {
padding: 0 16px;
min-width: 0;
scroll-snap-align: start;
scroll-snap-stop: normal;
white-space: nowrap;
pointer-events: auto;
}
.repmx-pill-select { font-size: 13px; min-width: 90px; }
/* Search button on mobile */
.repmx-search-button {
width: 36px;
height: 36px;
min-width: 36px;
margin-right: 0px;
}
.repmx-search-button svg {
width: 16px !important;
height: 16px !important;
stroke: #ffffff !important;
fill: none !important;
}
.repmx-search-term-pill { height: 44px; padding-right: 0px !important; }
}
@media (max-width: 480px) {
/* Ensure two toggles always fit one row with proper proportions */
.repmx-top-row { gap: 6px; }
.repmx-toggle-switch[data-toggle="listing_type"] { flex: 0 0 40%; min-width: 0; }
.repmx-toggle-switch[data-toggle="property_category"] { flex: 0 0 calc(60% - 6px); min-width: 0; }
/* Filters: wider columns for small screens to prevent text cut-off */
.repmx-bottom-row {
grid-auto-columns: minmax(120px, 1fr);
}
}
/* Reset and Base Styles */
.repm-single-property-comprehensive * {
box-sizing: border-box;
}
.repm-single-property-comprehensive {
max-width: 1400px;
margin: 0 auto;
padding: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #2d3748;
background: #f7fafc;
}
/* Property Header - Hero Section */
.repm-property-header {
position: relative;
text-align: center;
padding: 80px 40px;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
color: white;
margin-bottom: 0;
overflow: hidden;
}
.repm-property-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.repm-property-header > * {
position: relative;
z-index: 2;
}
.repm-property-logo {
margin-bottom: 30px;
}
.repm-property-logo img {
max-height: 100px;
width: auto;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
border: 3px solid rgba(255,255,255,0.2);
}
.repm-property-name {
font-size: clamp(2.5rem, 5vw, 4rem);
margin: 30px 0;
font-weight: 800;
text-shadow: 0 4px 8px rgba(0,0,0,0.3);
letter-spacing: -1px;
line-height: 1.1;
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.repm-price-display {
font-size: clamp(2rem, 4vw, 3rem);
margin: 40px 0;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.repm-currency {
font-size: 0.8em;
}
.repm-price-text {
font-size: 0.6em;
font-weight: 400;
color: #e2e8f0;
text-shadow: none;
-webkit-text-fill-color: #e2e8f0;
}
.repm-contact-btn {
background: linear-gradient(135deg, #e53e3e 0%, #fc8181 100%);
color: white;
border: none;
padding: 20px 40px;
font-size: 1.1em;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
margin-top: 30px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 25px rgba(229, 62, 62, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.repm-contact-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.repm-contact-btn:hover::before {
left: 100%;
}
.repm-contact-btn:hover {
background: linear-gradient(135deg, #c53030 0%, #e53e3e 100%);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(229, 62, 62, 0.6);
}
/* Section Titles */
.repm-section-title {
font-size: clamp(1.5rem, 3vw, 2.2rem);
color: #1a202c;
margin: 60px 0 30px 0;
padding: 20px 0;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 2px;
position: relative;
text-align: center;
background: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.repm-section-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px 15px 0 0;
}
.repm-section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(135deg, #e53e3e 0%, #fc8181 100%);
border-radius: 2px;
}
/* Project Details Section - Premium Design */
.repm-project-details-section {
background: white;
margin: 0;
padding: 50px 40px;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.repm-project-details-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.repm-project-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 30px;
}
.repm-project-details .repm-detail-item {
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
padding: 25px;
border-radius: 15px;
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.repm-project-details .repm-detail-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.repm-project-details .repm-detail-item:hover::before {
transform: scaleY(1);
}
.repm-project-details .repm-detail-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border-color: #cbd5e0;
}
.repm-detail-item .label {
font-weight: 700;
color: #4a5568;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
display: block;
}
.repm-detail-item .value {
color: #1a202c;
font-weight: 600;
font-size: 1.3em;
line-height: 1.2;
}
.repm-project-description {
margin-top: 40px;
padding: 30px;
background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
border-radius: 20px;
border-left: 6px solid #667eea;
line-height: 1.8;
color: #2d3748;
font-size: 1.1em;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* Status and Offer Section - Eye-catching Design */
.repm-status-offer-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin: 0;
padding: 40px;
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
}
.repm-property-status {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.repm-property-status::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}
.repm-property-status:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.repm-ongoing-offer {
background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(229, 62, 62, 0.2);
border: 2px solid #fc8181;
position: relative;
overflow: hidden;
animation: pulse-offer 2s infinite;
}
@keyframes pulse-offer {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.repm-ongoing-offer::before {
content: '🔥';
position: absolute;
top: 15px;
right: 20px;
font-size: 2em;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.repm-property-status h4 {
margin: 0 0 20px 0;
color: #1a202c;
font-size: 1.3em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.repm-ongoing-offer h4 {
margin: 0 0 20px 0;
color: #742a2a;
font-size: 1.4em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.repm-status-badge {
display: inline-block;
padding: 12px 24px;
border-radius: 25px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.repm-status-badge:hover {
transform: scale(1.05);
}
.repm-status-under_construction {
background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.repm-status-ready_to_move {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.repm-status-for_sale {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.repm-status-for_rent {
background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.repm-offer-content {
color: #742a2a;
line-height: 1.8;
font-size: 1.1em;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
/* Developer Information - Professional Card */
.repm-developer-info {
background: white;
padding: 50px 40px;
margin: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
position: relative;
text-align: center;
}
.repm-developer-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.repm-developer-logo {
margin-bottom: 30px;
}
.repm-developer-logo img {
max-height: 120px;
width: auto;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
border: 3px solid #f7fafc;
transition: all 0.3s ease;
}
.repm-developer-logo img:hover {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}
.repm-developer-name {
font-size: 2em;
color: #1a202c;
margin: 25px 0;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.repm-developer-description {
color: #4a5568;
line-height: 1.8;
font-size: 1.1em;
max-width: 800px;
margin: 0 auto;
}
/* Property Gallery - Modern Grid */
.repm-property-gallery {
background: white;
padding: 50px 40px;
margin: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.repm-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.repm-gallery-item {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.repm-gallery-item:hover {
transform: scale(1.03);
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.repm-gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: all 0.3s ease;
}
.repm-gallery-item:hover img {
transform: scale(1.1);
}
/* Property Content */
.repm-property-content {
background: white;
padding: 50px 40px;
margin: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
line-height: 1.8;
font-size: 1.1em;
color: #4a5568;
}
/* Luxury Amenities */
.repm-luxury-amenities {
margin: 40px 0;
}
.repm-luxury-amenities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 25px 0;
}
.repm-luxury-amenity-item {
text-align: center;
padding: 30px 20px;
background: white;
border-radius: 15px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
}
.repm-luxury-amenity-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.repm-amenity-image {
margin-bottom: 20px;
}
.repm-amenity-image img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #667eea;
transition: transform 0.3s ease;
}
.repm-luxury-amenity-item:hover .repm-amenity-image img {
transform: scale(1.1);
}
.repm-amenity-name {
font-size: 1.1em;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
/* Living Amenities */
.repm-living-amenities {
margin: 40px 0;
background: #f8f9fa;
padding: 30px;
border-radius: 15px;
}
.repm-living-amenities-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 15px;
margin: 25px 0;
}
.repm-living-amenity-item {
display: flex;
align-items: center;
padding: 18px 20px;
background: white;
border-radius: 10px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.repm-living-amenity-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.repm-amenity-number {
font-weight: 700;
color: #667eea;
margin-right: 15px;
font-size: 1.1em;
min-width: 35px;
}
.repm-amenity-name {
flex: 1;
font-weight: 500;
color: #2c3e50;
}
.repm-amenity-icon {
margin-left: 15px;
font-size: 1.2em;
}
/* Floor Plans */
.repm-floor-plans {
margin: 40px 0;
}
.repm-floor-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin: 25px 0;
}
.repm-floor-plan-item {
text-align: center;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
transition: transform 0.3s ease;
}
.repm-floor-plan-item:hover {
transform: translateY(-5px);
}
.repm-plan-image {
margin-bottom: 20px;
overflow: hidden;
border-radius: 10px;
}
.repm-plan-image img {
width: 100%;
height: auto;
max-height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.repm-floor-plan-item:hover .repm-plan-image img {
transform: scale(1.05);
}
.repm-plan-name {
font-size: 1.2em;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
/* Specifications */
.repm-specifications {
background: #f8f9fa;
padding: 30px;
border-radius: 15px;
margin: 40px 0;
border: 1px solid #e9ecef;
}
.repm-spec-category {
margin-bottom: 30px;
}
.repm-spec-category:last-child {
margin-bottom: 0;
}
.repm-spec-category-title {
font-size: 1.3em;
color: #667eea;
margin-bottom: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repm-spec-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.repm-spec-item {
background: white;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.repm-spec-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.repm-spec-icon {
font-size: 1.2em;
margin-right: 10px;
}
/* Why Choose */
.repm-why-choose {
margin: 40px 0;
}
.repm-why-choose-list {
margin: 25px 0;
}
.repm-why-choose-item {
display: flex;
align-items: flex-start;
padding: 20px;
margin-bottom: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.repm-why-choose-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}
.repm-point-number {
font-weight: 700;
color: #667eea;
margin-right: 20px;
min-width: 35px;
font-size: 1.1em;
}
.repm-point-text {
flex: 1;
line-height: 1.6;
color: #2c3e50;
font-weight: 500;
}
/* Property Gallery */
.repm-property-gallery {
margin: 40px 0;
}
.repm-gallery-description {
margin-bottom: 25px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid #667eea;
line-height: 1.6;
color: #495057;
}
.repm-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 25px 0;
}
.repm-gallery-item {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.repm-gallery-item:hover {
transform: translateY(-5px);
}
.repm-gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.repm-gallery-item:hover img {
transform: scale(1.1);
}
/* Property Location */
.repm-property-location {
margin: 40px 0;
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
}
.repm-full-address {
margin-bottom: 20px;
}
.repm-full-address h4 {
color: #2c3e50;
margin-bottom: 10px;
font-weight: 600;
}
.repm-address-details {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}
.repm-address-details span {
background: #f8f9fa;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9em;
color: #495057;
border: 1px solid #e9ecef;
}
.repm-google-map h4,
.repm-nearby-places h4 {
color: #2c3e50;
margin: 25px 0 15px 0;
font-weight: 600;
}
.repm-map-container {
height: 400px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.repm-nearby-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.repm-nearby-list li {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 8px;
border-left: 3px solid #667eea;
font-size: 0.9em;
color: #495057;
}
/* ===== PROPERTY MEDIA SECTION (MATCHING THEME STYLE) ===== */
/* Media Showcase Grid */
.repmx-media-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
/* Media Cards */
.repmx-media-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.repmx-media-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.repmx-media-card-content {
position: relative;
}
/* Video Card Specific */
.repmx-video-card .repmx-video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
}
.repmx-video-thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.repmx-thumbnail-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.repmx-video-thumbnail:hover .repmx-thumbnail-img {
transform: scale(1.05);
}
/* Play Button Overlay */
.repmx-play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
.repmx-video-thumbnail:hover .repmx-play-overlay {
background: rgba(0, 0, 0, 0.6);
}
.repmx-play-button {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.repmx-play-button:hover {
transform: scale(1.1);
background: white;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.repmx-play-icon {
width: 28px;
height: 28px;
color: #667eea;
margin-left: 3px; /* Optical alignment */
}
/* Video Player (Hidden initially) */
.repmx-video-player {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 10;
}
.repmx-video-player iframe {
width: 100%;
height: 100%;
border: none;
}
/* Media Card Info */
.repmx-media-card-info {
padding: 25px;
}
.repmx-media-card-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 12px 0;
}
.repmx-media-card-info p {
color: #64748b;
margin: 0 0 20px 0;
line-height: 1.6;
}
/* External Video Card */
.repmx-external-video-card .repmx-media-card-content {
padding: 40px;
text-align: center;
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.repmx-external-video-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.repmx-external-video-icon svg {
width: 36px;
height: 36px;
color: white;
}
/* Virtual Tour Card */
.repmx-tour-card .repmx-media-card-content {
padding: 40px;
text-align: center;
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.repmx-tour-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.repmx-tour-icon svg {
width: 36px;
height: 36px;
color: white;
}
/* Media Buttons */
.repmx-media-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.repmx-media-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
color: white;
text-decoration: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.repmx-media-showcase-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.repmx-video-card .repmx-video-container {
padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio on mobile */
}
.repmx-play-button {
width: 60px;
height: 60px;
}
.repmx-play-icon {
width: 24px;
height: 24px;
}
.repmx-media-card-info {
padding: 20px;
}
.repmx-external-video-card .repmx-media-card-content,
.repmx-tour-card .repmx-media-card-content {
padding: 30px 20px;
min-height: 200px;
}
.repmx-external-video-icon,
.repmx-tour-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
}
.repmx-external-video-icon svg,
.repmx-tour-icon svg {
width: 28px;
height: 28px;
}
}
@media (max-width: 480px) {
.repmx-media-showcase-grid {
gap: 16px;
}
.repmx-media-card-info h3 {
font-size: 1.25rem;
}
}
.repm-property-video h4,
.repm-virtual-tour h4 {
color: #2c3e50;
margin-bottom: 15px;
font-weight: 600;
}
.repm-youtube-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 10px;
}
.repm-youtube-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
.repm-video-button,
.repm-tour-button {
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 15px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repm-video-button:hover,
.repm-tour-button:hover {
background: linear-gradient(45deg, #5a6fd8, #6a4190);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
color: white;
}
/* Property Cards (for listings) */
.repm-property-card {
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.repm-property-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.repm-property-image {
position: relative;
overflow: hidden;
}
.repm-property-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.repm-property-card:hover .repm-property-image img {
transform: scale(1.05);
}
.repm-featured-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
color: #fff;
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repm-property-status {
position: absolute;
top: 15px;
right: 15px;
}
.repm-property-content {
padding: 25px;
}
.repm-property-title {
margin: 0 0 15px 0;
font-size: 1.3em;
font-weight: 600;
line-height: 1.3;
}
.repm-property-title a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.repm-property-title a:hover {
color: #667eea;
}
.repm-property-price {
font-size: 1.4em;
font-weight: 700;
color: #667eea;
margin-bottom: 15px;
}
.repm-property-location {
color: #6c757d;
margin-bottom: 15px;
font-size: 0.9em;
}
.repm-property-details {
color: #6c757d;
font-size: 0.9em;
margin-bottom: 15px;
}
.repm-property-excerpt {
color: #495057;
font-size: 0.9em;
line-height: 1.6;
margin-bottom: 20px;
}
.repm-property-actions {
text-align: center;
}
.repm-view-details {
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
color: #fff;
padding: 12px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repm-view-details:hover {
background: linear-gradient(45deg, #5a6fd8, #6a4190);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
color: #fff;
}
/* Search Form */
.repm-search-form {
background: white;
padding: 30px;
border-radius: 15px;
margin-bottom: 40px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
}
.repm-search-fields {
display: grid;
gap: 20px;
align-items: end;
}
.repm-search-horizontal .repm-search-fields {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.repm-search-vertical .repm-search-fields {
grid-template-columns: 1fr;
}
.repm-search-field input,
.repm-search-field select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.repm-search-field input:focus,
.repm-search-field select:focus {
outline: none;
border-color: #667eea;
}
.repm-search-submit {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repm-search-submit:hover {
background: linear-gradient(45deg, #5a6fd8, #6a4190);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
/* Responsive Design */
@media (max-width: 1024px) {
.repm-single-property-comprehensive {
padding: 15px;
}
.repm-property-header {
padding: 30px 20px;
}
.repm-property-name {
font-size: 2em;
}
.repm-price-display {
font-size: 1.8em;
}
.repm-luxury-amenities-grid,
.repm-living-amenities-list,
.repm-floor-plans-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.repm-spec-items {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 768px) {
.repm-single-property-comprehensive {
padding: 10px;
}
.repm-property-header {
padding: 25px 15px;
}
.repm-property-name {
font-size: 1.8em;
}
.repm-price-display {
font-size: 1.5em;
}
.repm-contact-btn {
padding: 15px 25px;
font-size: 1em;
}
.repm-section-title {
font-size: 1.5em;
margin: 30px 0 20px 0;
}
.repm-columns-2,
.repm-columns-3,
.repm-columns-4 {
grid-template-columns: 1fr;
}
.repm-search-horizontal .repm-search-fields {
grid-template-columns: 1fr;
}
.repm-luxury-amenities-grid,
.repm-living-amenities-list,
.repm-floor-plans-grid,
.repm-spec-items,
.repm-gallery-grid {
grid-template-columns: 1fr;
}
.repm-status-offer-section {
grid-template-columns: 1fr;
}
.repm-project-details-section,
.repm-living-amenities,
.repm-specifications,
.repm-property-location,
.repm-search-form {
padding: 20px;
}
.repm-luxury-amenity-item,
.repm-floor-plan-item,
.repm-property-status,
.repm-ongoing-offer,
.repm-property-video,
.repm-virtual-tour {
padding: 20px;
}
.repm-living-amenity-item,
.repm-spec-item,
.repm-why-choose-item {
padding: 15px;
}
.repm-address-details {
flex-direction: column;
gap: 10px;
}
.repm-nearby-list {
grid-template-columns: 1fr;
}
.repm-map-container {
height: 300px;
}
}
@media (max-width: 480px) {
.repm-property-name {
font-size: 1.5em;
}
.repm-price-display {
font-size: 1.3em;
}
.repm-contact-btn {
padding: 12px 20px;
font-size: 0.9em;
}
.repm-section-title {
font-size: 1.3em;
}
.repm-project-details-section,
.repm-living-amenities,
.repm-specifications,
.repm-property-location,
.repm-search-form {
padding: 15px;
}
.repm-luxury-amenity-item,
.repm-floor-plan-item,
.repm-property-status,
.repm-ongoing-offer,
.repm-property-video,
.repm-virtual-tour {
padding: 15px;
}
.repm-living-amenity-item,
.repm-spec-item,
.repm-why-choose-item {
padding: 12px;
}
.repm-amenity-image img {
width: 60px;
height: 60px;
}
.repm-gallery-item img {
height: 150px;
}
.repm-map-container {
height: 250px;
}
.repm-property-card {
margin-bottom: 20px;
}
.repm-property-content {
padding: 20px;
}
}
/* Print Styles */
@media print {
.repm-contact-btn,
.repm-video-button,
.repm-tour-button,
.repm-view-details,
.repm-search-form {
display: none;
}
.repm-single-property-comprehensive {
padding: 0;
max-width: none;
}
.repm-property-header {
background: none !important;
color: #000 !important;
box-shadow: none;
border: 1px solid #000;
}
.repm-section-title {
color: #000 !important;
border-bottom-color: #000 !important;
}
.repm-section-title::after {
background: #000 !important;
}
}
/* Property Card */
.repm-property-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.repm-property-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.repm-property-image {
position: relative;
overflow: hidden;
}
.repm-property-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s ease;
}
.repm-property-card:hover .repm-property-image img {
transform: scale(1.05);
}
.repm-featured-badge {
position: absolute;
top: 15px;
left: 15px;
background: #ff6b35;
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.repm-property-status {
position: absolute;
top: 15px;
right: 15px;
}
.repm-status-badge {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
}
.repm-status-for_sale {
background-color: #28a745;
}
.repm-status-for_rent {
background-color: #007cba;
}
.repm-status-sold {
background-color: #dc3545;
}
.repm-status-rented {
background-color: #6c757d;
}
.repm-status-coming_soon {
background-color: #ffc107;
color: #212529;
}
.repm-status-under_contract {
background-color: #fd7e14;
}
/* Property Content */
.repm-property-content {
padding: 25px;
}
.repm-property-title {
margin: 0 0 15px 0;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.repm-property-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.repm-property-title a:hover {
color: #007cba;
}
.repm-property-price {
font-size: 24px;
font-weight: 700;
color: #007cba;
margin-bottom: 10px;
}
.repm-property-location {
color: #666;
margin-bottom: 15px;
font-size: 14px;
}
.repm-property-details {
color: #888;
font-size: 14px;
margin-bottom: 15px;
}
.repm-property-excerpt {
color: #666;
font-size: 14px;
line-height: 1.5;
margin-bottom: 20px;
}
.repm-property-actions {
text-align: center;
}
.repm-view-details {
display: inline-block;
background: #007cba;
color: #fff;
padding: 12px 25px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
}
.repm-view-details:hover {
background: #005a87;
color: #fff;
}
/* Single Property Page */
.repm-property-details {
background: #f8f9fa;
padding: 30px;
border-radius: 8px;
margin: 30px 0;
}
.repm-property-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
margin-bottom: 30px;
}
.repm-property-price {
font-size: 32px;
font-weight: 700;
color: #007cba;
}
.repm-property-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin: 20px 0;
}
.repm-detail-item {
text-align: center;
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.repm-detail-icon {
display: block;
font-size: 24px;
margin-bottom: 8px;
}
.repm-detail-value {
display: block;
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.repm-detail-label {
display: block;
font-size: 12px;
color: #666;
text-transform: uppercase;
}
.repm-property-location {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 16px;
}
.repm-location-icon {
font-size: 18px;
}
/* Property Gallery */
.repm-property-gallery {
margin: 40px 0;
}
.repm-gallery-container {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.repm-gallery-main {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.repm-gallery-main-image {
width: 100%;
height: 500px;
object-fit: cover;
}
.repm-gallery-thumbnails {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
}
.repm-gallery-thumb {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 5px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.repm-gallery-thumb:hover,
.repm-gallery-thumb.active {
opacity: 1;
}
/* Property Features */
.repm-property-features {
margin: 40px 0;
}
.repm-property-features h3 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.repm-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.repm-feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: #f8f9fa;
border-radius: 5px;
}
.repm-feature-icon {
color: #28a745;
font-weight: bold;
}
.repm-feature-text {
color: #333;
}
/* Property Map */
.repm-property-map-section {
margin: 40px 0;
}
.repm-property-map-section h3 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.repm-property-map {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Mortgage Calculator */
.repm-mortgage-calculator-section {
margin: 40px 0;
}
.repm-mortgage-calculator {
background: #f8f9fa;
padding: 30px;
border-radius: 8px;
}
.repm-mortgage-calculator h3 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
.repm-calculator-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.repm-form-row {
display: flex;
flex-direction: column;
}
.repm-form-row label {
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
.repm-form-row input,
.repm-form-row select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.repm-calculate-btn {
grid-column: 1 / -1;
background: #007cba;
color: #fff;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.repm-calculate-btn:hover {
background: #005a87;
}
.repm-calculator-results {
background: #fff;
padding: 25px;
border-radius: 8px;
margin-top: 20px;
}
.repm-result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.repm-result-item:last-child {
border-bottom: none;
}
.repm-result-label {
font-weight: 600;
color: #333;
}
.repm-result-value {
font-size: 18px;
font-weight: 700;
color: #007cba;
}
/* Contact Form Notice */
.repmx-form-notice {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.repmx-form-notice p {
margin: 0 0 10px 0;
color: #856404;
}
.repmx-form-notice p:last-child {
margin-bottom: 0;
}
/* Form Messages */
.repm-form-messages {
margin-top: 15px;
}
.repm-success {
background: #d4edda;
color: #155724;
padding: 12px 15px;
border: 1px solid #c3e6cb;
border-radius: 5px;
}
.repm-error {
background: #f8d7da;
color: #721c24;
padding: 12px 15px;
border: 1px solid #f5c6cb;
border-radius: 5px;
}
/* Search Form */
.repm-search-form {
background: #f8f9fa;
padding: 30px;
border-radius: 8px;
margin: 30px 0;
}
.repm-search-fields {
display: grid;
gap: 15px;
align-items: end;
}
.repm-search-horizontal .repm-search-fields {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.repm-search-vertical .repm-search-fields {
grid-template-columns: 1fr;
}
.repm-search-field input,
.repm-search-field select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.repm-search-submit {
background: #007cba;
color: #fff;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.repm-search-submit:hover {
background: #005a87;
}
/* Responsive Design */
@media (max-width: 768px) {
.repm-columns-2,
.repm-columns-3,
.repm-columns-4 {
grid-template-columns: 1fr;
}
.repm-property-meta {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.repm-property-details-grid {
grid-template-columns: repeat(2, 1fr);
}
.repm-calculator-form {
grid-template-columns: 1fr;
}
.repm-search-horizontal .repm-search-fields {
grid-template-columns: 1fr;
}
.repm-gallery-main-image {
height: 300px;
}
.repm-property-price {
font-size: 24px;
}
}
@media (max-width: 480px) {
.repm-property-details-grid {
grid-template-columns: 1fr;
}
.repm-features-grid {
grid-template-columns: 1fr;
}
.repm-property-details,
.repm-mortgage-calculator,
.repm-search-form {
padding: 20px;
}
}
/* Utility Classes */
.repm-text-center {
text-align: center;
}
.repm-text-right {
text-align: right;
}
.repm-mb-20 {
margin-bottom: 20px;
}
.repm-mt-20 {
margin-top: 20px;
}
.repm-hidden {
display: none;
}
.repm-clearfix::after {
content: "";
display: table;
clear: both;
}
/* ============= REPMX Premium Redesign Layer ============= */
/* Namespaced to .repmx to avoid conflicts with older styles */
.repmx * { box-sizing: border-box; }
.repmx { --brand:#6b4bff; --brand2:#00d4ff; --ink:#0f172a; --muted:#475569; --card:#ffffff; --bg:#f6f8fb; --ring:rgba(107,75,255,.25);}
.repmx .repmx-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
/* Property Information Section - Premium Luxury Design */
.repmx-property-info {
padding: 60px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
}
.repmx-property-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.repmx-info-layout { display: flex; gap: 40px; align-items: stretch; }
/* Left Gallery Container - Premium Luxury */
.repmx-gallery-container {
background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
border-radius: 34px;
padding: 24px;
width: 600px;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
min-height: 500px;
border: 5px solid #ffffff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.repmx-logo-section {
background: linear-gradient(145deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
border-radius: 18px;
padding: 5px;
text-align: center;
width: 90px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 24px;
right: 24px;
z-index: 10;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.repmx-logo-img {
max-width: 60px;
max-height: 60px;
object-fit: contain;
}
.repmx-logo-placeholder {
color: #f97316;
font-weight: 600;
font-size: 14px;
}
.repmx-gallery-main {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 26px;
overflow: hidden;
z-index: 1;
}
.repmx-gallery-slideshow {
position: relative;
width: 100%;
height: 100%;
}
.repmx-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
animation: zoomInOut 12s ease-in-out infinite;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.repmx-gallery-img.active {
opacity: 1;
}
@keyframes zoomInOut {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
}
}
.repmx-gallery-placeholder {
color: #f97316;
font-size: 18px;
font-weight: 500;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* Right Details Container - Premium Luxury */
.repmx-details-container {
flex: 1;
position: relative;
}
.repmx-property-title {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 48px;
font-weight: 800;
margin: 0 0 16px 0;
line-height: 1.1;
letter-spacing: -0.025em;
position: relative;
}
.repmx-property-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
border-radius: 2px;
opacity: 0.6;
}
.repmx-price-section {
background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ea580c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 32px;
font-weight: 800;
margin-bottom: 20px;
letter-spacing: -0.025em;
position: relative;
}
/* Action Buttons */
.repmx-action-buttons {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.repmx-enquiry-text {
font-size: 32px;
background: linear-gradient(135deg, #1e40af 0%, #3c81f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
margin-right: 8px;
font-weight: 300;
white-space: nowrap;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.repmx-action-icons {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.repmx-btn-whatsapp {
background: linear-gradient(145deg, #25d366 0%, #20c55e 100%);
color: white;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 45px;
height: 45px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 4px 14px 0 rgba(37, 211, 102, 0.3),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.repmx-btn-whatsapp::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.repmx-btn-whatsapp:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px 0 rgba(37, 211, 102, 0.4),
0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
.repmx-btn-whatsapp:hover::before {
left: 100%;
}
.repmx-btn-phone {
background: linear-gradient(145deg, #2576e5 0%, #1d64d2 100%);
color: white;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 45px;
height: 45px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 4px 14px 0 rgba(37, 118, 229, 0.3),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.repmx-btn-phone::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.repmx-btn-phone:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px 0 rgba(37, 118, 229, 0.4),
0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
.repmx-btn-phone:hover::before {
left: 100%;
}
.repmx-btn-message {
background: linear-gradient(145deg, #2576e5 0%, #1d64d2 100%);
color: white;
padding: 8px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 45px;
height: 45px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 4px 14px 0 rgba(37, 118, 229, 0.3),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
cursor: pointer;
}
.repmx-btn-message::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.repmx-btn-message:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px 0 rgba(37, 118, 229, 0.4),
0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
.repmx-btn-message:hover::before {
left: 100%;
}
.repmx-btn-callback {
background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
color: white;
padding: 8px 12px;
border: none;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 45px;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.3),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
animation: pulse 2s infinite;
cursor: pointer;
}
.repmx-btn-callback::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.repmx-btn-callback:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px 0 rgba(239, 68, 68, 0.4),
0 4px 8px 0 rgba(0, 0, 0, 0.15);
}
.repmx-btn-callback:hover::before {
left: 100%;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.02);
opacity: 0.95;
}
}
.repmx-callback-text {
font-size: 10px;
font-weight: 700;
text-align: center;
line-height: 1;
letter-spacing: 0.5px;
}
/* Details Grid - Premium Luxury Compact */
.repmx-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 32px;
margin-bottom: 24px;
}
.repmx-detail-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
padding: 8px 0;
transition: all 0.3s ease;
}
.repmx-detail-item:hover {
transform: translateX(2px);
}
.repmx-detail-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.repmx-detail-label {
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.repmx-detail-text {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Status Row */
.repmx-status-row {
display: flex;
gap: 48px;
margin-bottom: 20px;
}
.repmx-status-item { display: flex; flex-direction: column; gap: 4px; }
.repmx-status-label {
color: #f97316;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repmx-status-value {
color: #374151;
font-weight: 600;
font-size: 14px;
}
/* RERA Section */
.repmx-rera-section {
margin-bottom: 24px;
}
.repmx-rera-label {
color: #f97316;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 4px;
}
.repmx-rera-value {
color: #374151;
font-weight: 600;
font-size: 14px;
}
/* Offer Section - Premium Luxury */
.repmx-offer-section {
background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
border-radius: 20px;
padding: 24px;
width: 100%;
display: block;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(59, 130, 246, 0.1) inset;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.repmx-offer-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.repmx-offer-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
.repmx-offer-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.2));
}
.repmx-offer-title {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.025em;
}
.repmx-offer-content {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 16px;
font-weight: 600;
line-height: 1.6;
margin-top: 8px;
position: relative;
z-index: 1;
}
/* Responsive */
@media (max-width: 1024px) {
.repmx-info-layout { flex-direction: column; }
.repmx-gallery-container { width: 100%; max-width: 420px; margin: 0 auto; }
.repmx-property-title { font-size: 36px; }
.repmx-property-name { font-size: 36px; }
.repmx-price-section { font-size: 24px; }
}
/* Tablet responsive */
@media (max-width: 768px) {
.repmx-enquiry-text {
font-size: 26px;
margin-right: 6px;
}
.repmx-action-icons {
gap: 6px;
}
.repmx-btn-whatsapp,
.repmx-btn-phone,
.repmx-btn-message,
.repmx-btn-callback {
width: 40px;
height: 40px;
padding: 6px;
}
.repmx-callback-badge {
width: 22px;
height: 22px;
font-size: 6px;
top: -5px;
right: -5px;
}
}
/* Hide mobile header on desktop */
.repmx-mobile-header {
display: none;
}
/* Mobile responsive */
@media (max-width: 640px) {
.repmx-details-grid { grid-template-columns: 1fr; gap: 12px; }
.repmx-status-row { flex-direction: column; gap: 16px; }
/* Show mobile header and hide desktop title/price */
.repmx-mobile-header {
display: block;
margin-bottom: 20px;
}
.repmx-details-container .repmx-property-title:not(.repmx-mobile-title),
.repmx-details-container .repmx-price-section:not(.repmx-mobile-price) {
display: none;
}
/* Gallery container mobile adjustments */
.repmx-gallery-container {
min-height: 250px;
border: 2px solid #ffffff;
border-radius: 27px;
}
/* Property logo 50% smaller on mobile */
.repmx-logo-section {
width: 40px;
height: 40px;
padding: 8px;
border-radius: 12px;
right: 12px;
top: 12px;
}
.repmx-logo-img {
max-width: 35px;
max-height: 35px;
object-fit: contain;
}
/* Action buttons mobile adjustments */
.repmx-action-buttons {
flex-wrap: nowrap;
overflow-x: auto;
gap: 50px;
min-height: 65px;
}
.repmx-enquiry-text {
font-size: 20px;
margin-right: 4px;
flex-shrink: 0;
}
.repmx-action-icons {
gap: 4px;
flex-shrink: 0;
}
.repmx-btn-whatsapp svg,
.repmx-btn-phone svg,
.repmx-btn-message svg,
.repmx-btn-callback svg {
width: 18px;
height: 18px;
}
.repmx-btn-whatsapp,
.repmx-btn-phone,
.repmx-btn-message,
.repmx-btn-callback {
width: 36px;
height: 36px;
padding: 5px;
}
.repmx-callback-badge {
width: 20px;
height: 20px;
font-size: 5px;
top: -4px;
right: -4px;
}
.repmx-property-title { font-size: 28px; }
.repmx-price-section { font-size: 20px; }
}
/* Extra small mobile */
@media (max-width: 480px) {
.repmx-enquiry-text {
font-size: 18px;
margin-right: 3px;
}
.repmx-action-icons {
gap: 3px;
}
.repmx-btn-whatsapp,
.repmx-btn-phone,
.repmx-btn-message,
.repmx-btn-callback {
width: 32px;
height: 32px;
padding: 4px;
}
.repmx-callback-badge {
width: 18px;
height: 18px;
font-size: 4px;
top: -3px;
right: -3px;
}
}
/* Hero */
.repmx-hero{ position:relative; padding:80px 0; color:#fff; background: radial-gradient(1200px 600px at 10% 10%, rgba(107,75,255,.35), transparent 40%), linear-gradient(130deg, #111827 0%, #0b1220 50%, #111827 100%); }
.repmx-hero[style*="--repmx-hero"]{ background-image: radial-gradient(1200px 600px at 10% 10%, rgba(107,75,255,.35), transparent 40%), var(--repmx-hero); background-size:auto, cover; background-position:center; }
.repmx-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.7) 100%);}
.repmx-hero__content{ position:relative; z-index:2; text-align:center; }
.repmx-hero__logo img{ max-height:80px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.2);}
.repmx-hero__title{ font-size: clamp(2rem, 4.5vw, 3.5rem); margin:18px 0 8px; font-weight:800; letter-spacing:-.02em; }
.repmx-hero__meta{ color:#e2e8f0; margin-bottom:10px; font-weight:600; }
.repmx-hero__price{ display:inline-block; margin:18px 0 22px; padding:10px 18px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.2); font-weight:800; font-size:clamp(1rem,2.2vw,1.25rem);}
.repmx-hero__cta{ display:flex; gap:12px; justify-content:center; }
/* Buttons */
.repmx-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; transition:.25s ease; border:1px solid transparent; }
.repmx-btn--primary{ background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color:#fff; box-shadow:0 10px 25px rgba(107,75,255,.35); }
.repmx-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 35px rgba(107,75,255,.45);}
.repmx-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.repmx-btn--ghost:hover{ background:rgba(255,255,255,.08);}
.repmx-btn--soft{ background:#0f172a; color:#fff; border-color:#0f172a; }
.repmx-btn--soft:hover{ background:#1f2937; }
/* Sections */
.repmx-section{ padding:60px 0; background:var(--bg); }
.repmx-section:nth-of-type(even){ background:#ffffff; }
.repmx-section__title{ font-size:clamp(1.4rem,3vw,2rem); color:var(--ink); margin:0 0 18px; font-weight:900; letter-spacing:.02em; }
/* Cards / grids */
.repmx-card-grid .repm-project-details{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; }
.repmx-card-grid .repm-detail-item{ background:var(--card); padding:18px; border-radius:14px; border:1px solid #e2e8f0; box-shadow:0 6px 18px rgba(2,6,23,.06); transition:.25s ease; }
.repmx-card-grid .repm-detail-item:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(2,6,23,.12);}
.repmx-card-grid .label{ color:#64748b; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.repmx-card-grid .value{ color:#0f172a; font-weight:700; font-size:1.1rem; }
/* About */
.repmx-about__card{ background:var(--card); border:1px solid #e2e8f0; border-radius:18px; padding:24px; box-shadow:0 8px 24px rgba(2,6,23,.07);}
.repmx-about__text{ color:var(--muted); font-size:1.05rem; line-height:1.9; }
/* Split */
.repmx-split{ display:grid; gap:24px; grid-template-columns:1fr 1fr; }
@media (max-width: 900px){ .repmx-split{ grid-template-columns:1fr; } }
/* Archive hero */
.repmx-archive-hero{ background: radial-gradient(800px 500px at 85% -10%, rgba(0,212,255,.25), transparent 40%), linear-gradient(120deg,#f97315 0%, #0165f5 100%); padding:60px 0 30px; color:#fff; text-align:center; }
.repmx-archive-hero__title{ margin:0 0 8px; font-weight:900; font-size:clamp(1.8rem,4vw,2.4rem);}
.repmx-archive-hero__sub{ margin:0 0 18px; opacity:.85; }
.repmx-archive-hero .repm-search-form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 30px rgba(0,0,0,.25); }
/* Archive grid */
.repmx-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
.repmx-card{ background:var(--card); border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(2,6,23,.06); transition:.25s ease; }
.repmx-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(2,6,23,.12);}
.repmx-card__media{ position:relative; overflow:hidden; }
.repmx-card__thumb img{ display:block; width:100%; height:220px; object-fit:cover; transition: transform .35s ease; }
.repmx-card:hover .repmx-card__thumb img{ transform:scale(1.05);}
.repmx-card__ph{ height:220px; background:linear-gradient(135deg,#e2e8f0,#f1f5f9);}
.repmx-badge{ position:absolute; top:12px; left:12px; background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; padding:6px 10px; font-size:.75rem; font-weight:800; border-radius:999px; box-shadow:0 8px 20px rgba(107,75,255,.35);}
.repmx-card__body{ padding:16px; }
.repmx-card__title{ margin:0 0 6px; font-size:1.05rem; font-weight:800; color:var(--ink); }
.repmx-card__title a{ color:inherit; text-decoration:none; }
.repmx-card__title a:hover{ text-decoration:underline; }
.repmx-card__loc{ display:flex; align-items:center; gap:8px; color:#475569; font-weight:600; margin-bottom:6px; }
.repmx-icon{ display:inline-flex; align-items:center; }
.repmx-card__price{ color:var(--brand); font-weight:900; font-size:1.05rem; margin:6px 0 10px; }
.repmx-card__actions{ display:flex; justify-content:flex-start; }
/* Contact Form Styling */
.repmx-inquiry__wrap{
background:var(--card);
border:1px solid #e2e8f0;
border-radius:18px;
padding:24px;
box-shadow:0 8px 24px rgba(2,6,23,.07);
position: relative;
overflow: visible;
z-index: 1;
}
.repmx-inquiry__head p{ color:var(--muted); margin:4px 0 18px; }
/* Ensure form container allows dropdowns to overflow */
.repmx-inquiry .repmx-inquiry__form {
position: relative;
overflow: visible;
z-index: 10;
}
/* Fluent Forms Styling */
.repmx-inquiry .fluentform {
background: transparent;
padding: 0;
}
.repmx-inquiry .fluentform .ff-el-form-control {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
margin-bottom: 16px;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.repmx-inquiry .fluentform .ff-el-form-control:focus {
border-color: var(--brand);
outline: none;
box-shadow: 0 0 0 3px rgba(107,75,255,.1);
}
.repmx-inquiry .fluentform .ff-btn-submit {
background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
color: white !important;
border: none !important;
padding: 15px 30px !important;
border-radius: 8px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 25px rgba(107,75,255,.25) !important;
text-decoration: none !important;
display: inline-block !important;
}
.repmx-inquiry .fluentform .ff-btn-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 15px 35px rgba(107,75,255,.35) !important;
}
.repmx-inquiry .fluentform .ff-el-input--label label {
font-weight: 600;
color: #333;
margin-bottom: 8px;
display: block;
}
/* Universal Enquiry Popup System */
.repmx-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: 20px;
box-sizing: border-box;
}
.repmx-popup-overlay.active {
opacity: 1;
visibility: visible;
}
.repmx-popup-container {
background: var(--card, #fff);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow: hidden; /* Changed to handle height transitions better */
position: relative;
transform: scale(0.8) translateY(50px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-popup-overlay.active .repmx-popup-container {
transform: scale(1) translateY(0);
}
.repmx-popup-header {
padding: 30px 30px 20px;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.repmx-popup-title {
font-size: 24px;
font-weight: 700;
color: var(--text, #333);
margin: 0;
padding-right: 40px;
}
.repmx-popup-subtitle {
font-size: 14px;
color: var(--muted, #666);
margin: 8px 0 0;
}
.repmx-popup-close {
position: absolute;
top: 25px;
right: 25px;
width: 40px;
height: 40px;
border: none;
background: #f8f9fa;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-size: 18px;
color: #666;
}
.repmx-popup-close:hover {
background: #e9ecef;
transform: scale(1.1);
}
.repmx-popup-close:before {
content: "×";
font-weight: 300;
line-height: 1;
}
.repmx-popup-content {
padding: 30px;
overflow-y: auto;
max-height: calc(90vh - 120px); /* Account for header height */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smooth height transition wrapper */
.repmx-popup-content-wrapper {
overflow: hidden;
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Loading state specific styles */
.repmx-popup-content.loading {
opacity: 0.7;
transform: translateY(10px);
transition: all 0.3s ease;
}
.repmx-popup-content.loaded {
opacity: 1;
transform: translateY(0);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-popup-loading {
text-align: center;
padding: 40px;
color: var(--muted, #666);
}
.repmx-popup-loading:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #e2e8f0;
border-top: 2px solid var(--brand, #6b4bff);
border-radius: 50%;
animation: repmx-spin 1s linear infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes repmx-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.repmx-popup-overlay {
padding: 10px;
}
.repmx-popup-container {
border-radius: 15px;
max-height: 95vh;
}
.repmx-popup-header {
padding: 20px 20px 15px;
}
.repmx-popup-title {
font-size: 20px;
padding-right: 35px;
}
.repmx-popup-close {
top: 15px;
right: 15px;
width: 35px;
height: 35px;
}
.repmx-popup-content {
padding: 20px;
}
}
/* Form Styling Inside Popup */
.repmx-popup-content .fluentform,
.repmx-popup-content .contact-form,
.repmx-popup-content .wpcf7 {
background: transparent;
padding: 0;
}
.repmx-popup-content .ff-el-form-control,
.repmx-popup-content .contact-form input,
.repmx-popup-content .contact-form textarea,
.repmx-popup-content .contact-form select,
.repmx-popup-content .wpcf7 input,
.repmx-popup-content .wpcf7 textarea,
.repmx-popup-content .wpcf7 select {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
margin-bottom: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.repmx-popup-content .ff-el-form-control:focus,
.repmx-popup-content .contact-form input:focus,
.repmx-popup-content .contact-form textarea:focus,
.repmx-popup-content .contact-form select:focus,
.repmx-popup-content .wpcf7 input:focus,
.repmx-popup-content .wpcf7 textarea:focus,
.repmx-popup-content .wpcf7 select:focus {
border-color: var(--brand, #6b4bff);
outline: none;
box-shadow: 0 0 0 3px rgba(107, 75, 255, 0.1);
}
.repmx-popup-content .ff-btn-submit,
.repmx-popup-content .contact-form button[type="submit"],
.repmx-popup-content .contact-form input[type="submit"],
.repmx-popup-content .wpcf7 input[type="submit"] {
background: linear-gradient(135deg, var(--brand, #6b4bff), var(--brand2, #8b5cf6)) !important;
color: white !important;
border: none !important;
padding: 15px 30px !important;
border-radius: 10px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 25px rgba(107, 75, 255, 0.25) !important;
text-decoration: none !important;
display: inline-block !important;
width: auto !important;
}
.repmx-popup-content .ff-btn-submit:hover,
.repmx-popup-content .contact-form button[type="submit"]:hover,
.repmx-popup-content .contact-form input[type="submit"]:hover,
.repmx-popup-content .wpcf7 input[type="submit"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 15px 35px rgba(107, 75, 255, 0.35) !important;
}
/* Prevent body scroll when popup is open */
body.repmx-popup-open {
overflow: hidden;
}
/* Gallery wrapper tune-up */
.repmx-gallery .repm-property-gallery{ background:transparent; box-shadow:none; padding:0; }
/* Location block normalize */
.repmx-location .repm-property-location{ background:var(--card); border:1px solid #e2e8f0; box-shadow:0 8px 24px rgba(2,6,23,.07); }
/* Media block normalize */
.repmx-media .repm-property-media > *{ margin-bottom:0; }
/* Pagination */
.repmx-pagination{ display:flex; justify-content:center; gap:8px; margin:28px 0 0; }
.repmx-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:10px; background:#fff; border:1px solid #e2e8f0; color:#0f172a; font-weight:700; text-decoration:none; box-shadow:0 4px 14px rgba(2,6,23,.05);}
.repmx-pagination .page-numbers.current{ background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#fff; border-color:transparent; }
/* ===== VISUAL SHOWCASE GALLERY ===== */
.repmx-visual-showcase {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
}
.repmx-visual-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
pointer-events: none;
}
/* Gallery Header */
.repmx-showcase-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.repmx-cityscape-icon {
margin: 0 auto -5px auto;
display: block;
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.15));
width: 350px;
height: 120px;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.1s ease;
}
.repmx-cityscape-icon.animate {
animation: svgRevealFromBottom 2.5s ease-out forwards;
}
@keyframes svgRevealFromBottom {
0% {
clip-path: inset(100% 0 0 0);
}
30% {
clip-path: inset(85% 0 0 0);
}
100% {
clip-path: inset(0% 0 0 0);
}
}
.repmx-showcase-title {
font-size: 48px;
font-weight: 900;
color: #1e40af;
letter-spacing: 20px;
text-transform: uppercase;
margin: 0;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(30, 64, 175, 0.2);
position: relative;
opacity: 0.7;
transition: letter-spacing 0.1s ease, opacity 0.1s ease;
}
.repmx-showcase-title.animate {
animation: titleLetterSpacing 2.5s ease-out forwards;
}
@keyframes titleLetterSpacing {
0% {
letter-spacing: 20px;
opacity: 0.7;
}
100% {
letter-spacing: 4px;
opacity: 1;
}
}
/* ============================================
UNIVERSAL SECTION TITLE SYSTEM (H2)
============================================ */
/* Universal H2 Title Container */
.repmx-universal-title-container {
text-align: center !important;
margin-bottom: 60px;
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Universal H2 Title SVG Icon */
.repmx-universal-title-svg {
margin: 0 auto -5px auto !important;
display: block !important;
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.15));
width: 350px;
height: 120px;
clip-path: inset(100% 0 0 0);
transition: clip-path 0.1s ease;
}
.repmx-universal-title-svg.animate {
animation: svgRevealFromBottom 2.5s ease-out forwards;
}
/* Universal H2 Title Text */
.repmx-universal-title-text {
font-size: 48px;
font-weight: 900;
color: #1e40af;
letter-spacing: 20px;
text-transform: uppercase;
margin: 0;
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(30, 64, 175, 0.2);
position: relative;
opacity: 0.7;
transition: letter-spacing 0.1s ease, opacity 0.1s ease;
}
.repmx-universal-title-text.animate {
animation: titleLetterSpacing 2.5s ease-out forwards;
}
/* Responsive Design for Universal Titles */
@media (max-width: 1023px) {
.repmx-universal-title-svg {
width: 300px;
height: 110px;
margin: 0 auto -5px auto;
}
.repmx-universal-title-text {
letter-spacing: 15px;
font-size: 36px;
}
@keyframes titleLetterSpacing {
0% {
letter-spacing: 15px;
opacity: 0.7;
}
100% {
letter-spacing: 2px;
opacity: 1;
}
}
}
@media (max-width: 767px) {
.repmx-universal-title-svg {
width: 250px;
height: 100px;
margin: 0 auto -5px auto;
}
.repmx-universal-title-text {
letter-spacing: 10px;
font-size: 28px;
}
@keyframes titleLetterSpacing {
0% {
letter-spacing: 10px;
opacity: 0.7;
}
100% {
letter-spacing: 1px;
opacity: 1;
}
}
}
/* ============================================
STICKY SECTION NAVIGATION
============================================ */
/* Sticky Navigation Container */
.repmx-sticky-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(59, 130, 246, 0.1);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
z-index: 999;
padding: 10px 16px;
transform: translateY(100%);
opacity: 0;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-sticky-nav.active {
transform: translateY(0);
opacity: 1;
}
/* Navigation Grid */
.repmx-nav-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
max-width: 1200px;
margin: 0 auto;
}
/* Navigation Items */
.repmx-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
text-decoration: none;
color: #64748b;
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
min-height: 50px;
transform: scale(1);
}
.repmx-nav-item:hover {
color: #3b82f6;
background: rgba(59, 130, 246, 0.05);
transform: translateY(-2px) scale(1.02);
}
.repmx-nav-item.active {
color: #3b82f6;
background: rgba(59, 130, 246, 0.1);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
/* Navigation Icons */
.repmx-nav-icon {
width: 22px;
height: 22px;
margin-bottom: 4px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: all 0.3s ease;
}
.repmx-nav-item:hover .repmx-nav-icon {
transform: scale(1.1);
}
/* Navigation Text */
.repmx-nav-text {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
line-height: 1.2;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.repmx-sticky-nav {
padding: 6px 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.repmx-nav-grid {
display: flex;
gap: 12px;
min-width: max-content;
padding: 0 8px;
scroll-snap-type: x mandatory;
}
.repmx-nav-item {
flex-shrink: 0;
min-width: 80px;
padding: 6px 8px;
min-height: 44px;
scroll-snap-align: center;
}
.repmx-nav-icon {
width: 20px;
height: 20px;
}
.repmx-nav-text {
font-size: 9px;
}
}
/* ============================================
YOUTUBE VIDEO INTEGRATION
============================================ */
/* Video Container */
.repmx-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
border-radius: 12px;
overflow: hidden;
z-index: 10;
}
.repmx-video-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
}
/* Video Toggle Button */
.repmx-video-toggle-btn {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: white;
border: none;
border-radius: 25px;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 20;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.repmx-video-toggle-btn:hover {
background: rgba(0, 0, 0, 0.9);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}
.repmx-video-toggle-btn:active {
transform: translateY(0);
}
/* Video Button Icons */
.repmx-play-icon,
.repmx-pause-icon {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.repmx-video-toggle-btn:hover .repmx-play-icon,
.repmx-video-toggle-btn:hover .repmx-pause-icon {
transform: scale(1.1);
}
/* Video Button Text */
.repmx-video-btn-text {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Gallery Main Position Context - Override for video integration */
.repmx-gallery-main {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 26px;
overflow: hidden;
z-index: 1;
}
/* Hide YouTube UI Elements - Advanced CSS */
.repmx-video-iframe {
pointer-events: auto;
/* Hide YouTube watermark and controls */
filter: none;
}
/* Additional YouTube UI hiding */
.repmx-video-container::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 50px;
background: transparent;
pointer-events: none;
z-index: 15;
}
/* Ensure video fills container perfectly */
.repmx-video-iframe {
object-fit: cover;
transform: scale(1.01); /* Slight scale to hide any borders */
}
/* Mobile Responsive */
@media (max-width: 768px) {
.repmx-video-toggle-btn {
bottom: 12px;
left: 12px;
padding: 10px 16px;
font-size: 13px;
}
.repmx-play-icon,
.repmx-pause-icon {
width: 16px;
height: 16px;
}
.repmx-video-btn-text {
font-size: 13px;
}
}
/* Smooth Scroll Behavior */
html {
scroll-behavior: smooth;
}
/* Section Padding for Sticky Nav */
.repmx-section-anchor {
scroll-margin-top: 100px;
scroll-margin-bottom: 100px;
}
/* Legacy Support - Keep existing classes working */
/* Gallery Layout */
.repmx-showcase-gallery {
display: flex;
gap: 30px;
align-items: stretch;
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* Overview Card */
.repmx-overview-card {
flex: 1;
min-height: 500px;
border-radius: 20px;
border: 1px solid rgba(226, 232, 240, 0.8);
background: linear-gradient(135deg,
rgba(30, 64, 175, 0.9) 0%,
rgba(59, 130, 246, 0.8) 50%,
rgba(96, 165, 250, 0.7) 100%),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-overview-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px rgba(30, 64, 175, 0.25);
}
/* Overview card stays STATIC during gallery changes */
.repmx-overview-content {
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.repmx-overview-title {
font-size: 32px;
font-weight: 900;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0 0 30px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.repmx-overview-text {
color: white;
font-size: 16px;
line-height: 1.8;
font-weight: 400;
}
.repmx-overview-text p {
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.repmx-overview-text strong {
font-weight: 700;
color: #fbbf24;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Image Mosaic */
.repmx-image-mosaic {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
min-height: 500px;
}
.repmx-mosaic-row {
display: flex;
gap: 15px;
flex: 1;
height: 240px; /* Fixed height to prevent layout shifts */
}
.repmx-mosaic-image {
border-radius: 15px;
border: 1px solid rgba(226, 232, 240, 0.8);
overflow: hidden;
position: relative;
background: #f1f5f9;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%; /* Fixed height */
}
.repmx-mosaic-image:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.repmx-mosaic-image img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-mosaic-image:hover img {
transform: scale(1.05);
}
/* Premium SLIDE animation for image changes */
.repmx-mosaic-image {
position: relative;
}
.repmx-mosaic-image .slide-out {
animation: slideOutLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.repmx-mosaic-image .slide-in {
animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes slideOutLeft {
0% {
transform: translateX(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-100%) scale(0.9);
opacity: 0;
}
}
@keyframes slideInRight {
0% {
transform: translateX(100%) scale(0.9);
opacity: 0;
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
/* Premium glow effect on hover */
.repmx-mosaic-image:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(59, 130, 246, 0.2);
}
.repmx-mosaic-image:hover::after {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Fullscreen Icon */
.repmx-mosaic-image::after {
content: '';
position: absolute;
top: 15px;
right: 15px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
z-index: 5;
background-image: url('data:image/svg+xml,');
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.repmx-mosaic-image:hover::after {
opacity: 1;
transform: scale(1.1);
}
.repmx-mosaic-image:hover::after:hover {
background: rgba(59, 130, 246, 0.9);
transform: scale(1.2);
}
/* Criss-cross width pattern - 40%-60% ratio */
.repmx-top-row .repmx-narrow,
.repmx-bottom-row .repmx-narrow {
flex: 0.4;
}
.repmx-top-row .repmx-wide,
.repmx-bottom-row .repmx-wide {
flex: 0.6;
}
/* Navigation Dots */
.repmx-gallery-nav {
position: absolute;
right: -50px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 15px;
z-index: 3;
}
.repmx-nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #cbd5e1;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.repmx-nav-dot::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3b82f6, #60a5fa);
border-radius: 50%;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.repmx-nav-dot:hover {
background: #94a3b8;
transform: scale(1.3);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.repmx-nav-dot.repmx-active {
background: #3b82f6;
transform: scale(1.4);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 6px 20px rgba(59, 130, 246, 0.4);
animation: pulseActive 2s ease-in-out infinite;
}
.repmx-nav-dot.repmx-active::before {
transform: scale(1);
}
.repmx-nav-dot.repmx-active::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
z-index: 2;
animation: sparkle 1.5s ease-in-out infinite;
}
@keyframes pulseActive {
0%, 100% {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 6px 20px rgba(59, 130, 246, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3), 0 8px 25px rgba(59, 130, 246, 0.5);
}
}
@keyframes sparkle {
0%, 100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Fullscreen Modal */
.repmx-fullscreen-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.repmx-fullscreen-modal.active {
display: flex;
}
.repmx-modal-content {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px; /* Space for controls */
}
.repmx-modal-image {
max-width: calc(100vw - 200px); /* Account for navigation buttons */
max-height: calc(100vh - 120px); /* Account for close button and counter */
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.repmx-modal-close {
position: fixed;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
color: white;
font-size: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10001;
}
.repmx-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.repmx-modal-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
color: white;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10001;
}
.repmx-modal-nav:hover {
background: rgba(0, 0, 0, 0.9);
transform: translateY(-50%) scale(1.1);
}
.repmx-modal-prev {
left: 30px;
}
.repmx-modal-next {
right: 30px;
}
.repmx-modal-counter {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 18px;
font-weight: 600;
background: rgba(0, 0, 0, 0.7);
padding: 12px 24px;
border-radius: 25px;
backdrop-filter: blur(10px);
z-index: 10001;
}
/* Visual Showcase Mobile Responsive */
@media (max-width: 1024px) {
.repmx-gallery-nav {
right: -30px;
}
.repmx-showcase-gallery {
gap: 20px;
}
}
@media (max-width: 768px) {
.repmx-visual-showcase {
padding: 60px 0;
}
.repmx-showcase-title {
font-size: 36px;
letter-spacing: 2px;
}
.repmx-cityscape-icon {
width: 300px;
height: 110px;
margin: 0 auto -5px auto;
}
.repmx-showcase-title {
letter-spacing: 15px;
}
@keyframes titleLetterSpacing {
0% {
letter-spacing: 15px;
opacity: 0.7;
}
100% {
letter-spacing: 2px;
opacity: 1;
}
}
.repmx-showcase-gallery {
flex-direction: column;
gap: 30px;
}
.repmx-overview-card {
min-height: 300px;
}
.repmx-overview-content {
padding: 30px;
}
.repmx-overview-title {
font-size: 24px;
letter-spacing: 2px;
}
.repmx-overview-text {
font-size: 15px;
}
/* Mobile: Single row gallery */
.repmx-image-mosaic {
min-height: 200px;
flex-direction: row;
gap: 15px;
overflow: hidden;
}
.repmx-mosaic-row {
display: none; /* Hide row structure on mobile */
}
/* Mobile: Show images in single row */
.repmx-image-mosaic .repmx-mosaic-image.repmx-mobile-only {
display: block !important;
flex: 0 0 calc(50% - 7.5px); /* 2 images visible at once */
height: 200px;
position: relative;
}
/* Hide desktop row structure on mobile */
.repmx-image-mosaic .repmx-mosaic-image:not(.repmx-mobile-only) {
display: none;
}
.repmx-gallery-nav {
position: static;
flex-direction: row;
justify-content: center;
margin-top: 20px;
transform: none;
flex-wrap: wrap;
gap: 8px;
}
/* Mobile dots styling */
.repmx-gallery-nav .repmx-nav-dot {
width: 10px;
height: 10px;
margin: 0;
}
}
@media (max-width: 640px) {
.repmx-visual-showcase {
padding: 40px 0;
}
.repmx-showcase-title {
font-size: 24px;
letter-spacing: 1px;
}
.repmx-cityscape-icon {
width: 250px;
height: 100px;
margin: 0 auto -5px auto;
}
.repmx-showcase-title {
letter-spacing: 10px;
}
@keyframes titleLetterSpacing {
0% {
letter-spacing: 10px;
opacity: 0.7;
}
100% {
letter-spacing: 1px;
opacity: 1;
}
}
.repmx-overview-card {
min-height: 250px;
}
.repmx-overview-content {
padding: 20px;
}
.repmx-overview-title {
font-size: 18px;
margin-bottom: 15px;
}
.repmx-overview-text {
font-size: 13px;
line-height: 1.5;
}
/* Mobile: Single row with horizontal scroll effect */
.repmx-image-mosaic {
min-height: 180px;
gap: 10px;
padding: 0 10px;
}
.repmx-image-mosaic .repmx-mosaic-image.repmx-mobile-only {
flex: 0 0 calc(60% - 5px); /* Show 1.5 images for scroll hint */
height: 180px;
border-radius: 12px;
}
.repmx-mosaic-row {
display: none; /* Completely hide row structure */
}
/* Smaller dots for mobile */
.repmx-gallery-nav .repmx-nav-dot {
width: 8px;
height: 8px;
}
}
@media (max-width: 640px) {
/* Mobile fullscreen modal adjustments */
.repmx-modal-close {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
font-size: 24px;
}
.repmx-modal-nav {
width: 50px;
height: 50px;
font-size: 20px;
}
.repmx-modal-prev {
left: 15px;
}
.repmx-modal-next {
right: 15px;
}
.repmx-modal-counter {
bottom: 15px;
font-size: 16px;
padding: 10px 20px;
}
.repmx-modal-content {
padding: 40px 20px;
}
.repmx-modal-image {
max-width: calc(100vw - 120px); /* Account for smaller navigation buttons */
max-height: calc(100vh - 100px); /* Account for smaller spacing */
}
}
/* ============= LUXURY AMENITIES SLIDER ============= */
.repmx-luxury-amenities {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
}
.repmx-slider-container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.repmx-slider-main {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 30px;
background: #ffffff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
/* Desktop: Reduce height */
@media (min-width: 1025px) {
.repmx-slider-main {
aspect-ratio: 20/9; /* Wider aspect ratio = less height */
}
}
.repmx-slider-images {
position: relative;
width: 100%;
height: 100%;
}
.repmx-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.05);
transition: all 0.7s ease-in-out;
}
.repmx-slide.active {
opacity: 1;
transform: scale(1);
}
.repmx-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.repmx-slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%, transparent 100%);
}
.repmx-slide-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px;
color: white;
}
.repmx-slide-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 8px;
text-wrap: balance;
color: white;
}
/* Remove slide description - not needed */
.repmx-nav-button {
position: absolute;
bottom: 20px;
background: rgba(0, 0, 0, 0.7);
border: none;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.repmx-nav-button:hover {
background: rgba(59, 130, 246, 0.9);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
.repmx-nav-button svg {
width: 20px;
height: 20px;
display: block;
}
.repmx-nav-prev {
right: 80px;
}
.repmx-nav-next {
right: 20px;
}
.repmx-play-pause {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
border: none;
color: #fff;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.repmx-play-pause:hover {
background: rgba(59, 130, 246, 0.9);
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
.repmx-play-pause svg {
width: 18px;
height: 18px;
display: block;
}
.repmx-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
background: rgba(0, 0, 0, 0.4);
padding: 8px 16px;
border-radius: 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.repmx-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}
.repmx-indicator.active {
background: #3b82f6;
transform: scale(1.3);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}
.repmx-indicator:hover:not(.active) {
background: rgba(255, 255, 255, 0.7);
transform: scale(1.1);
}
.repmx-progress-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
}
.repmx-progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.repmx-thumbnails {
margin-top: 5px;
display: flex;
gap: 12px;
overflow-x: auto;
padding: 8px;
scrollbar-width: none;
-ms-overflow-style: none;
justify-content: center;
}
.repmx-thumbnails::-webkit-scrollbar {
display: none;
}
.repmx-thumbnail {
flex-shrink: 0;
width: 80px;
height: 56px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
}
.repmx-thumbnail:hover {
opacity: 1;
border-color: rgba(0, 0, 0, 0.2);
}
.repmx-thumbnail.active {
border-color: #3b82f6;
opacity: 1;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.repmx-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Counter removed - not needed */
/* Amenities Slider Responsive */
@media (max-width: 768px) {
.repmx-luxury-amenities {
padding: 60px 0;
}
.repmx-slider-container {
padding: 0 10px;
}
.repmx-slide-title {
font-size: 1.25rem;
}
.repmx-thumbnails {
gap: 8px;
}
.repmx-thumbnail {
width: 60px;
height: 42px;
}
}
@media (max-width: 640px) {
.repmx-luxury-amenities {
padding: 40px 0;
}
.repmx-slide-title {
font-size: 1.1rem;
}
.repmx-slide-description {
font-size: 0.8rem;
}
.repmx-nav-button {
width: 45px;
height: 45px;
border-radius: 50%;
}
.repmx-nav-button svg {
width: 18px;
height: 18px;
}
.repmx-nav-prev {
right: 70px;
}
.repmx-nav-next {
right: 15px;
}
.repmx-play-pause {
width: 40px;
height: 40px;
border-radius: 50%;
}
.repmx-play-pause svg {
width: 16px;
height: 16px;
}
}
/* ============= LIVING AMENITIES SECTION ============= */
.repmx-living-amenities {
padding: 80px 0;
background: #ffffff;
color: #0f172a;
}
.repmx-amenities-container {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.repmx-nav-button-amenities {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
border: 1px solid #e2e8f0;
border-radius: 50px;
padding: 8px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.repmx-nav-button-amenities:hover {
background: #6366f1;
color: white;
}
.repmx-nav-button-amenities.repmx-prev {
left: 0;
}
.repmx-nav-button-amenities.repmx-next {
right: 0;
}
.repmx-nav-button-amenities svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.repmx-scroll-container {
overflow-x: auto;
margin: 0 48px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
padding:30px;
}
.repmx-scroll-container::-webkit-scrollbar {
display: none;
}
.repmx-columns-container {
display: flex;
gap: 14px;
width: max-content;
}
.repmx-column {
flex-shrink: 0;
width: 320px;
scroll-snap-align: start;
}
.repmx-amenity-card {
padding: 18px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 25px;
margin: 0 0 20px 10px;
cursor: pointer;
transition: all 0.3s;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.repmx-amenity-card:hover {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
transform: scale(1.02);
}
.repmx-amenity-content {
display: flex;
align-items: center;
gap: 16px;
}
.repmx-amenity-number {
font-size: 2.25rem;
font-weight: bold;
color: rgba(100, 116, 139, 0.3);
flex-shrink: 0;
min-width: 48px;
transition: color 0.3s;
}
.repmx-amenity-card:hover .repmx-amenity-number {
color: rgba(100, 116, 139, 0.5);
}
.repmx-amenity-name {
font-size: 1.125rem;
font-weight: 600;
color: #0f172a;
flex: 1;
min-width: 0;
}
.repmx-amenity-icon {
font-size: 1.5rem;
flex-shrink: 0;
transition: transform 0.3s;
}
.repmx-amenity-card:hover .repmx-amenity-icon {
transform: scale(1.1);
}
.repmx-progress-indicators {
display: flex;
justify-content: center;
margin-top: 32px;
gap: 8px;
}
.repmx-progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e2e8f0;
border: none;
cursor: pointer;
transition: all 0.3s;
}
.repmx-progress-dot:hover {
background: #64748b;
}
.repmx-progress-dot.active {
background: #6366f1;
width: 32px;
border-radius: 4px;
}
.repmx-status-text {
text-align: center;
margin-top: 24px;
font-size: 0.75rem;
color: #64748b;
}
/* Living Amenities Responsive */
@media (max-width: 768px) {
.repmx-living-amenities {
padding: 60px 0;
}
.repmx-scroll-container {
margin: 0 -10px;
}
.repmx-column {
width: 280px;
}
.repmx-amenity-card {
padding: 16px;
}
.repmx-amenity-number {
font-size: 1.875rem;
min-width: 40px;
}
.repmx-amenity-name {
font-size: 1rem;
}
}
@media (max-width: 640px) {
.repmx-living-amenities {
padding: 40px 0;
}
.repmx-scroll-container {
margin: 0 -15px;
}
.repmx-column {
width: 260px;
}
.repmx-nav-button-amenities svg {
width: 22px;
height: 22px;
}
}
/* ============= ADVANCED LOCATION & LOCALITIES ============= */
.repmx-location-localities {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
}
.repmx-property-address {
margin: 40px 0;
display: flex;
justify-content: center;
}
.repmx-address-card {
display: flex
;
align-items: center;
gap: 0px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 18px 50px 25px 20px;
border-radius: 30px;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
width: 100%;
}
.repmx-address-icon {
flex-shrink: 0;
width: 90px;
height: 90px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.repmx-property-name {
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 48px;
font-weight: 800;
margin: 0 0 16px 0;
line-height: 1.1;
letter-spacing: -0.025em;
position: relative;
}
/* Removed underline from property name */
.repmx-address-actions {
margin-left: auto;
}
.repmx-directions-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
letter-spacing: 0.5px;
}
.repmx-directions-btn:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.repmx-directions-btn svg {
width: 16px;
height: 16px;
opacity: 0.9;
}
.repmx-category-groups {
display: flex;
flex-direction: column;
gap: 0;
}
.repmx-category-group {
background: rgba(248, 250, 252, 0.8);
border-radius: 0;
border: 1px solid rgba(226, 232, 240, 0.6);
overflow: hidden;
transition: all 0.3s ease;
}
.repmx-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
cursor: pointer;
background: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.repmx-group-header:hover {
background: rgba(59, 130, 246, 0.1);
}
.repmx-group-header h5 {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repmx-group-toggle {
font-size: 0.8rem;
color: #64748b;
transition: transform 0.3s ease;
}
.repmx-group-content {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
padding: 0 20px;
}
.repmx-category-group.repmx-group-active .repmx-group-content {
max-height: 500px;
padding: 0 20px 20px 20px;
}
.repmx-category-group.repmx-group-active .repmx-group-header {
background: rgba(59, 130, 246, 0.1);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.repmx-address-icon svg {
width: 60px;
height: 60px;
fill: blue;
}
.repmx-address-content {
flex: 1;
}
.repmx-address-title {
font-size: 1.1rem;
font-weight: 600;
color: #1e40af;
margin: 0 0 4px 0;
display: none;
}
.repmx-address-text {
font-size: 1rem;
color: #374151;
margin: 0;
line-height: 1.5;
}
.repmx-maps-container {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(59, 130, 246, 0.1);
}
.repmx-map-controls {
padding: 24px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
display: flex;
gap: 32px;
flex-wrap: wrap;
align-items: center;
}
.repmx-control-group {
display: flex;
align-items: center;
gap: 12px;
}
.repmx-control-label {
font-size: 0.9rem;
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.repmx-radius-controls,
.repmx-transport-controls {
display: flex;
gap: 8px;
}
.repmx-radius-btn,
.repmx-transport-btn {
padding: 8px 16px;
border: 2px solid #e2e8f0;
background: white;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 500;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.repmx-radius-btn:hover,
.repmx-transport-btn:hover {
border-color: #3b82f6;
color: #3b82f6;
transform: translateY(-1px);
}
.repmx-radius-btn.active,
.repmx-transport-btn.active {
background: #3b82f6;
border-color: #3b82f6;
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.repmx-map-layout {
display: grid;
grid-template-columns: 1fr 400px;
min-height: 600px;
}
.repmx-map-section {
position: relative;
background: #f1f5f9;
border-radius: 12px;
overflow: hidden;
}
.repmx-google-map {
width: 100%;
height: 100%;
position: relative;
border-radius: 12px;
overflow: hidden;
}
.repmx-map-summary {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.repmx-map-summary p {
margin: 0;
font-size: 0.9rem;
color: #374151;
text-align: center;
}
.repmx-poi-panel {
background: white;
border-left: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.repmx-category-filters {
padding: 0;
border-bottom: 1px solid #e2e8f0;
}
.repmx-category-filters h4 {
margin: 10px;
font-size: 1.5rem;
font-weight: 600;
color: #1e40af;
text-align:center;
}
.repmx-filter-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.repmx-filter-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.repmx-filter-item:hover {
background: #f1f5f9;
border-color: #e2e8f0;
}
.repmx-filter-item input[type="checkbox"] {
margin: 0;
accent-color: #3b82f6;
}
.repmx-filter-icon {
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.repmx-filter-label {
font-size: 0.85rem;
font-weight: 500;
color: #374151;
}
.repmx-sort-controls {
padding: 16px 24px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 12px;
}
.repmx-sort-select {
flex: 1;
padding: 8px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
font-size: 0.9rem;
color: #374151;
}
.repmx-poi-list {
flex: 1;
overflow-y: auto;
padding: 16px 0;
}
.repmx-poi-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
color: #64748b;
}
.repmx-poi-item {
padding: 16px 24px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: all 0.2s ease;
}
.repmx-poi-item:hover {
background: #f8fafc;
}
.repmx-poi-item.active {
background: #eff6ff;
border-left: 4px solid #3b82f6;
}
.repmx-poi-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
}
.repmx-poi-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
flex-shrink: 0;
margin-top: 2px;
}
.repmx-poi-info {
flex: 1;
min-width: 0;
}
.repmx-poi-name {
font-size: 0.95rem;
font-weight: 600;
color: #1e40af;
margin: 0 0 4px 0;
line-height: 1.3;
}
.repmx-poi-category {
font-size: 0.8rem;
color: #64748b;
text-transform: capitalize;
margin-bottom: 4px;
}
.repmx-poi-address {
font-size: 0.8rem;
color: #6b7280;
line-height: 1.3;
margin-bottom: 8px;
}
.repmx-poi-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.8rem;
color: #374151;
margin-bottom: 8px;
}
.repmx-poi-distance {
font-weight: 600;
color: #059669;
}
.repmx-poi-rating {
display: flex;
align-items: center;
gap: 4px;
}
.repmx-poi-actions {
display: flex;
gap: 8px;
}
.repmx-poi-btn {
padding: 4px 8px;
border: 1px solid #e2e8f0;
background: white;
border-radius: 6px;
font-size: 0.75rem;
color: #64748b;
cursor: pointer;
transition: all 0.2s ease;
}
.repmx-poi-btn:hover {
border-color: #3b82f6;
color: #3b82f6;
}
.repmx-poi-btn.primary {
background: #3b82f6;
border-color: #3b82f6;
color: white;
}
.repmx-poi-btn.primary:hover {
background: #2563eb;
}
/* Location & Localities Responsive */
@media (max-width: 1024px) {
.repmx-map-layout {
grid-template-columns: 1fr 350px;
}
.repmx-map-controls {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.repmx-control-group {
justify-content: space-between;
}
}
@media (max-width: 768px) {
.repmx-location-localities {
padding: 60px 0;
}
.repmx-address-card {
padding: 20px 24px;
margin: 0 16px;
}
.repmx-address-icon {
width: 40px;
height: 40px;
}
.repmx-address-title {
font-size: 1rem;
}
.repmx-address-text {
font-size: 0.9rem;
}
.repmx-map-layout {
grid-template-columns: 1fr;
grid-template-rows: 400px 1fr;
}
.repmx-google-map {
height: 400px;
}
.repmx-poi-panel {
border-left: none;
border-top: 1px solid #e2e8f0;
max-height: 500px;
}
.repmx-filter-grid {
grid-template-columns: repeat(3, 1fr);
}
.repmx-map-controls {
padding: 16px;
}
.repmx-radius-controls,
.repmx-transport-controls {
flex-wrap: wrap;
}
}
@media (max-width: 640px) {
.repmx-location-localities {
padding: 40px 0;
}
.repmx-address-card {
flex-direction: column;
text-align: center;
padding: 16px 20px;
}
.repmx-map-layout {
grid-template-rows: 300px 1fr;
}
.repmx-google-map {
height: 300px;
}
/* Mobile-only map controls polish and non-sticky Nearby panel */
@media (max-width: 768px) {
/* Ensure Nearby panel is not sticky/fixed on mobile */
.repmx-poi-panel {
position: static !important;
height: auto !important;
transform: none !important;
z-index: auto !important;
}
}
@media (max-width: 640px) {
.repmx-map-controls {
gap: 12px;
padding: 12px 14px;
}
.repmx-control-group {
gap: 8px;
align-items: center;
flex-wrap: nowrap;
}
.repmx-control-label {
font-size: 0.85rem;
margin-right: 2px;
white-space: nowrap;
}
.repmx-radius-controls {
flex-wrap: nowrap;
}
.repmx-radius-btn {
border-radius: 9999px;
padding: 6px 10px;
min-width: 40px;
text-align: center;
font-weight: 600;
}
.repmx-transport-controls { gap: 8px; }
.repmx-transport-btn {
width: 40px;
height: 40px;
padding: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
}
.repmx-transport-btn svg {
width: 18px;
height: 18px;
}
}
/* Mobile collapsible redesign and overflow fixes */
@media (max-width: 768px) {
.repmx-map-section { z-index: 0; position: relative; }
.repmx-poi-panel { overflow: visible !important; position: relative !important; z-index: 1 !important; }
.repmx-category-groups { gap: 10px; }
.repmx-group-header { background: #ffffff; padding: 14px 16px; }
.repmx-group-header h5 { margin: 0; color: #0f172a; font-weight: 700; }
.repmx-group-toggle { width: 28px; height: 28px; border-radius: 9999px; display: grid; place-items: center; border: 2px solid #cbd5e1; color: #334155; font-weight: 700; }
.repmx-category-group.repmx-group-active .repmx-group-header { background: #3f51b5; }
.repmx-category-group.repmx-group-active .repmx-group-header h5 { color: #ffffff; }
.repmx-category-group.repmx-group-active .repmx-group-toggle { color: #ffffff; border-color: rgba(255,255,255,0.9); }
.repmx-category-group .repmx-group-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.repmx-category-group.repmx-group-active .repmx-group-content { max-height: 1200px; }
.repmx-filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.repmx-filter-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.repmx-filter-item .repmx-filter-label { color: #0f172a; font-weight: 600; }
.repmx-filter-item.selected { background: #3f51b5; border-color: #3f51b5; }
.repmx-filter-item.selected .repmx-filter-label { color: #ffffff; }
.repmx-filter-item input { display: none; }
}
.repmx-filter-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Strong mobile overrides to ensure flexible flow: panel expands and pushes map below */
@media (max-width: 768px) {
.repmx-map-layout { display: block !important; }
.repmx-poi-panel { max-height: none !important; }
}
/* Hide transport controls and map summary on mobile only */
@media (max-width: 768px) {
.repmx-map-controls .repmx-control-group:nth-of-type(2) { display: none !important; }
.repmx-map-summary { display: none !important; }
}
.repmx-filter-item {
padding: 6px 8px;
}
.repmx-filter-label {
font-size: 0.8rem;
}
.repmx-poi-item {
padding: 12px 16px;
}
.repmx-poi-name {
font-size: 0.9rem;
}
.repmx-poi-meta {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.repmx-radius-btn,
.repmx-transport-btn {
padding: 6px 12px;
font-size: 0.8rem;
}
.repmx-transport-btn svg {
width: 14px;
height: 14px;
}
}
/* Location System Mobile Responsive */
@media (max-width: 768px) {
.repmx-location-localities {
padding: 40px 0;
}
.repmx-container {
padding: 0 15px;
}
.repmx-address-card {
flex-direction: column;
text-align: center;
padding: 20px;
gap: 15px;
}
.repmx-address-actions {
width: 100%;
}
.repmx-directions-btn {
width: 100%;
justify-content: center;
}
.repmx-property-name {
font-size: 28px;
}
.repmx-map-layout {
flex-direction: column;
height: auto;
gap: 20px;
}
.repmx-map-section {
height: 350px;
order: 2;
}
.repmx-controls-section {
position: static;
height: auto;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 20px;
order: 1;
}
.repmx-category-groups {
gap: 0px;
}
.repmx-group-header {
padding: 12px 16px;
}
.repmx-group-header h5 {
font-size: 0.9rem;
}
.repmx-category-group.repmx-group-active .repmx-group-content {
padding: 5px;
}
.repmx-filter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.repmx-filter-item {
padding: 8px;
font-size: 0.8rem;
}
.repmx-filter-icon {
font-size: 1rem;
}
.repmx-control-row {
flex-direction: column;
gap: 15px;
}
.repmx-radius-controls,
.repmx-transport-controls,
.repmx-sort-controls {
width: 100%;
}
.repmx-poi-item {
padding: 15px;
}
/* Mobile grid compaction for collapsible options */
@media (max-width: 768px) {
.repmx-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
.repmx-filter-item { padding: 10px 12px !important; border-radius: 8px !important; }
.repmx-filter-item .repmx-filter-label { font-size: 0.9rem !important; }
.repmx-filter-icon { font-size: 16px; }
}
@media (min-width: 390px) and (max-width: 768px) {
.repmx-filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
.repmx-poi-meta {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
}
@media (max-width: 480px) {
.repmx-showcase-title {
font-size: 1.5rem;
}
.repmx-address-card {
padding: 15px;
}
.repmx-map-section {
height: 300px;
}
.repmx-controls-section {
padding: 15px;
}
.repmx-filter-grid {
grid-template-columns: 1fr;
}
.repmx-poi-item {
padding: 12px;
}
.repmx-poi-name {
font-size: 0.9rem;
}
.repmx-poi-distance {
font-size: 0.75rem;
}
}
/* Responsive */
@media (max-width: 600px){
.repmx-hero{ padding:56px 0; }
.repmx-hero__cta{ flex-direction:column; }
.repmx-card__thumb img,.repmx-card__ph{ height:200px; }
}
/* ============= Premium Floor Plans Section ============= */
.repmx-floor-plans-premium {
padding: 80px 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
position: relative;
}
.repmx-floor-plans-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.4;
pointer-events: none;
}
/* Floor Plans Navigation Tabs */
.repmx-floor-plans-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 40px 0;
justify-content: center;
padding: 0 20px;
}
.repmx-plan-tab {
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 50px;
padding: 14px 28px;
font-weight: 600;
font-size: 0.95rem;
color: #475569;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.repmx-plan-tab::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
transition: left 0.5s;
}
.repmx-plan-tab:hover::before {
left: 100%;
}
.repmx-plan-tab:hover {
border-color: #6b4bff;
color: #6b4bff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(107, 75, 255, 0.15);
}
.repmx-plan-tab.active {
background: linear-gradient(135deg, #6b4bff 0%, #00d4ff 100%);
border-color: #6b4bff;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(107, 75, 255, 0.3);
}
.repmx-plan-tab.active::before {
display: none;
}
/* Floor Plan Display Area */
.repmx-floor-plan-display {
background: #ffffff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.repmx-plan-viewer {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.repmx-plan-image-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 12px;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
}
.repmx-plan-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Zoom Controls */
.repmx-zoom-controls {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 10;
}
.repmx-zoom-btn {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #e2e8f0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
color: #475569;
}
.repmx-zoom-btn:hover {
background: #6b4bff;
border-color: #6b4bff;
color: #ffffff;
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(107, 75, 255, 0.3);
}
.repmx-zoom-btn svg {
width: 20px;
height: 20px;
}
/* No Plans State */
.repmx-no-plans {
text-align: center;
padding: 80px 20px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
}
.repmx-no-plans-content svg {
color: #cbd5e1;
margin-bottom: 24px;
}
.repmx-no-plans-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #334155;
margin-bottom: 12px;
}
.repmx-no-plans-content p {
color: #64748b;
font-size: 1rem;
max-width: 400px;
margin: 0 auto;
line-height: 1.6;
}
/* Fullscreen Modal */
.repmx-fullscreen-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-fullscreen-modal.active {
opacity: 1;
visibility: visible;
}
.repmx-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(8px);
}
.repmx-modal-content {
position: relative;
width: 95%;
height: 95%;
max-width: 1200px;
max-height: 800px;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-fullscreen-modal.active .repmx-modal-content {
transform: scale(1);
}
.repmx-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.repmx-modal-header h3 {
font-size: 1.25rem;
font-weight: 700;
color: #334155;
margin: 0;
}
.repmx-modal-close {
width: 40px;
height: 40px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #64748b;
}
.repmx-modal-close:hover {
background: #ef4444;
border-color: #ef4444;
color: #ffffff;
transform: scale(1.05);
}
.repmx-modal-body {
height: calc(100% - 81px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: #f8fafc;
}
.repmx-modal-plan-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.repmx-floor-plans-premium {
padding: 60px 0;
}
.repmx-floor-plans-nav {
gap: 8px;
margin: 30px 0;
padding: 0 15px;
}
.repmx-plan-tab {
padding: 12px 20px;
font-size: 0.9rem;
}
.repmx-floor-plan-display {
padding: 20px;
border-radius: 15px;
}
.repmx-plan-viewer {
min-height: 400px;
}
.repmx-plan-image-container {
min-height: 400px;
border-radius: 10px;
}
.repmx-zoom-controls {
top: 15px;
right: 15px;
gap: 6px;
}
.repmx-zoom-btn {
width: 40px;
height: 40px;
border-radius: 10px;
}
.repmx-zoom-btn svg {
width: 18px;
height: 18px;
}
.repmx-no-plans {
padding: 60px 15px;
border-radius: 15px;
}
.repmx-no-plans-content h3 {
font-size: 1.3rem;
}
.repmx-modal-content {
width: 98%;
height: 98%;
border-radius: 15px;
}
.repmx-modal-header {
padding: 15px 20px;
}
.repmx-modal-header h3 {
font-size: 1.1rem;
}
.repmx-modal-close {
width: 36px;
height: 36px;
}
.repmx-modal-body {
padding: 15px;
}
}
@media (max-width: 480px) {
.repmx-floor-plans-nav {
flex-direction: column;
align-items: center;
}
.repmx-plan-tab {
width: 100%;
max-width: 280px;
text-align: center;
}
.repmx-floor-plan-display {
padding: 15px;
}
.repmx-plan-viewer {
min-height: 300px;
}
.repmx-plan-image-container {
min-height: 300px;
}
.repmx-zoom-controls {
flex-direction: row;
top: auto;
bottom: 15px;
right: 15px;
left: 15px;
justify-content: center;
}
}
/* ============= Premium Finishing & Specifications Section ============= */
.repmx-specifications-premium {
padding: 80px 0;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
position: relative;
overflow: hidden;
}
.repmx-specifications-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
pointer-events: none;
}
/* Specifications Grid */
.repmx-specifications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
position: relative;
z-index: 1;
}
/* Specification Category Cards */
.repmx-spec-category {
background: #ffffff;
border-radius: 24px;
padding: 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
}
.repmx-spec-category::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #6b4bff 0%, #00d4ff 50%, #6b4bff 100%);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
.repmx-spec-category:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(107, 75, 255, 0.15);
}
.repmx-spec-category[data-category="flooring"] {
--category-color: #3b82f6;
--category-bg: #eff6ff;
}
.repmx-spec-category[data-category="fittings"] {
--category-color: #ef4444;
--category-bg: #fef2f2;
}
.repmx-spec-category[data-category="walls"] {
--category-color: #10b981;
--category-bg: #f0fdf4;
}
/* Category Header */
.repmx-spec-category-header {
padding: 30px;
text-align: center;
background: var(--category-bg, #f8fafc);
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.repmx-spec-icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--category-color, #6b4bff) 0%, rgba(107, 75, 255, 0.8) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 10px 30px rgba(107, 75, 255, 0.3);
position: relative;
overflow: hidden;
}
.repmx-spec-icon-wrapper::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
transition: transform 0.6s;
}
.repmx-spec-category:hover .repmx-spec-icon-wrapper::before {
transform: rotate(45deg) translate(100%, 100%);
}
.repmx-spec-icon {
color: #ffffff;
z-index: 1;
position: relative;
}
.repmx-spec-category-title {
font-size: 1.5rem;
font-weight: 800;
color: var(--category-color, #334155);
margin: 0 0 8px 0;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.repmx-spec-category-subtitle {
font-size: 0.95rem;
color: #64748b;
font-weight: 500;
margin: 0;
}
/* Specification Items */
.repmx-spec-items {
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.repmx-spec-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: #f8fafc;
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.repmx-spec-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(107, 75, 255, 0.05), transparent);
transition: left 0.6s;
}
.repmx-spec-item:hover::before {
left: 100%;
}
.repmx-spec-item:hover {
background: #ffffff;
border-color: var(--category-color, #6b4bff);
transform: translateX(4px);
box-shadow: 0 8px 25px rgba(107, 75, 255, 0.1);
}
.repmx-spec-item-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--category-color, #6b4bff) 0%, rgba(107, 75, 255, 0.8) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(107, 75, 255, 0.2);
}
.repmx-spec-item-icon svg {
color: #ffffff;
}
.repmx-spec-item-content {
flex: 1;
min-width: 0;
}
.repmx-spec-item-label {
font-size: 1rem;
font-weight: 700;
color: #334155;
margin-bottom: 6px;
text-transform: capitalize;
}
.repmx-spec-item-value {
font-size: 0.95rem;
color: #64748b;
line-height: 1.5;
font-weight: 500;
}
/* No Specifications State */
.repmx-no-specifications {
text-align: center;
padding: 100px 20px;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
margin-top: 50px;
}
.repmx-no-specifications-content svg {
color: #cbd5e1;
margin-bottom: 30px;
}
.repmx-no-specifications-content h3 {
font-size: 1.75rem;
font-weight: 800;
color: #334155;
margin-bottom: 16px;
}
.repmx-no-specifications-content p {
color: #64748b;
font-size: 1.1rem;
max-width: 500px;
margin: 0 auto;
line-height: 1.6;
font-weight: 500;
}
/* Mobile & Tablet Responsive Styles */
@media (max-width: 1024px) {
.repmx-specifications-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.repmx-spec-category-header {
padding: 25px;
}
.repmx-spec-icon-wrapper {
width: 70px;
height: 70px;
border-radius: 18px;
}
.repmx-spec-category-title {
font-size: 1.3rem;
}
.repmx-spec-items {
padding: 25px;
gap: 18px;
}
.repmx-spec-item {
padding: 18px;
}
.repmx-spec-item-icon {
width: 44px;
height: 44px;
}
}
@media (max-width: 768px) {
.repmx-specifications-premium {
padding: 60px 0;
}
.repmx-specifications-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.repmx-spec-category {
border-radius: 20px;
}
.repmx-spec-category-header {
padding: 20px;
}
.repmx-spec-icon-wrapper {
width: 60px;
height: 60px;
border-radius: 15px;
margin-bottom: 15px;
}
.repmx-spec-category-title {
font-size: 1.2rem;
}
.repmx-spec-category-subtitle {
font-size: 0.9rem;
}
.repmx-spec-items {
padding: 20px;
gap: 15px;
}
.repmx-spec-item {
padding: 16px;
border-radius: 12px;
}
.repmx-spec-item-icon {
width: 40px;
height: 40px;
border-radius: 10px;
}
.repmx-spec-item-label {
font-size: 0.95rem;
}
.repmx-spec-item-value {
font-size: 0.9rem;
}
.repmx-no-specifications {
padding: 80px 15px;
border-radius: 20px;
}
.repmx-no-specifications-content h3 {
font-size: 1.5rem;
}
.repmx-no-specifications-content p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.repmx-specifications-premium {
padding: 50px 0;
}
.repmx-specifications-grid {
margin-top: 30px;
}
.repmx-spec-category {
border-radius: 16px;
}
.repmx-spec-category-header {
padding: 18px;
}
.repmx-spec-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 12px;
margin-bottom: 12px;
}
.repmx-spec-category-title {
font-size: 1.1rem;
}
.repmx-spec-items {
padding: 18px;
gap: 12px;
}
.repmx-spec-item {
padding: 14px;
gap: 12px;
}
.repmx-spec-item-icon {
width: 36px;
height: 36px;
border-radius: 8px;
}
.repmx-spec-item-icon svg {
width: 18px;
height: 18px;
}
.repmx-spec-item-label {
font-size: 0.9rem;
}
.repmx-spec-item-value {
font-size: 0.85rem;
}
.repmx-no-specifications {
padding: 60px 15px;
}
.repmx-no-specifications-content h3 {
font-size: 1.3rem;
}
}
/* ===== WHY CHOOSE SECTION ===== */
.repmx-why-choose-premium {
padding: 80px 0;
background: #f8fafc;
}
.repmx-why-choose-content {
margin-top: 60px;
}
.repmx-why-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
}
.repmx-why-choose-card {
background: white;
border-radius: 12px;
padding: 25px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
}
.repmx-why-choose-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: #3b82f6;
}
.repmx-why-choose-number {
position: absolute;
top: -12px;
right: -12px;
width: 40px;
height: 40px;
background: #3b82f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.repmx-why-choose-content-wrapper {
display: flex;
align-items: flex-start;
gap: 15px;
}
.repmx-why-choose-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #f1f5f9;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #3b82f6;
}
.repmx-why-choose-card:hover .repmx-why-choose-icon {
background: #3b82f6;
color: white;
}
.repmx-why-choose-text {
flex: 1;
font-size: 1rem;
line-height: 1.6;
color: #334155;
margin: 0;
font-weight: 500;
}
/* Empty State */
.repmx-why-choose-empty {
text-align: center;
padding: 60px 20px;
max-width: 400px;
margin: 0 auto;
}
.repmx-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
}
.repmx-why-choose-empty h3 {
font-size: 1.5rem;
color: #1e293b;
margin: 0 0 10px 0;
font-weight: 600;
}
.repmx-why-choose-empty p {
font-size: 1rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* Responsive Design */
@media (max-width: 768px) {
.repmx-why-choose-premium {
padding: 60px 0;
}
.repmx-why-choose-content {
margin-top: 40px;
}
.repmx-why-choose-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.repmx-why-choose-card {
padding: 20px;
margin: 0 10px;
}
.repmx-why-choose-number {
width: 35px;
height: 35px;
top: -10px;
right: -10px;
font-size: 0.8rem;
}
.repmx-why-choose-content-wrapper {
gap: 12px;
}
.repmx-why-choose-icon {
width: 35px;
height: 35px;
}
.repmx-why-choose-text {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.repmx-why-choose-card {
margin: 0 5px;
padding: 18px 15px;
}
.repmx-why-choose-content-wrapper {
gap: 10px;
}
}
/* ===== END WHY CHOOSE SECTION ===== */
/* ============= PREMIUM LISTINGS DESIGN ============= */
/* ============= ULTRA-WIDE RESPONSIVE GRID SYSTEM ============= */
/* Premium Grid Layout - Ultra-Wide Optimized */
.repmx-premium-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
padding: 20px 0;
align-items: stretch; /* Ensure all cards have same height */
width: 100%; /* Full width */
}
/* Column Variations - Ultra-Wide Responsive */
.repmx-columns-1 {
grid-template-columns: 1fr;
/* Single column fills full width */
}
.repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
/* 2 columns expand to fill ultra-wide space */
}
.repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
/* 3+ columns on ultra-wide screens */
}
.repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* 4+ columns on ultra-wide screens */
}
/* ============= ULTRA-WIDE MONITOR OPTIMIZATION ============= */
/* Ultra-Wide Screens (1440px+) - More columns, better space utilization */
@media (min-width: 1440px) {
.repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px; /* Slightly larger gaps for ultra-wide */
}
.repmx-columns-1 {
grid-template-columns: 1fr;
max-width: 800px; /* Reasonable max for single column on ultra-wide */
margin: 0 auto;
}
.repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
/* 2-3 columns on ultra-wide */
}
.repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
/* 3-4 columns on ultra-wide */
}
.repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* 4-5 columns on ultra-wide */
}
}
/* Super Ultra-Wide Screens (1920px+) - Maximum space utilization */
@media (min-width: 1920px) {
.repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px; /* Larger gaps for super ultra-wide */
}
.repmx-columns-1 {
grid-template-columns: 1fr;
max-width: 900px; /* Reasonable max for single column */
margin: 0 auto;
}
.repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
/* 2-4 columns on super ultra-wide */
}
.repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* 3-5 columns on super ultra-wide */
}
.repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
/* 4-6 columns on super ultra-wide */
}
}
/* ============= STANDARDIZED PREMIUM CARD STRUCTURE ============= */
/* Premium Property Card - Mathematical Height Standardization */
.repmx-premium-card {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform: translateY(0);
/* STANDARDIZED STRUCTURE FOR CAROUSEL COMPATIBILITY */
display: flex;
flex-direction: column;
height: 100%;
min-height: 520px; /* Mathematical base: 250px media + 270px content */
}
/* Clean hover - only card elevation, no color changes */
.repmx-premium-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
/* Clickable Card */
.repmx-clickable-card {
cursor: pointer;
}
.repmx-clickable-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
.repmx-clickable-card .repmx-premium-card__view-btn {
pointer-events: none;
}
/* Premium Card Media - Fixed Height for Consistency */
.repmx-premium-card__media {
position: relative;
overflow: hidden;
height: 250px; /* FIXED HEIGHT - Mathematical Standard */
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
flex-shrink: 0; /* Prevent shrinking in flex layout */
}
.repmx-premium-card__image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.repmx-premium-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: none;
}
/* Image Overlay - Removed for premium clean look */
.repmx-premium-card__view-btn:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}
/* Placeholder */
.repmx-premium-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
color: #94a3b8;
}
/* Status Badge */
.repmx-premium-card__status {
position: absolute;
top: 15px;
left: 15px;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Smaller Status Badge */
.repmx-premium-card__status--small {
padding: 4px 8px;
font-size: 0.65rem;
border-radius: 15px;
letter-spacing: 0.3px;
}
.repmx-status-for-sale {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
}
.repmx-status-for-rent {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
}
.repmx-status-sold {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
}
/* Featured Badge */
.repmx-premium-card__featured {
position: absolute;
top: 15px;
right: 15px;
display: flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
padding: 6px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.repmx-premium-card__featured svg {
fill: currentColor;
stroke: none;
}
/* Card Content - Flexible Height with Mathematical Structure */
.repmx-premium-card__content {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1; /* Fill remaining space for consistent card heights */
min-height: 270px; /* Mathematical minimum: ensures total 520px with 250px media */
background: #ffffff;
background-color: #ffffff;
}
.repmx-premium-card__header {
margin-bottom: 10px;
}
.repmx-premium-card__title {
margin: 0 0 8px 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.repmx-premium-card__title a {
color: #1e293b;
text-decoration: none;
transition: color 0.3s ease;
}
.repmx-premium-card__title a:hover {
color: #3b82f6;
}
.repmx-premium-card__price {
color: #059669;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 12px;
}
/* Location */
.repmx-premium-card__location {
display: flex;
align-items: center;
gap: 6px;
color: #64748b;
font-size: 0.9rem;
margin-bottom: 10px;
}
.repmx-premium-card__location svg {
flex-shrink: 0;
}
/* Property Details */
.repmx-premium-card__details {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
padding: 12px 0;
border-top: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
}
.repmx-premium-card__detail {
display: flex;
align-items: center;
gap: 5px;
color: #475569;
font-size: 0.8rem;
font-weight: 600;
flex: 1;
min-width: 0;
}
.repmx-premium-card__detail svg {
color: #3b82f6;
flex-shrink: 0;
}
/* Excerpt */
.repmx-premium-card__excerpt {
color: #64748b;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 12px;
}
/* Actions - Always at Bottom */
.repmx-premium-card__actions {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-top: auto; /* Push to bottom for consistent layout */
padding-top: 12px; /* Maintain spacing */
}
.repmx-premium-card__btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.repmx-premium-card__btn--primary {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
flex: 1;
justify-content: center;
padding: 9px 14px;
font-size: 0.85rem;
}
.repmx-premium-card__btn--primary:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
color: #ffffff;
}
.repmx-premium-card__btn--secondary {
background: #f8fafc;
color: #64748b;
border: 1px solid #e2e8f0;
padding: 10px;
width: 40px;
height: 40px;
justify-content: center;
}
.repmx-premium-card__btn--secondary:hover {
background: #ef4444;
color: #ffffff;
border-color: #ef4444;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}
/* Secondary Actions Container */
.repmx-premium-card__secondary-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* Icon Button */
.repmx-premium-card__btn--icon {
background: #f8fafc;
color: #64748b;
border: 1px solid #e2e8f0;
padding: 10px;
width: 40px;
height: 40px;
justify-content: center;
border-radius: 10px;
}
.repmx-premium-card__btn--icon:hover {
background: #3b82f6;
color: #ffffff;
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.repmx-premium-card__btn--icon:first-child:hover {
background: #ef4444;
color: #ffffff;
border-color: #ef4444;
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
}
/* Share Modal Styles */
.repmx-share-modal-content {
background: white;
border-radius: 16px;
padding: 30px;
max-width: 400px;
width: 90%;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.repmx-share-modal-content h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
}
.repmx-share-modal-content p {
margin: 0 0 20px 0;
color: #6b7280;
font-size: 0.9rem;
}
.repmx-share-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.repmx-share-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.repmx-share-facebook {
background: #1877f2;
color: white;
}
.repmx-share-facebook:hover {
background: #166fe5;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(24, 119, 242, 0.3);
}
.repmx-share-twitter {
background: #1da1f2;
color: white;
}
.repmx-share-twitter:hover {
background: #1a91da;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(29, 161, 242, 0.3);
}
.repmx-share-whatsapp {
background: #25d366;
color: white;
}
.repmx-share-whatsapp:hover {
background: #22c55e;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.repmx-share-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
color: #9ca3af;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.repmx-share-close:hover {
background: #f3f4f6;
color: #374151;
}
/* Premium Pagination */
.repmx-premium-pagination {
margin-top: 50px;
text-align: center;
}
.repmx-premium-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 45px;
height: 45px;
margin: 0 5px;
padding: 0 15px;
background: #ffffff;
color: #64748b;
text-decoration: none;
border-radius: 12px;
border: 1px solid #e2e8f0;
font-weight: 600;
transition: all 0.3s ease;
}
.repmx-premium-pagination .page-numbers:hover,
.repmx-premium-pagination .page-numbers.current {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.repmx-premium-pagination .page-numbers.prev,
.repmx-premium-pagination .page-numbers.next {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ============= RESPONSIVE MATHEMATICAL BREAKPOINTS ============= */
/* Large Desktop to Ultra-Wide (1025px - 1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
.repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 32px;
}
.repmx-columns-1,
.repmx-columns-2,
.repmx-columns-3,
.repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
/* Optimized for large desktop screens */
}
}
/* Tablet Breakpoint */
@media (max-width: 1024px) {
.repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.repmx-columns-1,
.repmx-columns-2,
.repmx-columns-3,
.repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
/* Full width responsive on tablet */
}
/* Maintain mathematical structure */
.repmx-premium-card {
min-height: 500px; /* Slightly reduced for tablet */
}
.repmx-property-item .repmx-premium-card,
.repm-property-item .repmx-premium-card {
min-height: 500px;
}
.repmx-property-item .repmx-premium-card__content,
.repm-property-item .repmx-premium-card__content {
min-height: 250px; /* Adjusted for tablet */
}
}
@media (max-width: 768px) {
.repmx-premium-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 15px 0;
}
.repmx-columns-1,
.repmx-columns-2,
.repmx-columns-3,
.repmx-columns-4 {
grid-template-columns: 1fr;
/* Full width single column on mobile */
}
/* Mobile mathematical adjustments */
.repmx-premium-card {
min-height: 460px; /* Mobile optimized */
}
.repmx-premium-card__media {
height: 220px; /* Reduced media height for mobile */
}
.repmx-premium-card__content {
padding: 16px;
min-height: 240px; /* Adjusted content minimum */
}
.repmx-property-item .repmx-premium-card,
.repm-property-item .repmx-premium-card {
min-height: 460px;
}
.repmx-property-item .repmx-premium-card__media,
.repm-property-item .repmx-premium-card__media {
height: 220px;
}
.repmx-property-item .repmx-premium-card__content,
.repm-property-item .repmx-premium-card__content {
min-height: 240px;
}
.repmx-premium-card__details {
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
}
.repmx-premium-card__actions {
flex-direction: row;
gap: 8px;
justify-content: space-between;
}
.repmx-premium-card__secondary-actions {
gap: 6px;
}
.repmx-premium-card__btn--secondary {
width: 100%;
height: auto;
padding: 10px 16px;
}
.repmx-premium-card__btn--icon {
width: 44px;
height: 44px;
padding: 12px;
}
}
@media (max-width: 480px) {
.repmx-premium-card {
border-radius: 16px;
min-height: 420px; /* Small mobile optimized */
}
.repmx-premium-card__media {
height: 200px; /* Compact media for small screens */
}
.repmx-premium-card__content {
padding: 16px;
min-height: 220px; /* Adjusted for small screens */
}
.repmx-premium-card__title {
font-size: 1.1rem;
}
.repmx-premium-card__price {
font-size: 1.3rem;
}
/* Maintain mathematical structure on small mobile */
.repmx-property-item .repmx-premium-card,
.repm-property-item .repmx-premium-card {
min-height: 420px;
}
.repmx-property-item .repmx-premium-card__media,
.repm-property-item .repmx-premium-card__media {
height: 200px;
}
.repmx-property-item .repmx-premium-card__content,
.repm-property-item .repmx-premium-card__content {
min-height: 220px;
}
}
/* Properties Shortcode Container */
.repmx-properties-shortcode {
margin: 40px 0;
}
.repmx-property-item {
height: 100%;
}
/* Enhanced Focus States for Accessibility */
.repmx-premium-card__btn:focus,
.repmx-premium-card__title a:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Print Styles */
@media print {
.repmx-premium-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #e2e8f0;
}
.repmx-premium-card__overlay,
.repmx-premium-card__actions {
display: none;
}
}
/* ========================================
BLOCKSY-STYLE ADVANCED CARD REVEAL EFFECT
======================================== */
/* Respect user's motion preferences - TEMPORARILY DISABLED FOR TESTING */
/* @media (prefers-reduced-motion: no-preference) { */
/* Base reveal animation setup */
[data-reveal] {
transition-property: opacity, transform;
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
}
/* Hidden state - cards start invisible and moved down */
[data-reveal*='no'] {
opacity: 0.01; /* Prevents double-tap issues on iOS Chrome */
transform: translateY(80px);
}
/* Revealed state - cards become visible and move to position */
[data-reveal*='yes'] {
opacity: 1;
transform: translateY(0);
}
/* Bottom reveal animation (slide up from bottom) */
[data-reveal*='bottom'] {
transform: translateY(100px);
}
/* Staggered animation delays for sequential reveal */
.repmx-premium-grid [data-reveal*='1'] { transition-delay: 0s; }
.repmx-premium-grid [data-reveal*='2'] { transition-delay: 0.15s; }
.repmx-premium-grid [data-reveal*='3'] { transition-delay: 0.3s; }
.repmx-premium-grid [data-reveal*='4'] { transition-delay: 0.45s; }
.repmx-premium-grid [data-reveal*='5'] { transition-delay: 0.6s; }
.repmx-premium-grid [data-reveal*='6'] { transition-delay: 0.75s; }
.repmx-premium-grid [data-reveal*='7'] { transition-delay: 0.9s; }
.repmx-premium-grid [data-reveal*='8'] { transition-delay: 1.05s; }
.repmx-premium-grid [data-reveal*='9'] { transition-delay: 1.2s; }
.repmx-premium-grid [data-reveal*='10'] { transition-delay: 1.35s; }
.repmx-premium-grid [data-reveal*='11'] { transition-delay: 1.5s; }
.repmx-premium-grid [data-reveal*='12'] { transition-delay: 1.65s; }
/* Enhanced reveal effect for property cards - HIGH SPECIFICITY */
.repmx-premium-card.repmx-reveal-card[data-reveal*='no'] {
opacity: 0 !important;
transform: translateY(60px) scale(0.95) !important;
filter: blur(2px) !important;
}
.repmx-premium-card.repmx-reveal-card[data-reveal*='yes'] {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
filter: blur(0px) !important;
transition-duration: 1s !important;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* Carousel reveal effect (faster, no stagger, minimal offset) */
.repmx-carousel-wrapper [data-reveal] {
transition-duration: 0.8s;
transition-delay: 0s !important;
}
.repmx-carousel-wrapper [data-reveal*='no'] {
opacity: 0;
transform: translateY(20px); /* REDUCED from 40px to prevent container overflow */
}
.repmx-carousel-wrapper [data-reveal*='yes'] {
opacity: 1;
transform: translateY(0);
}
/* } */
/* Fallback for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ========================================
LOAD MORE BUTTON STYLING
======================================== */
.repmx-loadmore-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
padding: 20px 0;
}
.repmx-loadmore-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 32px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
min-width: 200px;
position: relative;
overflow: hidden;
}
.repmx-loadmore-btn:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
.repmx-loadmore-btn:active {
transform: translateY(0);
}
.repmx-loadmore-btn:disabled {
cursor: not-allowed;
opacity: 0.7;
transform: none;
}
.repmx-loadmore-text {
transition: opacity 0.3s ease;
}
.repmx-loadmore-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
}
.repmx-loadmore-spinner svg {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading state styling */
.repmx-loadmore-btn:disabled .repmx-loadmore-text {
opacity: 0;
}
.repmx-loadmore-btn:disabled .repmx-loadmore-spinner {
opacity: 1;
}
/* Responsive design */
@media (max-width: 768px) {
.repmx-loadmore-btn {
padding: 14px 24px;
font-size: 15px;
min-width: 180px;
}
.repmx-loadmore-container {
margin-top: 30px;
padding: 15px 0;
}
}
@media (max-width: 480px) {
.repmx-loadmore-btn {
padding: 12px 20px;
font-size: 14px;
min-width: 160px;
}
.repmx-loadmore-container {
margin-top: 25px;
padding: 10px 0;
}
}
/* Favorited State */
.repmx-premium-card__btn--secondary.favorited {
background: #ef4444 !important;
color: #ffffff !important;
border-color: #ef4444 !important;
}
.repmx-premium-card__btn--secondary.favorited svg path {
fill: currentColor !important;
}
/* Enhanced Hover State */
.repmx-premium-card.hovered {
transform: translateY(-12px) scale(1.02);
}
/* ============= PREMIUM SEARCH FORM DESIGN ============= */
/* Search Shortcode Container */
.repm-search-shortcode {
margin: 40px 0;
}
/* Premium Search Form */
.repm-search-form {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.repm-search-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
border-radius: 20px 20px 0 0;
}
/* Search Fields Grid */
.repm-search-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
align-items: end;
}
.repm-search-horizontal .repm-search-fields {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.repm-search-vertical .repm-search-fields {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
/* Search Field Styling */
.repm-search-field {
position: relative;
}
.repm-search-field input,
.repm-search-field select {
width: 100%;
padding: 14px 18px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
font-weight: 500;
background: #ffffff;
color: #1e293b;
transition: all 0.3s ease;
appearance: none;
}
.repm-search-field input:focus,
.repm-search-field select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
transform: translateY(-2px);
}
.repm-search-field input::placeholder {
color: #94a3b8;
font-weight: 400;
}
/* Custom Select Arrow */
.repm-search-field select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.repm-search-field select:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
/* Premium Search Button */
.repm-search-submit {
width: 100%;
padding: 14px 24px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.repm-search-submit:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.repm-search-submit:active {
transform: translateY(0);
}
/* Button Ripple Effect */
.repm-search-submit::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.repm-search-submit:active::after {
width: 300px;
height: 300px;
}
/* Responsive Search Form */
@media (max-width: 768px) {
.repm-search-form {
padding: 20px;
border-radius: 16px;
}
.repm-search-fields {
grid-template-columns: 1fr;
gap: 15px;
}
.repm-search-horizontal .repm-search-fields,
.repm-search-vertical .repm-search-fields {
grid-template-columns: 1fr;
}
.repm-search-field input,
.repm-search-field select,
.repm-search-submit {
padding: 12px 16px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.repm-search-form {
padding: 16px;
margin: 20px 0;
}
.repm-search-field input,
.repm-search-field select,
.repm-search-submit {
border-radius: 10px;
}
}
/* Search Field Focus Enhancement */
.repm-search-field.focused {
transform: translateY(-2px);
}
.repm-search-field.focused input,
.repm-search-field.focused select {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* ===== END PREMIUM SEARCH FORM DESIGN ===== */
/* ============= SHORTCODE SPECIFIC OVERRIDES ============= */
/* ============= SHORTCODE MATHEMATICAL STANDARDIZATION ============= */
/* Ensure all shortcodes use ultra-wide responsive grid system */
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
padding: 20px 0;
align-items: stretch; /* Mathematical height consistency */
width: 100%; /* Full width */
}
.repmx-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-1 {
grid-template-columns: 1fr;
/* Full width responsive */
}
.repmx-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
/* Full width responsive */
}
.repmx-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
/* Full width responsive */
}
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* Full width responsive */
}
/* ============= SHORTCODE ULTRA-WIDE OPTIMIZATION ============= */
/* Ultra-Wide Screens (1440px+) - Shortcode optimization */
@media (min-width: 1440px) {
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
}
.repmx-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-1 {
grid-template-columns: 1fr;
max-width: 800px;
margin: 0 auto;
}
.repmx-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
.repmx-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* Super Ultra-Wide Screens (1920px+) - Shortcode optimization */
@media (min-width: 1920px) {
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.repmx-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-1 {
grid-template-columns: 1fr;
max-width: 900px;
margin: 0 auto;
}
.repmx-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-2 {
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.repmx-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-3 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
/* Ensure shortcode cards follow mathematical structure */
.repmx-properties-shortcode .repmx-premium-card,
.repm-properties-shortcode .repmx-premium-card {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform: translateY(0);
display: flex;
flex-direction: column;
height: 100%;
min-height: 520px; /* Mathematical standard */
}
.repmx-properties-shortcode .repmx-premium-card:hover,
.repm-properties-shortcode .repmx-premium-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
/* Shortcode responsive mathematical breakpoints */
/* Large Desktop to Ultra-Wide for Shortcodes (1025px - 1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 32px;
}
.repmx-properties-shortcode .repmx-columns-1,
.repmx-properties-shortcode .repmx-columns-2,
.repmx-properties-shortcode .repmx-columns-3,
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
/* Optimized for large desktop screens */
}
}
/* Tablet Breakpoint for Shortcodes */
@media (max-width: 1024px) {
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.repmx-properties-shortcode .repmx-columns-1,
.repmx-properties-shortcode .repmx-columns-2,
.repmx-properties-shortcode .repmx-columns-3,
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
/* Full width responsive on tablet */
}
.repmx-properties-shortcode .repmx-premium-card,
.repm-properties-shortcode .repmx-premium-card {
min-height: 500px;
}
}
@media (max-width: 768px) {
.repmx-properties-shortcode .repmx-premium-grid,
.repm-properties-shortcode .repmx-premium-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 15px 0;
}
.repmx-properties-shortcode .repmx-columns-1,
.repmx-properties-shortcode .repmx-columns-2,
.repmx-properties-shortcode .repmx-columns-3,
.repmx-properties-shortcode .repmx-columns-4,
.repm-properties-shortcode .repmx-columns-1,
.repm-properties-shortcode .repmx-columns-2,
.repm-properties-shortcode .repmx-columns-3,
.repm-properties-shortcode .repmx-columns-4 {
grid-template-columns: 1fr;
/* Full width single column on mobile */
}
.repmx-properties-shortcode .repmx-premium-card,
.repm-properties-shortcode .repmx-premium-card {
min-height: 460px;
}
}
/* ===== END SHORTCODE SPECIFIC OVERRIDES ===== */
/* ============= ADVANCED CAROUSEL SYSTEM ============= */
/* Carousel Container - Maintains ALL existing card styling */
.repmx-carousel-container {
position: relative;
width: 100%;
margin: 20px 0;
overflow: hidden; /* PREVENT ANY OVERFLOW FROM REVEAL ANIMATIONS */
}
/* Carousel Wrapper - Native CSS Scrolling with Shadow Protection */
.repmx-carousel-wrapper {
display: flex;
overflow-x: auto;
overflow-y: hidden; /* PREVENT VERTICAL SCROLLING */
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
gap: 30px;
padding: 20px 40px; /* Left/Right padding to prevent shadow clipping */
margin: 0 -40px; /* Negative margin to maintain container width */
/* Hide scrollbar but keep functionality */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
/* Enhanced mobile momentum scrolling */
-webkit-overflow-scrolling: touch;
}
/* Mobile-specific: Smoother swipe with momentum */
@media (max-width: 768px) {
.repmx-carousel-wrapper {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-padding: 0 20px;
}
}
.repmx-carousel-wrapper::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Carousel Item - Preserves ALL card styling */
.repmx-carousel-item {
flex: 0 0 350px; /* Fixed width for consistent layout */
scroll-snap-align: start;
scroll-snap-stop: always;
/* CRITICAL: Maintain all existing card structure */
display: flex;
height: 100%;
}
/* Ensure carousel cards maintain mathematical structure */
.repmx-carousel-item .repmx-premium-card {
width: 100%;
height: 100%;
min-height: 520px; /* Mathematical standard maintained */
display: flex;
flex-direction: column;
/* ALL existing styling preserved */
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform: translateY(0);
}
/* Preserve ALL hover effects in carousel */
.repmx-carousel-item .repmx-premium-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: #3b82f6;
}
/* Maintain media section structure */
.repmx-carousel-item .repmx-premium-card__media {
height: 250px; /* Fixed height maintained */
flex-shrink: 0;
}
/* Maintain content structure */
.repmx-carousel-item .repmx-premium-card__content {
flex: 1;
min-height: 270px; /* Mathematical minimum maintained */
display: flex;
flex-direction: column;
padding: 18px;
background: #ffffff;
background-color: #ffffff;
}
/* Maintain actions at bottom */
.repmx-carousel-item .repmx-premium-card__actions {
margin-top: auto;
}
/* ============= FAKE TRANSPARENT CARD - DESKTOP ONLY ============= */
/* Fake card for desktop spacing - completely transparent */
.repmx-carousel-fake-item {
flex: 0 0 10px; /* Same width as regular cards */
scroll-snap-align: start;
display: flex;
height: 100%;
}
.repmx-fake-card {
width: 100%;
height: 100%;
min-height: 520px; /* Same height as regular cards */
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
position: relative;
/* Make it completely invisible */
opacity: 0;
pointer-events: none;
/* Ensure it takes up space but is invisible */
visibility: hidden;
}
/* Carousel Controls Container - AFTER the slider */
.repmx-carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 20px;
padding: 0 20px;
}
/* Scroll Progress Indicator Line */
.repmx-carousel-progress {
flex: 1;
height: 4px;
background: #e2e8f0;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.repmx-carousel-progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 2px;
transition: width 0.3s ease;
width: 0%;
}
/* Navigation Buttons */
.repmx-carousel-nav {
display: flex;
gap: 10px;
}
.repmx-carousel-btn {
width: 44px;
height: 44px;
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #64748b;
}
.repmx-carousel-btn:hover {
background: #3b82f6;
border-color: #3b82f6;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.repmx-carousel-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.repmx-carousel-btn:disabled:hover {
background: #ffffff;
border-color: #e2e8f0;
color: #64748b;
}
.repmx-carousel-btn svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
/* Responsive Carousel Adjustments */
@media (max-width: 1024px) {
.repmx-carousel-wrapper {
padding: 20px 30px; /* Reduced padding for tablet */
margin: 0 -30px;
}
.repmx-carousel-item {
flex: 0 0 320px;
}
.repmx-carousel-item .repmx-premium-card {
min-height: 500px;
}
.repmx-carousel-item .repmx-premium-card__content {
min-height: 250px;
}
/* Adjust fake card for tablet */
.repmx-carousel-fake-item {
flex: 0 0 10px;
}
.repmx-fake-card {
min-height: 500px;
}
}
@media (max-width: 768px) {
.repmx-carousel-wrapper {
gap: 20px;
padding: 15px 20px; /* Optimized padding for mobile */
margin: 0 -20px;
}
.repmx-carousel-item {
flex: 0 0 calc(100vw - 80px); /* Full width minus padding and margins */
max-width: 320px; /* Maximum width for larger mobile screens */
min-width: 280px; /* Minimum width for very small screens */
}
.repmx-carousel-item .repmx-premium-card {
min-height: 460px;
}
.repmx-carousel-item .repmx-premium-card__media {
height: 220px;
}
.repmx-carousel-item .repmx-premium-card__content {
min-height: 240px;
padding: 16px;
}
.repmx-carousel-controls {
margin-top: 15px;
padding: 0 15px;
}
.repmx-carousel-btn {
width: 40px;
height: 40px;
}
.repmx-carousel-btn svg {
width: 18px;
height: 18px;
}
/* HIDE FAKE CARD ON MOBILE */
.repmx-carousel-fake-item {
display: none !important;
}
}
@media (max-width: 480px) {
.repmx-carousel-wrapper {
padding: 15px 15px; /* Minimal padding for small mobile */
margin: 0 5px;
gap: 15px;
}
.repmx-carousel-item {
flex: 0 0 calc(100vw - 60px); /* Full width minus padding and margins */
max-width: 320px; /* Maximum width */
min-width: 250px; /* Minimum width */
}
.repmx-carousel-item .repmx-premium-card {
min-height: 420px;
border-radius: 16px;
}
.repmx-carousel-item .repmx-premium-card__media {
height: 200px;
}
.repmx-carousel-item .repmx-premium-card__content {
min-height: 220px;
}
/* ENSURE FAKE CARD STAYS HIDDEN ON SMALL MOBILE */
.repmx-carousel-fake-item {
display: none !important;
}
}
/* Extra small mobile optimization for single card display */
@media (max-width: 375px) {
.repmx-carousel-wrapper {
padding: 15px 10px;
margin: 0 -10px;
gap: 12px;
}
.repmx-carousel-item {
flex: 0 0 calc(100vw - 40px); /* Almost full width */
max-width: 260px;
min-width: 240px;
}
}
/* ============= RELATED PROPERTIES SECTION ============= */
/* Related Properties Section */
.repmx-related-properties {
background: #f8fafc;
padding: 80px 0;
margin-top: 0;
border-top: 1px solid #e2e8f0;
}
.repmx-related-properties .repmx-section-header {
text-align: center;
margin-bottom: 60px;
}
.repmx-related-properties .repmx-section__title {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 16px;
line-height: 1.2;
}
.repmx-related-properties .repmx-section__subtitle {
font-size: 1.125rem;
color: #64748b;
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Related Properties Content */
.repmx-related-properties-content {
position: relative;
}
/* Empty State for Related Properties */
.repmx-related-empty {
text-align: center;
padding: 80px 20px;
background: #ffffff;
border-radius: 20px;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.repmx-related-empty .repmx-empty-icon {
margin-bottom: 24px;
opacity: 0.6;
}
.repmx-related-empty .repmx-empty-icon svg {
color: #94a3b8;
}
.repmx-related-empty h3 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 12px;
}
.repmx-related-empty p {
font-size: 1rem;
color: #64748b;
margin: 0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Responsive Design for Related Properties */
@media (max-width: 768px) {
.repmx-related-properties {
padding: 60px 0;
}
.repmx-related-properties .repmx-section__title {
font-size: 2rem;
}
.repmx-related-properties .repmx-section__subtitle {
font-size: 1rem;
}
.repmx-related-properties .repmx-section-header {
margin-bottom: 40px;
}
.repmx-related-empty {
padding: 60px 20px;
}
}
@media (max-width: 480px) {
.repmx-related-properties {
padding: 40px 0;
}
.repmx-related-properties .repmx-section__title {
font-size: 1.75rem;
}
.repmx-related-empty {
padding: 40px 15px;
}
}
/* ============= ADDITIONAL SHORTCODE STYLING ============= */
/* Properties Shortcode Container */
.repmx-properties-shortcode,
.repm-properties-shortcode {
margin: 40px 0;
clear: both;
}
/* Property Item Container */
.repmx-property-item,
.repm-property-item {
height: 100%;
display: flex;
flex-direction: column;
}
/* ============= MATHEMATICAL CARD STANDARDIZATION ============= */
/* Ensure all cards have consistent structure for carousel/slider compatibility */
.repmx-property-item {
height: 100%;
display: flex;
}
.repmx-property-item .repmx-premium-card,
.repm-property-item .repmx-premium-card {
height: 100%;
min-height: 520px; /* Mathematical standard */
display: flex;
flex-direction: column;
width: 100%;
}
.repmx-property-item .repmx-premium-card__media,
.repm-property-item .repmx-premium-card__media {
height: 250px; /* Fixed media height */
flex-shrink: 0;
}
.repmx-property-item .repmx-premium-card__content,
.repm-property-item .repmx-premium-card__content {
flex: 1;
min-height: 270px; /* Mathematical minimum for content */
display: flex;
flex-direction: column;
}
.repmx-property-item .repmx-premium-card__actions,
.repm-property-item .repmx-premium-card__actions {
margin-top: auto; /* Always at bottom */
}
/* Property Views Counter - Overlay Style */
.repmx-property-views {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
align-items: center;
gap: 4px;
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 5;
transition: all 0.3s ease;
}
.repmx-property-views:hover {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.repmx-property-views svg {
color: #ffffff;
flex-shrink: 0;
width: 12px;
height: 12px;
}
/* Error message styling */
.repmx-error {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 16px;
margin: 20px 0;
}
.repmx-error p {
color: #dc2626;
margin: 0;
font-weight: 600;
}
/* ============= CLEAN SHORTCODE STYLING ============= */
/* Remove any unwanted pseudo-elements and borders from all shortcodes */
.repmx-most-viewed-properties .repmx-premium-card,
.repmx-trending-properties .repmx-premium-card,
.repmx-featured-properties-shortcode .repmx-premium-card {
position: relative;
}
.repmx-most-viewed-properties .repmx-premium-card::before,
.repmx-most-viewed-properties .repmx-premium-card::after,
.repmx-trending-properties .repmx-premium-card::before,
.repmx-trending-properties .repmx-premium-card::after,
.repmx-featured-properties-shortcode .repmx-premium-card::before,
.repmx-featured-properties-shortcode .repmx-premium-card::after {
display: none;
}
.repmx-most-viewed-properties .repmx-premium-card *,
.repmx-trending-properties .repmx-premium-card *,
.repmx-featured-properties-shortcode .repmx-premium-card * {
border-left: none;
border-right: none;
}
.repmx-most-viewed-properties .repmx-premium-card *::before,
.repmx-most-viewed-properties .repmx-premium-card *::after,
.repmx-trending-properties .repmx-premium-card *::before,
.repmx-trending-properties .repmx-premium-card *::after,
.repmx-featured-properties-shortcode .repmx-premium-card *::before,
.repmx-featured-properties-shortcode .repmx-premium-card *::after {
border-left: none;
border-right: none;
}
/* ============= CLEAN HOVER SYSTEM - NO CONFLICTS ============= */
/* Base content area - clean white background */
.repmx-premium-card__content {
background: #ffffff;
background-color: #ffffff;
transition: none;
}
/* NO hover color changes on content area - keep it clean */
.repmx-premium-card__content:hover {
background: #ffffff;
background-color: #ffffff;
color: inherit;
}
/* Ensure card hover only affects the card container, not content */
.repmx-premium-card:hover .repmx-premium-card__content {
background: #ffffff;
background-color: #ffffff;
color: inherit;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
/* Mobile overlay adjustments */
.repmx-property-views {
bottom: 6px;
right: 6px;
font-size: 0.7rem;
padding: 3px 6px;
border-radius: 10px;
}
.repmx-property-views svg {
width: 10px;
height: 10px;
}
}
/* Featured Properties Specific Styling - DISABLED TO PREVENT CONFLICTS */
/*
.repmx-featured-properties-shortcode .repmx-premium-card {
border: 2px solid #f59e0b;
position: relative;
}
.repmx-featured-properties-shortcode .repmx-premium-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #f59e0b, #d97706, #f59e0b);
border-radius: 22px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.repmx-featured-properties-shortcode .repmx-premium-card:hover::before {
opacity: 1;
}
*/
/* Recent Properties Specific Styling */
.repmx-recent-properties-shortcode .repmx-premium-card__header::after {
content: 'NEW';
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Shortcode Title Styling */
.repmx-shortcode-title {
text-align: center;
margin-bottom: 40px;
font-size: 2rem;
font-weight: 800;
color: #1e293b;
position: relative;
}
.repmx-shortcode-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 2px;
}
/* ===== END ADDITIONAL SHORTCODE STYLING ===== */
/* ===== END PREMIUM LISTINGS DESIGN ===== */
/* ===== COMPACT SEARCH FORM STYLES ===== */
.repmx-compact-search-shortcode {
margin: 30px 0;
padding: 0;
}
.repmx-compact-search-form {
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 24px;
box-shadow:
0 10px 40px rgba(0,0,0,0.08),
0 4px 12px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.3);
position: relative;
overflow: hidden;
}
.repmx-compact-search-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}
/* Main Search Row */
.repmx-search-main-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.repmx-search-input-group {
position: relative;
flex: 1;
min-width: 200px;
display: flex;
align-items: center;
}
.repmx-input-icon {
position: absolute;
left: 16px;
z-index: 2;
color: #6b7280;
pointer-events: none;
}
.repmx-search-input,
.repmx-search-select {
width: 100%;
padding: 14px 16px 14px 48px;
border: 2px solid rgba(229,231,235,0.8);
border-radius: 14px;
font-size: 15px;
font-weight: 500;
color: #1f2937;
background: rgba(255,255,255,0.9);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.repmx-search-input:focus,
.repmx-search-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow:
0 0 0 3px rgba(59,130,246,0.1),
0 4px 12px rgba(59,130,246,0.15);
transform: translateY(-1px);
}
.repmx-search-input::placeholder {
color: #9ca3af;
font-weight: 400;
}
/* Budget Group */
.repmx-budget-group {
min-width: 180px;
}
.repmx-budget-compact {
width: 100%;
padding-left: 32px;
}
.repmx-budget-display-compact {
margin-bottom: 8px;
}
.repmx-budget-display-compact span {
font-size: 13px;
font-weight: 600;
color: #374151;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.repmx-budget-slider-compact {
position: relative;
height: 6px;
}
.repmx-range-input {
position: absolute;
width: 100%;
height: 6px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.repmx-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
cursor: pointer;
pointer-events: all;
box-shadow: 0 2px 8px rgba(59,130,246,0.3);
border: 2px solid white;
transition: all 0.2s ease;
}
.repmx-range-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}
.repmx-range-input::-webkit-slider-track {
height: 6px;
background: #e5e7eb;
border-radius: 3px;
}
/* Advanced Toggle */
.repmx-advanced-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
background: rgba(99,102,241,0.1);
color: #6366f1;
border: 2px solid rgba(99,102,241,0.2);
border-radius: 14px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.repmx-advanced-toggle:hover {
background: rgba(99,102,241,0.15);
border-color: rgba(99,102,241,0.3);
transform: translateY(-1px);
}
.repmx-advanced-toggle.active {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border-color: #6366f1;
}
/* Search Button */
.repmx-search-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: white;
border: none;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(59,130,246,0.3);
white-space: nowrap;
position: relative;
overflow: hidden;
}
.repmx-search-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.repmx-search-btn:hover::before {
left: 100%;
}
.repmx-search-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59,130,246,0.4);
}
/* Advanced Panel */
.repmx-advanced-panel {
margin-top: 20px;
padding: 20px;
background: rgba(248,250,252,0.7);
border-radius: 16px;
border: 1px solid rgba(229,231,235,0.6);
display: none;
animation: slideDown 0.3s ease-out;
}
.repmx-advanced-panel.show {
display: block;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.repmx-advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 16px;
}
.repmx-filter-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.repmx-filter-label {
font-size: 12px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.repmx-pill-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.repmx-pill-item {
cursor: pointer;
}
.repmx-pill-item input {
display: none;
}
.repmx-pill {
display: inline-block;
padding: 8px 16px;
background: rgba(255,255,255,0.8);
border: 2px solid rgba(229,231,235,0.8);
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #6b7280;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.repmx-pill-item input:checked + .repmx-pill {
background: linear-gradient(135deg, #3b82f6, #6366f1);
color: white;
border-color: #3b82f6;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.repmx-pill:hover {
border-color: #3b82f6;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}
/* Advanced Actions */
.repmx-advanced-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid rgba(229,231,235,0.6);
}
.repmx-clear-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: rgba(239,68,68,0.1);
color: #dc2626;
border: 2px solid rgba(239,68,68,0.2);
border-radius: 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.repmx-clear-btn:hover {
background: rgba(239,68,68,0.15);
border-color: rgba(239,68,68,0.3);
transform: translateY(-1px);
}
.repmx-results-count {
font-size: 13px;
font-weight: 600;
color: #6b7280;
background: rgba(255,255,255,0.8);
padding: 8px 12px;
border-radius: 12px;
border: 1px solid rgba(229,231,235,0.6);
}
/* ============= ADVANCED EMI CALCULATOR ============= */
/* Page Container */
.repmx-emi-calculator-page {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
/* Hero Section */
.repmx-emi-hero {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.repmx-emi-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.repmx-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.repmx-hero-content {
text-align: center;
position: relative;
z-index: 2;
}
.repmx-hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.repmx-hero-subtitle {
font-size: 1.25rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.repmx-hero-features {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.repmx-feature-badge {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 12px 20px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 600;
transition: all 0.3s ease;
}
.repmx-feature-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
/* Calculator Section */
.repmx-calculator-section {
padding: 60px 0;
position: relative;
}
.repmx-calculator-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
/* Calculator Panel */
.repmx-calculator-panel {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(14, 127, 255, 0.1);
}
.repmx-panel-header {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
padding: 30px;
position: relative;
}
.repmx-panel-header h2 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 20px;
}
.repmx-calculator-tabs {
display: flex;
gap: 10px;
}
.repmx-tab-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 16px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.repmx-tab-btn:hover,
.repmx-tab-btn.active {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
/* Form Styling */
.repmx-calculator-form {
padding: 40px;
}
.repmx-form-group {
margin-bottom: 35px;
}
.repmx-form-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
font-weight: 600;
color: #1e293b;
}
.repmx-label-text {
font-size: 1.1rem;
}
.repmx-label-currency,
.repmx-label-unit {
background: linear-gradient(135deg, #0e7fff, #fda13c);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
}
.repmx-input-wrapper {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
}
/* Range Slider Styling */
.repmx-range-slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
border-radius: 10px;
outline: none;
position: relative;
}
.repmx-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 12px rgba(14, 127, 255, 0.3);
transition: all 0.3s ease;
}
.repmx-range-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(14, 127, 255, 0.4);
}
.repmx-range-slider::-moz-range-thumb {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 4px 12px rgba(14, 127, 255, 0.3);
}
/* Number Input */
.repmx-number-input {
width: 140px;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
text-align: center;
background: #f8fafc;
transition: all 0.3s ease;
}
.repmx-number-input:focus {
outline: none;
border-color: #0e7fff;
background: white;
box-shadow: 0 0 0 3px rgba(14, 127, 255, 0.1);
}
.repmx-range-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 0.85rem;
color: #64748b;
font-weight: 500;
}
/* Select Input */
.repmx-select-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
background: #f8fafc;
transition: all 0.3s ease;
}
.repmx-select-input:focus {
outline: none;
border-color: #0e7fff;
background: white;
box-shadow: 0 0 0 3px rgba(14, 127, 255, 0.1);
}
/* Advanced Options */
.repmx-advanced-toggle {
margin: 30px 0;
text-align: center;
}
.repmx-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 2px solid #e2e8f0;
color: #64748b;
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.repmx-toggle-btn:hover {
border-color: #0e7fff;
color: #0e7fff;
}
.repmx-toggle-btn.active {
background: #0e7fff;
border-color: #0e7fff;
color: white;
}
.repmx-advanced-panel {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.repmx-advanced-panel.active {
max-height: 500px;
opacity: 1;
margin-top: 20px;
}
/* Calculate Button */
.repmx-calculate-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
border: none;
padding: 18px 24px;
border-radius: 16px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(14, 127, 255, 0.3);
margin-top: 30px;
}
.repmx-calculate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(14, 127, 255, 0.4);
}
.repmx-calculate-btn:active {
transform: translateY(0);
}
/* Results Panel */
.repmx-results-panel {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(14, 127, 255, 0.1);
}
.repmx-results-actions {
display: flex;
gap: 10px;
}
.repmx-action-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.repmx-action-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
/* Result Cards */
.repmx-result-cards {
padding: 40px;
display: grid;
gap: 20px;
}
.repmx-result-card {
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 25px;
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.repmx-result-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #0e7fff, #fda13c);
opacity: 0;
transition: all 0.3s ease;
}
.repmx-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}
.repmx-result-card:hover::before {
opacity: 1;
}
.repmx-primary-card {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
}
.repmx-primary-card::before {
background: #fda13c;
opacity: 1;
}
.repmx-card-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.repmx-result-card:not(.repmx-primary-card) .repmx-card-icon {
background: rgba(14, 127, 255, 0.1);
color: #0e7fff;
border: 1px solid rgba(14, 127, 255, 0.2);
}
.repmx-card-content h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
opacity: 0.9;
}
.repmx-card-value {
font-size: 2rem;
font-weight: 800;
margin-bottom: 4px;
background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
-webkit-background-clip: text;
background-clip: text;
}
.repmx-primary-card .repmx-card-value {
color: white;
}
.repmx-card-subtitle {
font-size: 0.85rem;
opacity: 0.7;
font-weight: 500;
}
/* Chart Container */
.repmx-chart-container {
padding: 40px;
border-top: 1px solid #e2e8f0;
}
.repmx-chart-container h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 30px;
color: #1e293b;
text-align: center;
}
.repmx-pie-chart-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.repmx-chart-legend {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
max-width: 300px;
}
.repmx-legend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.repmx-legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
flex-shrink: 0;
}
.repmx-legend-item span {
flex: 1;
font-weight: 500;
color: #64748b;
}
.repmx-legend-item strong {
font-weight: 700;
color: #1e293b;
}
/* Schedule Section */
.repmx-schedule-section {
padding: 60px 0;
background: white;
}
.repmx-schedule-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 20px;
}
.repmx-schedule-header h2 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
}
.repmx-schedule-controls {
display: flex;
gap: 10px;
align-items: center;
}
.repmx-control-btn {
display: flex;
align-items: center;
gap: 8px;
background: #f8fafc;
border: 2px solid #e2e8f0;
color: #64748b;
padding: 10px 16px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.repmx-control-btn:hover,
.repmx-control-btn.active {
background: #0e7fff;
border-color: #0e7fff;
color: white;
}
/* Schedule Table */
.repmx-schedule-table-wrapper {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
}
.repmx-schedule-table {
width: 100%;
border-collapse: collapse;
}
.repmx-schedule-table th {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
padding: 20px 16px;
text-align: left;
font-weight: 700;
font-size: 0.95rem;
}
.repmx-schedule-table td {
padding: 16px;
border-bottom: 1px solid #e2e8f0;
font-weight: 600;
color: #1e293b;
}
.repmx-schedule-table tbody tr:hover {
background: #f8fafc;
}
.repmx-schedule-table tbody tr:last-child td {
border-bottom: none;
}
/* ============= RESPONSIVE DESIGN ============= */
/* Tablet */
@media (max-width: 1024px) {
.repmx-calculator-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.repmx-hero-title {
font-size: 2.5rem;
}
.repmx-hero-features {
gap: 20px;
}
.repmx-feature-badge {
padding: 10px 16px;
font-size: 0.9rem;
}
.repmx-calculator-tabs {
flex-wrap: wrap;
}
.repmx-tab-btn {
flex: 1;
min-width: 120px;
justify-content: center;
}
}
/* Mobile */
@media (max-width: 768px) {
.repmx-emi-hero {
padding: 60px 0 40px;
}
.repmx-hero-title {
font-size: 2rem;
}
.repmx-hero-subtitle {
font-size: 1.1rem;
}
.repmx-hero-features {
flex-direction: column;
align-items: center;
gap: 15px;
}
.repmx-feature-badge {
width: 100%;
max-width: 280px;
justify-content: center;
}
.repmx-calculator-section {
padding: 40px 0;
}
.repmx-calculator-form,
.repmx-result-cards,
.repmx-chart-container {
padding: 30px 20px;
}
.repmx-panel-header {
padding: 25px 20px;
}
.repmx-calculator-tabs {
flex-direction: column;
gap: 8px;
}
.repmx-tab-btn {
width: 100%;
justify-content: center;
}
.repmx-input-wrapper {
grid-template-columns: 1fr;
gap: 15px;
}
.repmx-number-input {
width: 100%;
}
.repmx-result-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
.repmx-card-icon {
width: 50px;
height: 50px;
}
.repmx-card-value {
font-size: 1.75rem;
}
.repmx-schedule-header {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.repmx-schedule-controls {
flex-wrap: wrap;
justify-content: center;
}
.repmx-control-btn {
flex: 1;
min-width: 100px;
justify-content: center;
}
.repmx-schedule-table-wrapper {
overflow-x: auto;
}
.repmx-schedule-table {
min-width: 600px;
}
.repmx-schedule-table th,
.repmx-schedule-table td {
padding: 12px 8px;
font-size: 0.9rem;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.repmx-container {
padding: 0 15px;
}
.repmx-hero-title {
font-size: 1.75rem;
}
.repmx-hero-subtitle {
font-size: 1rem;
}
.repmx-calculator-form,
.repmx-result-cards,
.repmx-chart-container {
padding: 20px 15px;
}
.repmx-panel-header {
padding: 20px 15px;
}
.repmx-form-group {
margin-bottom: 25px;
}
.repmx-card-value {
font-size: 1.5rem;
}
.repmx-schedule-table {
min-width: 500px;
}
}
/* Print Styles */
@media print {
.repmx-emi-hero,
.repmx-calculator-panel,
.repmx-results-actions,
.repmx-schedule-controls {
display: none !important;
}
.repmx-calculator-wrapper {
grid-template-columns: 1fr;
}
.repmx-results-panel {
box-shadow: none;
border: 1px solid #ccc;
}
.repmx-schedule-section {
page-break-inside: avoid;
}
}
/* ============= INLINE EMI CALCULATOR ============= */
.repmx-inline-emi-calculator {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 2px solid #e2e8f0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
margin: 30px 0;
}
.repmx-calc-header {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
padding: 30px;
}
.repmx-calc-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #fff !important;
}
.repmx-calc-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.repmx-calc-tab {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 16px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.repmx-calc-tab:hover,
.repmx-calc-tab.active {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.repmx-calc-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 40px;
}
/* Input Panel */
.repmx-calc-inputs {
display: flex;
flex-direction: column;
gap: 30px;
}
.repmx-calc-field {
display: flex;
flex-direction: column;
gap: 12px;
}
.repmx-calc-label {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #1e293b;
font-size: 1.1rem;
}
.repmx-calc-currency,
.repmx-calc-unit {
background: linear-gradient(135deg, #0e7fff, #fda13c);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
}
.repmx-calc-input-group {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
}
.repmx-calc-slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
border-radius: 10px;
outline: none;
}
.repmx-calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 12px rgba(14, 127, 255, 0.3);
transition: all 0.3s ease;
}
.repmx-calc-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(14, 127, 255, 0.4);
}
.repmx-calc-number {
width: 120px;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
text-align: center;
background: #f8fafc;
transition: all 0.3s ease;
}
.repmx-calc-number:focus {
outline: none;
border-color: #0e7fff;
background: white;
box-shadow: 0 0 0 3px rgba(14, 127, 255, 0.1);
}
.repmx-calc-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: #64748b;
font-weight: 500;
}
/* Results Panel */
.repmx-calc-results {
display: flex;
flex-direction: column;
gap: 20px;
}
.repmx-calc-result-card {
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 20px;
border-radius: 16px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.repmx-calc-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.repmx-calc-result-card.repmx-primary {
background: linear-gradient(135deg, #0e7fff 0%, #1e40af 100%);
color: white;
}
.repmx-calc-result-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.repmx-calc-result-card:not(.repmx-primary) .repmx-calc-result-icon {
background: rgba(14, 127, 255, 0.1);
color: #0e7fff;
border: 1px solid rgba(14, 127, 255, 0.2);
}
.repmx-calc-result-content h4 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 8px;
opacity: 0.9;
}
.repmx-calc-result-value {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 4px;
}
.repmx-calc-result-subtitle {
font-size: 0.8rem;
opacity: 0.7;
font-weight: 500;
}
/* Chart */
.repmx-calc-chart {
background: #f8fafc;
padding: 25px;
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.repmx-calc-chart h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
text-align: center;
}
.repmx-calc-chart-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.repmx-calc-legend {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.repmx-calc-legend-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: white;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.repmx-calc-legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.repmx-calc-legend-item span {
flex: 1;
font-weight: 500;
color: #64748b;
font-size: 0.9rem;
}
.repmx-calc-legend-item strong {
font-weight: 700;
color: #1e293b;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 1024px) {
.repmx-calc-content {
grid-template-columns: 1fr;
gap: 30px;
}
.repmx-calc-tabs {
justify-content: center;
}
.repmx-calc-tab {
flex: 1;
min-width: 100px;
justify-content: center;
}
}
@media (max-width: 768px) {
.repmx-calc-header {
padding: 25px 20px;
}
.repmx-calc-content {
padding: 30px 20px;
gap: 25px;
}
.repmx-calc-input-group {
grid-template-columns: 1fr;
gap: 15px;
}
.repmx-calc-number {
width: 100%;
}
.repmx-calc-result-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
.repmx-calc-result-icon {
width: 40px;
height: 40px;
}
.repmx-calc-result-value {
font-size: 1.25rem;
}
.repmx-calc-tabs {
flex-direction: column;
gap: 8px;
}
.repmx-calc-tab {
width: 100%;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.repmx-search-main-row {
gap: 12px;
}
.repmx-search-input-group {
min-width: 180px;
}
.repmx-budget-group {
min-width: 160px;
}
}
@media (max-width: 768px) {
.repmx-compact-search-form {
padding: 20px;
}
.repmx-search-main-row {
flex-direction: column;
gap: 12px;
}
.repmx-search-input-group,
.repmx-budget-group {
width: 100%;
min-width: auto;
}
.repmx-advanced-toggle,
.repmx-search-btn {
width: 100%;
justify-content: center;
}
.repmx-advanced-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.repmx-advanced-actions {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.repmx-clear-btn {
justify-content: center;
}
}