/* Hide the duplicate "Check Availability" button across all device types */ .check_avalability { display: none !important; }#listing_description .panel-body { max-height: 100% !important; }#view_more_desc { display: none !important; }/* ================================ CALENDAR COLORS -- ACCESSIBILITY FIX Color is no longer the only signal: booked/reserved days now also get a diagonal stripe pattern AND an "x" mark, so red-green color blind visitors (~1 in 12 men) can still tell dates apart without relying on the green/pink distinction alone. ================================ */ .all-front-calendars td { border: 1px solid #b5c9c7 !important; box-sizing: border-box !important; font-weight: 700 !important; position: relative !important; }.all-front-calendars .has_future, .all-front-calendars .has_past { background-color: #d1f3ea; font-weight: 700 !important; }.all-front-calendars .end_reservation { background: linear-gradient(135deg, #fff5f5 0%, #fff5f5 49%, #d1f3ea 50%, #d1f3ea 100%); color: #1f5a63 !important; /* darkened slightly from #2b7d88 for stronger contrast on the mint half */ font-weight: 700 !important; }.all-front-calendars .calendar-reserved.start_reservation { background: linear-gradient(135deg, #d1f3ea 0%, #d1f3ea 50%, #fff5f5 51%, #fff5f5 100%); color: #1f5a63 !important; font-weight: 700 !important; }/* Non-color signal: booked/reserved cells get a repeating diagonal stripe texture layered on top of their existing background, plus a small "x" mark in the corner. Available (.has_future/.has_past) cells stay plain, so the pattern itself becomes the "this is blocked" cue, not just color. */ .all-front-calendars .end_reservation, .all-front-calendars .calendar-reserved.start_reservation { background-image: repeating-linear-gradient( 45deg, rgba(31, 90, 99, 0.08), rgba(31, 90, 99, 0.08) 4px, transparent 4px, transparent 8px ); }.all-front-calendars .end_reservation::after, .all-front-calendars .calendar-reserved.start_reservation::after { content: "✕"; position: absolute; top: 2px; right: 4px; font-size: 10px; line-height: 1; color: #1f5a63; font-weight: 700; }/* ================================ BOOKING FORM POP EFFECT (No layout changes, only visual polish) ================================ */#booking_form_request, .booking_form_request, #booking_form_mobile { background: #ffffff !important; border-radius: 18px !important; padding: 24px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 3px 12px rgba(0, 0, 0, 0.07) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; transition: all 0.25s ease; position: relative; }#booking_form_request:hover, .booking_form_request:hover, #booking_form_mobile:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14), 0 5px 16px rgba(0, 0, 0, 0.10) !important; }.booking_form_request input, .booking_form_request select, #booking_form_request input, #booking_form_request select { height: 50px !important; border-radius: 12px !important; border: 1px solid #ccd7db !important; background: #fdfefe !important; transition: 0.25s ease; }.booking_form_request input:focus, .booking_form_request select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(43, 125, 136, 0.25) !important; }.booking_form_request .calendar_icon, #booking_form_request .calendar_icon { margin-right: 10px !important; }#submit_booking_front, #submit_booking_front_instant, #submit_booking_front_link { border-radius: 14px !important; box-shadow: 0 6px 20px rgba(43, 125, 136, 0.35) !important; transition: all 0.25s ease; }#submit_booking_front:hover, #submit_booking_front_instant:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34, 94, 102, 0.45) !important; }/********************************************** AIRBNB-STYLE 3D HOVER EFFECT FOR LISTING CARDS ***********************************************/.property_listing, .property_unit_v1, .property_unit_v2, .property_unit_v3, .property_unit_v4 { transition: all 0.35s cubic-bezier(.18, .89, .32, 1.28) !important; transform: translateY(0) scale(1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important; }.property_listing:hover, .property_unit_v1:hover, .property_unit_v2:hover, .property_unit_v3:hover, .property_unit_v4:hover { transform: translateY(-10px) scale(1.03) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12) !important; background: #ffffff !important; z-index: 12 !important; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.12) !important; }.listing-unit-img-wrapper img { transition: transform 0.5s ease !important; }.property_listing:hover .listing-unit-img-wrapper img, .property_unit_v4:hover .listing-unit-img-wrapper img { transform: scale(1.06) !important; }/* WP Rentals -- Price Pin Style (Global) */ .wpestate_marker { background-color: #1abc9c !important; color: #0f2a2f !important; font-weight: 700 !important; border: 1px solid #0f2a2f !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 14px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important; }.wpestate_marker:hover { background-color: #16a085 !important; cursor: pointer; }/* MOBILE hint banner */ @media (max-width: 767px) { .booking-calendar-wrapper::before { content: " Click the 'Make a Reservation' button to book"; display: block; background: #f3f9fa; color: #245c63; font-size: 13px; font-weight: 600; padding: 8px 12px; margin: 0 auto 8px auto; text-align: center; border-left: 4px solid #2b7a78; max-width: 90%; } }/* TABLET + DESKTOP hint banner */ @media (min-width: 768px) { .booking-calendar-wrapper::before { content: " To book, fill out the booking details "; display: block; background: #f3f9fa; color: #245c63; font-size: 14px; font-weight: 700; padding: 10px 14px; margin: 0 60px 10px auto; text-align: center; border-left: 4px solid #2b7a78; max-width: 60%; } }/* ================================ TAB BUTTONS (previously two duplicate/conflicting blocks -- merged here) ================================ */ .e-n-tab-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 20px; margin-bottom: 12px; background: #ffffff; border-radius: 14px; border: 1px solid #e5e5e5; font-size: 18px; font-weight: 600; color: #222; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }.e-n-tab-title::after { content: "›"; font-size: 22px; opacity: 0.6; transition: transform 0.2s ease, opacity 0.2s ease; }.e-n-tab-title:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); }.e-n-tab-title:active { transform: scale(0.97); background-color: #f5f7f9; }.e-n-tab-title[aria-selected="true"] { background: #1f8a70; color: #ffffff; border-color: #1f8a70; box-shadow: 0 8px 18px rgba(31, 138, 112, 0.35); }.e-n-tab-title[aria-selected="true"]::after { content: "▼"; color: #ffffff; opacity: 1; transform: rotate(0deg); }/* Nudge animation -- now respects reduced-motion preference */ @media (prefers-reduced-motion: no-preference) { @keyframes nudge { 0% { transform: translateX(0); } 50% { transform: translateX(6px); } 100% { transform: translateX(0); } }.e-n-tab-title:not([aria-selected="true"])::after { animation: nudge 1.8s ease-in-out infinite; } }/* ====================================== BOOKING FORM TRUST BLOCK (TOP ONLY) ====================================== */ #booking_form_request::before, .booking_form_request::before, #booking_form_mobile::before { content: " 🔒 Secure Booking Form | Save More Booking Direct | Fast response (8 AM - 7 PM local). Choose an option below to start customizing your stay!"; white-space: pre-line; display: block; background: #f3f9fa; color: #245c63; font-size: 13px; font-weight: 600; padding: 12px 16px; margin-bottom: 20px; border-left: 4px solid #2b7a78; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); line-height: 1.6; }@media (max-width: 767px) { #booking_form_request::before, .booking_form_request::before, #booking_form_mobile::before { font-size: 12px; padding: 10px 14px; } }/* Long term pages only, Casa Amalia Listing. Hide original per-night text */ .postid-55733 .pernight_label { display: none; }.postid-55733 .listing_main_image_price::after { content: " per month"; }#mobile_booking_triger { background: linear-gradient(135deg, #1c7c8a, #14545f) !important; box-shadow: 0 4px 15px rgba(28, 124, 138, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; }/* Pulse animation -- now respects reduced-motion preference */ @media (prefers-reduced-motion: no-preference) { @keyframes pulse-subtle { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }#mobile_booking_triger { animation: pulse-subtle 3s infinite ease-in-out; } }/* Hide Availability tab only on listing ID Casa Amalia 55733 */ .postid-55733 #listing_calendar, .postid-55733 #listing_calendar + .panel-body, .postid-55733 #listing_calendar + div { display: none !important; }/* ================================ INTERACTIVE DATE-RANGE PICKER (daterangepicker.js + WPRental classes) SIMPLIFIED PALETTE -- matches the pattern Airbnb/Booking.com actually use: available = plain/calm (the expected default, doesn't need to shout), unavailable = one muted gray family regardless of the specific reason (booked vs. minimum-stay just get a small text label to differentiate, not a competing full color), and the ONE place bold color is spent is the user's actual selected range -- since that's the one thing worth drawing the eye to. Past dates get their own distinct, separate gray so they're never confused with "booked." ================================ *//* Available: calm, barely-there tint -- doesn't compete for attention */ .daterangepicker td.freetobook:not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range) { background-color: #f7fdfb !important; background-image: none !important; color: #2a2a2a !important; text-decoration: none !important; }/* Unavailable (booked by someone else): one muted gray family, still gets the stripe + "x" pattern so it's never color-only */ .daterangepicker td.calendar-reserved:not(.freetobook):not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range) { background-color: #eeebea !important; background-image: repeating-linear-gradient( 45deg, rgba(90, 60, 60, 0.10), rgba(90, 60, 60, 0.10) 4px, transparent 4px, transparent 8px ) !important; color: #7a6f6f !important; text-decoration: line-through !important; position: relative; }.daterangepicker td.calendar-reserved:not(.freetobook):not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range)::after { content: "✕"; position: absolute; top: 1px; right: 3px; font-size: 9px; color: #7a6f6f; font-weight: 700; }/* Checkout-day turnover: still bookable as a new check-in the same day */ .daterangepicker td.end_reservation.freetobook:not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range), .daterangepicker td.start_reservation.freetobook:not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range) { background: linear-gradient(135deg, #eeebea 0%, #eeebea 49%, #f7fdfb 50%, #f7fdfb 100%) !important; color: #2a2a2a !important; }/* Unavailable (doesn't meet minimum stay): SAME muted gray family as "booked" -- the only difference is a bold "min" label, not a separate color. This is the deliberate simplification from the earlier 3-color version: both states mean "you can't pick this right now" to a guest, and a label communicates the specific reason without adding sensory load. */ .daterangepicker td.wpestate_min_days_required:not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range) { background-color: #eeebea !important; background-image: none !important; color: #6b6b6b !important; text-decoration: none !important; position: relative; }.daterangepicker td.wpestate_min_days_required:not(.wa-past-date):not(.active):not(.in-range):not(.wa-force-in-range)::after { content: "min"; position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: 0.5px; color: #6b6b6b; }/* Past dates: their own clearly separate, calm gray -- never confusable with "booked," since this JS-applied class always wins regardless of what other classes the cell also carries */ .daterangepicker td.wa-past-date { background-color: #f2f2f2 !important; background-image: none !important; color: #b5b5b5 !important; text-decoration: line-through !important; }.daterangepicker td.wa-past-date::after { content: none !important; }/* The one bold color in the whole calendar: the visitor's actual selected check-in/check-out and everything in between. This is deliberately the loudest state, since it's the only thing that needs to grab the eye. */ .daterangepicker td.active, .daterangepicker td.in-range { background-color: #1c7c8a !important; background-image: none !important; color: #ffffff !important; text-decoration: none !important; }.daterangepicker td.active::after, .daterangepicker td.in-range::after { content: none !important; }/* Same teal treatment, applied via JS to any cell (including overflow "echo" cells in the adjacent month's grid) whose date falls within the selected range -- so both grids always agree on what's selected. */ .daterangepicker td.wa-force-in-range { background-color: #1c7c8a !important; background-image: none !important; color: #ffffff !important; text-decoration: none !important; }.daterangepicker td.wa-force-in-range::after { content: none !important; }

Reset Password

Loading Maps
Select Guest
Adults
Ages 13 or above
0
Children
Ages 2 to 12
0
Infants
Under 2 years
0
Close
Search Options
17 Results found!

Listings in "Shared Pool"