:root { --accent: #168c24; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(21, 28, 21, 1), -10px 10px rgba(21, 28, 21, 0.2), -10px -10px rgba(21, 28, 21, 1), 10px -10px rgba(21, 28, 21, 0.2); } 25% { box-shadow: -10px 10px rgba(21, 28, 21, 0.2), -10px -10px rgba(21, 28, 21, 1), 10px -10px rgba(21, 28, 21, 0.2), 10px 10px rgba(21, 28, 21, 1); } 50% { box-shadow: -10px -10px rgba(21, 28, 21, 1), 10px -10px rgba(21, 28, 21, 0.2), 10px 10px rgba(21, 28, 21, 1), -10px 10px rgba(21, 28, 21, 0.2); } 75% { box-shadow: 10px -10px rgba(21, 28, 21, 0.2), 10px 10px rgba(21, 28, 21, 1), -10px 10px rgba(21, 28, 21, 0.2), -10px -10px rgba(21, 28, 21, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #f4f4f4 } /* Change all dashboard listing status statistic cards to brand green */ body .mlduo-stat-box, body .mlduo-stat-box.second { background: #168c24 !important; background-color: #168c24 !important; } /* ========================================================================== Hide the default theme sign-in links ========================================================================== */ /* Hide the default theme sign-in links next to the custom login button */ .header-right .user-area, .header-right .sign-in-buttons, .header-right a[href*="login"] { display: none !important; } /* Hide the mobile sign-in icon wrapper completely */ .mob-sign-in, div.mob-sign-in { display: none !important; } /* ========================================================================== Change Header Width ========================================================================== */ /* Target only the header container on desktop screens */ @media screen and (min-width: 1200px) { header.c27-main-header .header-container { width: 100% !important; max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================================== Property Listing Change design icon and label ========================================================================== */ /* 1. Global Box Setup for Heading Icons & Perfect Label Alignment */ .pf-head .title-style-1 { display: flex !important; align-items: center !important; /* Forces the text title to align perfectly with the middle of the icon badge */ flex-wrap: nowrap; } .pf-head .title-style-1 i { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; line-height: 1 !important; margin-right: 12px; border-radius: 8px; float: none !important; /* Clears the old theme float pushing text down */ padding-right: 0 !important; font-size: 18px !important; flex-shrink: 0; /* Prevents the badge from squeezing on smaller mobile views */ } .pf-head .title-style-1 h3 { margin: 0 !important; /* Removes default theme gaps to lock vertical alignment */ line-height: 1.2 !important; } /* 2. Full Description Icon (Warm Amber) */ .pf-head .title-style-1 i.view_headline { color: #FF9800 !important; background-color: rgba(255, 152, 0, 0.12) !important; } /* 3. Location Icon (Vibrant Emerald) */ .pf-head .title-style-1 i.icon-location-map-1 { color: #00E676 !important; background-color: rgba(0, 230, 118, 0.12) !important; } /* 4. Accommodation Details Icon (Royal Purple) */ .pf-head .title-style-1 i.fa-building { color: #9C27B0 !important; background-color: rgba(156, 39, 176, 0.12) !important; } /* 5. Contact Information Icon (Bright Blue) */ .pf-head .title-style-1 i.icon-user-chat-1 { color: #00B0FF !important; background-color: rgba(0, 176, 255, 0.12) !important; } /* 6. Booking Information Icon (Crimson Red) */ .pf-head .title-style-1 i.fa-address-book { color: #FF1744 !important; background-color: rgba(255, 23, 68, 0.12) !important; } /* 7. Member Profile Icon (Teal Cyan) */ .pf-head .title-style-1 i.account_circle { color: #00BFA5 !important; background-color: rgba(0, 191, 165, 0.12) !important; } /* ========================================================================== TARGETED BAGUIO VISITA CARD LAYOUT (PRESERVING AUTHOR) ========================================================================== */ /* 1. Style the Outer Card Container Grid */ .lf-item-container { border-radius: 14px !important; overflow: hidden !important; border: 1px solid #dcdcdc !important; /* Clean, visible border line */ box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important; /* Very soft resting shadow */ background: #ffffff !important; /* Adds a buttery-smooth animation timing for the hover effect */ transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* THE HOVER HIGHLIGHT EFFECT */ .lf-item-container:hover { transform: translateY(-6px) !important; /* Physically lifts the card up slightly */ box-shadow: 0 16px 30px rgba(0,0,0,0.12) !important; /* Creates the deep shadow below */ border-color: #c4c4c4 !important; /* Slightly darkens the border so it stands out */ } /* 2. Strip out all boxed background dividers between footer blocks */ .lf-item-container .c27-footer-section { border-top: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; padding: 3px 16px !important; /* Tightens up the vertical space between rows */ min-height: auto !important; height: auto !important; display: block !important; text-align: left !important; } /* Add padding to the final item block inside the card wrapper for separation */ .lf-item-container .c27-footer-section:last-child { padding-bottom: 16px !important; } /* 3. Flatten out the list items inside your data rows */ .c27-footer-section .details-list li { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } /* 4. Force text strings away from center-alignment and 100% width rules */ .listing-details-3 .details-list li span, .listing-details-3 .details-list li a { text-align: left !important; width: auto !important; display: inline-block !important; font-size: 13px !important; color: #444444 !important; margin: 0 !important; padding: 0 !important; } /* 5. Make the row icons inline, compact, and match the Baguio Green theme */ .c27-footer-section .details-list li i, .c27-footer-section .details-list li svg { color: #117a3a !important; font-size: 15px !important; /* Controls the actual size of the graphic icon itself */ margin: 0 10px 0 0 !important; display: inline-flex !important; /* Uses flex alignment to center the icon inside the box */ align-items: center !important; justify-content: center !important; width: 24px !important; /* Matches the 24px avatar width exactly */ height: 24px !important; /* Matches the 24px avatar height exactly */ flex-shrink: 0 !important; position: static !important; } /* 6. Fix your Author layout row so it aligns perfectly on the left */ .lf-item-container .event-host { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } /* ========================================================================== 🔧 7. TARGETED ADDRESS FIELD OPTIMIZATION (NEW OVERRIDES) ========================================================================== */ /* Isolate the address row by scanning for location icon class keywords */ .c27-footer-section .details-list li:has(i[class*="location"]), .c27-footer-section .details-list li:has(i[class*="map"]), .c27-footer-section .details-list li:has(i[class*="marker"]), .c27-footer-section .details-list li:has(i[class*="pin"]), .c27-footer-section .details-list li:has(svg[class*="location"]), .c27-footer-section .details-list li:has(svg[class*="map"]) { display: block !important; /* Swaps from flex to block layout so lines wrap naturally */ width: 100% !important; padding: 6px 0 !important; /* Adds clean padding on the top and bottom only */ margin: 0 !important; } /* Hide the icon for the address row ONLY */ .c27-footer-section .details-list li:has(i[class*="location"]) i, .c27-footer-section .details-list li:has(i[class*="map"]) i, .c27-footer-section .details-list li:has(i[class*="marker"]) i, .c27-footer-section .details-list li:has(i[class*="pin"]) i, .c27-footer-section .details-list li:has(svg[class*="location"]) svg, .c27-footer-section .details-list li:has(svg[class*="map"]) svg { display: none !important; /* Completely hides the icon for the address text */ } /* Format the address text to be bold and fluidly multi-line */ .listing-details-3 .details-list li:has(i[class*="location"]) span, .listing-details-3 .details-list li:has(i[class*="map"]) span, .listing-details-3 .details-list li:has(i[class*="marker"]) span, .listing-details-3 .details-list li:has(i[class*="pin"]) span, .listing-details-3 .details-list li:has(svg[class*="location"]) span, .listing-details-3 .details-list li:has(svg[class*="map"]) span { font-size: 12px !important; /* Makes the address font Small */ font-weight: 800 !important; /* Makes the address font BOLD */ display: block !important; /* Spans across full row width to allow wrapping */ width: 100% !important; white-space: normal !important; /* Forces standard text line wrapping drops */ word-break: break-word !important; /* Safely breaks long names or comma selections */ line-height: 1.4 !important; /* Balanced spacing for multi-line address fields */ } /* Ensure the avatar image/badge and author link share the same row spacing */ .event-host .avatar, .event-host img { margin: 0 10px 0 0 !important; width: 24px !important; height: 24px !important; flex-shrink: 0 !important; } .event-host a, .event-host span { text-align: left !important; font-size: 13px !important; color: #666666 !important; } /* Fix title alignment padding values */ .lf-item-container .lf-bottom { padding: 14px 16px 4px 16px !important; text-align: left !important; } .lf-item-container .lf-bottom h4 { text-align: left !important; } /* ========================================================================== COMPACT SINGLE-ROW SEARCH BAR WITH DYNAMIC SHADOW ========================================================================== */ /* 1. Tighten padding and shrink the total maximum layout width */ .mobile-explore-head-top, div.mobile-explore-head-top { background-color: #ffffff !important; border: 1px solid #e8f0eb !important; border-radius: 16px !important; padding: 12px 24px !important; /* Slimmer vertical padding makes the whole block feel smaller */ margin: 20px auto 25px auto !important; display: flex !important; flex-direction: row !important; /* Locks elements side-by-side horizontally */ align-items: center !important; justify-content: space-between !important; gap: 16px !important; width: 100% !important; /* 📐 CONTROLS SIZE: Limits how far the box stretches across desktop screens */ max-width: 780px !important; /* Premium high-depth highlight drop shadow */ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(17, 122, 58, 0.015) !important; } /* 2. Configure the text search input box wrapper */ .mobile-explore-head-top .explore-head-search { flex: 1 1 auto !important; /* Instructs search container to expand into empty layout space */ width: 100% !important; max-width: none !important; /* Strips out any hidden native theme width limits */ margin: 0 !important; display: block !important; position: relative !important; } /* Move magnifying glass icon rightward away from the left border edge curve */ .explore-head-search i.mi.search { left: 18px !important; font-size: 20px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; } /* Style search text bar input element with transparent gradient background */ .explore-head-search input[type="text"] { border: 1px solid #d1ded5 !important; border-radius: 30px !important; height: 44px !important; /* Shorter input box height profiles */ font-size: 14px !important; color: #222222 !important; width: 100% !important; box-shadow: none !important; transition: all 0.25s ease !important; padding: 10px 20px 10px 48px !important; /* Internal left indentation prevents icon overlaps */ /* 🌈 GRADIENT: Soft off-white green tint fading entirely into transparent on the right half */ background: linear-gradient(to right, #f5f8f5 0%, #f9fbf9 45%, rgba(255,255,255,0) 90%) !important; } .explore-head-search input[type="text"]:focus { border-color: #d1ded5 !important; /* Matches your resting gray-green border color */ outline: none !important; /* Disables default browser blue/black focus outline rings */ background: #ffffff !important; /* Retains a clean white background canvas while typing */ } /* 3. Clean up the side-by-side filter pill layout alignment */ .mobile-explore-head-top .explore-head-filters { display: inline-block !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; } .mobile-explore-head-top .explore-head-filters a, .mobile-explore-head-top .explore-head-filters .toggle-filters { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 1px solid #ccdcd2 !important; color: #444444 !important; border-radius: 30px !important; padding: 0 20px !important; font-size: 13px !important; font-weight: 600 !important; height: 44px !important; /* Matches search input height exactly for vertical alignment symmetry */ cursor: pointer !important; transition: all 0.2s ease !important; text-transform: none !important; white-space: nowrap !important; } /* Hover accent states */ .mobile-explore-head-top .explore-head-filters a:hover { border-color: #117a3a !important; color: #117a3a !important; background-color: #f4faf6 !important; } .mobile-explore-head-top .explore-head-filters i, .mobile-explore-head-top .explore-head-filters svg { color: #117a3a !important; margin-left: 6px !important; font-size: 12px !important; } /* Mobile Responsive Stacking optimization for smaller viewports */ @media (max-width: 520px) { .mobile-explore-head-top, div.mobile-explore-head-top { flex-direction: column !important; align-items: stretch !important; border-radius: 16px !important; } .mobile-explore-head-top .explore-head-filters a { width: 100% !important; } } /* Completely hide and disable the native header tabs bar container */ .explore-head, div.explore-head { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; } /* ========================================================================== MODERN CENTER MODAL POPUP FILTER OVERRIDES ========================================================================== */ @media only screen and (min-width: 768px) { /* 1. Re-position the main filter container panel into a centered floating card box */ #finderSearch.finder-search { position: fixed !important; top: 50% !important; left: 50% !important; /* Resting transition state (slightly lower down the screen and scaled smaller) */ transform: translate(-50%, -42%) scale(0.94) !important; width: 100% !important; max-width: 480px !important; /* Elegant modal width profile matching desktop bounds */ height: auto !important; max-height: 80vh !important; /* Keeps the box cleanly bounded inside the browser viewport */ border-radius: 16px !important; /* Soft premium corner rounding */ background-color: #ffffff !important; opacity: 0 !important; visibility: hidden !important; overflow-y: auto !important; /* Ensures nested fields scroll perfectly if they exceed height bounds */ /* Deep ambient drop shadow gives the modal distinct depth and visual elevation */ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18), 0 10px 20px rgba(0, 0, 0, 0.04) !important; /* Buttery smooth bouncy entrance transition logic */ transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s ease !important; } /* 2. Style the active open state triggered by clicking the filter toggle button */ .fc-type-2-open #finderSearch.finder-search { opacity: 1 !important; visibility: visible !important; /* Snaps smoothly into absolute screen center alignment coordinates */ transform: translate(-50%, -50%) scale(1) !important; left: 50% !important; } /* 3. Enrich the background shading layer with modern backdrop blur aesthetics */ .finder-overlay { backdrop-filter: blur(5px) !important; /* Softens the listing cards behind the popup */ background-color: rgba(15, 23, 42, 0.45) !important; /* Balanced deep slate transparency blend */ transition: opacity 0.3s ease !important; } /* Clean up internal scrollbar presentation layout parameters */ #finderSearch.finder-search::-webkit-scrollbar { width: 6px; } #finderSearch.finder-search::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; } }