/* Theme Name: Safar Child Theme URI: https://safardemo.devsvibe.co/ Author: DevsVibe Author URI: https://themeforest.net/user/devsvibe/portfolio Description: Safar Child Theme For For Hotel & Resort Booking Purpose. Version: 1.0.0 Template: safar License: GNU General Public License v2 or later License URI: LICENSE Text Domain: safar-child Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready * If you are not familiar with Child Themes, you can read about it here: * http://codex.wordpress.org/Child_Themes */ /* ------------------------------------------------------------------ * Hide room "starting price" everywhere on the front-end. * Language-independent (targets CSS classes, not translated strings), * so it covers every Polylang/TranslatePress locale at once. * * Scope: room listings (shortcodes, widgets, archives) and the single * room-type page. Intentionally NOT hidden: booking summary at * checkout (.mphb-price-breakdown / .mphb-table-price-column), * My Account booking history (.booking-price), and emails — so the * reservation flow and totals shown to the guest remain intact. * ------------------------------------------------------------------ */ /* MotoPress native price wrappers (single room, loop, widget) */ .mphb-regular-price, .mphb-widget-room-type-price, .mphb_room_type .mphb-regular-price, .mphb_sc_rooms-room .mphb-regular-price, .mphb_sc_search-results-room .mphb-regular-price { display: none !important; } /* Safar theme price wrappers (rooms/style/room-*.php variants) */ .safar-mphb-price-style, .safar-accommodation__price, .safar-accommodation__price-2, .safar-accommodation__price-round, .safar-accommodation-10__price, .safar-accommodation-14__price, .safar-accommodation-14__price-info, .safar-accommodation-15__price, .safar-accommodation__badge-position, .safar-destination-6__price-place, .safar-destination-13__price-left, .safar-hero-7__accommodation-price, .safar-room__item .price-tag, .safar-room__item .price-title { display: none !important; } /* Single room page: hide every "Prix À Partir De" / starting-price box. * * Three different renderers can emit a price block on a room page: * 1. Safar's sidebar widget → .safar-mphb-single-sidebar-price * 2. Safar Core Elementor widget → .safar-mphb-price-widget / * .elementor-widget-safar-mphb-room-price * 3. MPHB's native template →

* * We force-hide all three. Selectors lead with `body` to push specificity * past anything in the parent theme / Elementor / plugin stylesheets. * * Safe because the actual "Réservation" / "Réserver" CTA widget below * uses a different class (.safar-mphb-single-reservation-form) and is * untouched. Booking flow / account / emails use entirely different * markup paths. */ body .safar-mphb-price-widget, body .elementor-widget-safar-mphb-room-price, body .safar-mphb-single-sidebar-widget.safar-mphb-single-sidebar-price, body .safar-mphb-single-sidebar-price, body.single-mphb_room_type .mphb-regular-price { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ------------------------------------------------------------------ * Catch-all: hide any price-classed descendant inside an MPHB room-type * post wrapper. MPHB tags every room-type loop item with .mphb_room_type * (via post_class). The booking flow does NOT use this wrapper — it uses * .mphb-checkout-wrapper / .mphb-price-breakdown / .booking-price / * .mphb-booking-details — so totals shown to the guest are preserved. * * Covers any custom markup we don't yet have a specific rule for, in * any language (class names are not translated). * ------------------------------------------------------------------ */ .mphb_room_type [class*="price" i], .mphb_room_type [class*="Price" i], .mphb_sc_rooms-room [class*="price" i], .mphb_sc_search-results-room [class*="price" i], .safar-room__item [class*="price" i], .safar-rooms-wrapper [class*="price" i], .safar-room-widget-result-wrap [class*="price" i], .lbr-rm-card__price { display: none !important; } /* Generic single-room sidebar "Prix À Partir De" / "Price Start From" * pill rendered by some Elementor templates that don't use the price * widget class — match any element whose attribute contains "price". */ .elementor-widget-container > .safar-mphb-price-widget, .elementor-widget-container [class*="mphb-price"], .elementor-widget-container [class*="room-type-price"] { display: none !important; } /* ------------------------------------------------------------------ * Search-results page (/search-results/, step 1 of booking flow): * hide every price on this page only. * * Two distinct UIs render prices here: * 1. The "Recommandé pour N adulte(s)" summary card at the top * (rendered by MPHB's search-results shortcode, file * includes/shortcodes/search-results-shortcode.php). Classes: * .mphb-recommedation-item-subtotal (note MPHB's typo, kept * verbatim so the selector matches), .mphb-recommendation-total, * .mphb-recommendation-total-title, .mphb-recommendation-total-value. * 2. The room cards below with the round "À partir de €N" badge * (Safar accommodation template). The post wrapper carries both * `mphb_room_type` (post-type slug) and `mphb-room-type` (explicit * class added by the template). Earlier price rules only targeted * the underscore variant — adding the hyphen variant catches the * badge on this page. * * Booking flow downstream (step 2 "Booking Details" / step 3 * "Confirmed") is untouched — those use .mphb-price-breakdown / * .mphb-table-price-column / .booking-price which we explicitly leave * alone so the guest still sees what they're being charged. * ------------------------------------------------------------------ */ /* 1. Recommendation summary card (top of search-results page) */ .mphb-recommedation-item-subtotal, .mphb-recommendation-total, .mphb-recommendation-total-title, .mphb-recommendation-total-value, .mphb-recommendation-details-list .mphb-recommedation-item-subtotal { display: none !important; } /* Clean up the row after removing the subtotal: the count "1 ×" used * to sit right after the price; without the price it can look orphaned. * Add a small left margin to the count so the line reads naturally. */ .mphb-recommendation-item .mphb-recommendation-item-count { margin-left: 0; } /* 2. Room cards on search-results: hide badge / any price descendant. * Match both wrapper-class variants (with hyphen AND underscore). * `.safar-mphb-result-price` is the round "From €N" badge added by * Safar's custom search-result template (see * safar/inc/vendors/mphb/search-result-extend.php line 77). It is * rendered directly in PHP — not via the price hooks we detach in * functions.php — so the only way to suppress it is by class. */ .safar-mphb-result-price, .safar-mphb-search-result-item-wrapper .safar-mphb-result-price, .safar-mphb-result-thumb .safar-mphb-result-price, .mphb-room-type [class*="price" i], .mphb-room-type [class*="Price" i], .mphb-room-type .safar-accommodation__badge-position, .mphb-room-type .safar-accommodation__price, .mphb-room-type .safar-accommodation__price-2, .mphb-room-type .safar-accommodation__price-round, .mphb-room-type .safar-accommodation-10__price, .mphb-room-type .safar-accommodation-14__price, .mphb-room-type .safar-accommodation-14__price-info, .mphb-room-type .safar-accommodation-15__price, .mphb-room-type .mphb-regular-price, .mphb-room-type .mphb-price { display: none !important; } /* ------------------------------------------------------------------ * UX polish on the search-results page after removing prices. * Goal: page should feel intentional, not like content was deleted. * ------------------------------------------------------------------ */ /* Center the recommendation card content vertically now that the price * column is gone, and give the list items a touch more breathing room */ .mphb-recommendation-details-list { list-style: none; padding-left: 0; margin: 0 0 1.25rem 0; } .mphb-recommendation-details-list > li { padding: 0.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .mphb-recommendation-details-list > li:last-child { border-bottom: none; } .mphb-recommendation-item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .mphb-recommendation-item-link { font-weight: 600; text-decoration: none; } /* The form submit "Réserver" CTA at the bottom of the summary becomes * the single clear action once the total is hidden — emphasise it */ #mphb-recommendation [type="submit"], .mphb-recommendation [type="submit"] { margin-top: 0.5rem; } /* On Safar accommodation cards, the price area often leaves an empty * box once `display:none`d. Collapse any now-empty siblings around it. */ .mphb-room-type .safar-accommodation__content, .mphb-room-type .safar-accommodation__info, .mphb-room-type .safar-accommodation__bottom { gap: 0.75rem; } /* ------------------------------------------------------------------ * Header responsiveness on small laptop screens (e.g. ThinkPad E14 * Gen 2 — 14" 1366x768 / 1920x1080 @ 125% scaling effective ~1536px). * * Problem: at intermediate widths the circular "Réserver" CTA on the * far right of the Elementor-built header gets pushed beyond the * viewport / clipped by the rounded header container, while the rest * of the nav still has comfortable spacing. * * Fix: between 1024px and 1600px, force the top-level header flex row * to nowrap, shrink horizontal padding, tighten the gap between menu * items, and protect the CTA from flex-shrink so it always stays on * the same line as the menu. * * Mobile (<1024px) is left alone — the burger menu kicks in there * and is handled by the parent theme. * ------------------------------------------------------------------ */ @media (min-width: 1024px) and (max-width: 1920px) { /* Top-level header section/container: never wrap, never overflow */ .elementor-location-header > .elementor-section, .elementor-location-header .elementor-top-section, .elementor-location-header .elementor-container, .elementor-location-header [data-element_type="container"] { flex-wrap: nowrap !important; overflow: visible !important; } /* Tighten outer header padding so the row has more room */ .elementor-location-header .elementor-container { padding-left: 16px !important; padding-right: 16px !important; } /* Nav menu: smaller font + tighter gap between items so the menu * occupies less width and frees space for the CTA */ .elementor-location-header .elementor-nav-menu > li > a, .elementor-location-header .safar-nav-menu > li > a, .elementor-location-header nav ul.menu > li > a { font-size: 15px !important; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; } .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu { gap: 4px !important; } /* Language switcher (Polylang/TranslatePress flag dropdown): keep * compact so it doesn't eat the CTA's space */ .elementor-location-header .trp-language-switcher, .elementor-location-header .pll-parent-menu-item > a, .elementor-location-header [class*="language-switcher"] { font-size: 14px !important; white-space: nowrap; } /* The circular "Réserver" CTA on the far right — protect it from * shrinking and from being pushed out of the rounded container */ .elementor-location-header .elementor-widget-button:last-child, .elementor-location-header .elementor-button-wrapper, .elementor-location-header a.elementor-button, .elementor-location-header [data-element_type="container"] > .elementor-widget-button { flex: 0 0 auto !important; flex-shrink: 0 !important; } } /* Extra-tight pass for ~1536px effective viewport — ThinkPad E14 Gen 2 * and similar 14" laptops running 1920×1080 @ 125% Windows scaling. * Also covers 1440px panels. Below this band the previous rule already * applies; above it (≥1600px) there is enough room natively. */ @media (min-width: 1367px) and (max-width: 1600px) { .elementor-location-header .elementor-nav-menu > li > a, .elementor-location-header .safar-nav-menu > li > a, .elementor-location-header nav ul.menu > li > a { font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important; } .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu { gap: 2px !important; } } /* Extra-tight pass for 1280px-class panels (1366×768 native, or * 1920×1080 @ 150% scaling which renders as ~1280 effective). */ @media (min-width: 1024px) and (max-width: 1366px) { .elementor-location-header .elementor-nav-menu > li > a, .elementor-location-header .safar-nav-menu > li > a, .elementor-location-header nav ul.menu > li > a { font-size: 13px !important; padding-left: 6px !important; padding-right: 6px !important; } .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu { gap: 0 !important; } } /* ------------------------------------------------------------------ * Viewport-edge clipping fix for the circular "Réserver" CTA. * * The header is a rounded white pill whose right end carries a round * dark CTA that intentionally overhangs the pill's curve. At desktop * widths the pill spans the full viewport, so the overhanging half of * the CTA falls outside the window and gets clipped by the right edge * of the browser (not by any CSS overflow rule). * * Fix: reserve right-side padding on the outermost header section so * the pill stops short of the viewport edge, leaving room for the * button to overhang inside the visible area. Also clamp horizontal * overflow on as a safety net so any residual overhang cannot * create a horizontal scrollbar. * * Scoped to desktop (≥1024px); mobile is untouched. * ------------------------------------------------------------------ */ @media (min-width: 1024px) { html, body { overflow-x: clip; } .elementor-location-header > section, .elementor-location-header > .elementor-section, .elementor-location-header > .e-con, .elementor-location-header > [data-element_type="container"] { padding-right: 48px !important; } } /* On the very tightest desktop band the reserved gutter can steal from * the menu — reduce it slightly there. */ @media (min-width: 1024px) and (max-width: 1366px) { .elementor-location-header > section, .elementor-location-header > .elementor-section, .elementor-location-header > .e-con, .elementor-location-header > [data-element_type="container"] { padding-right: 32px !important; } } /* ------------------------------------------------------------------ * Defensive overflow + clipping fix. * * The Safar header is rendered by Elementor with a rounded white pill * container; the circular "Réserver" CTA sits at its right edge and * is meant to overhang the rounded corner. Some Elementor wrappers * (.elementor-section, .e-con-inner, .elementor-widget-wrap) carry * `overflow:hidden` from theme defaults or border-radius settings, * which clips the CTA off-screen at intermediate widths. * * Force overflow visible on every plausible header wrapper, and lock * the CTA against the right edge so it cannot be pushed out. * Applies at all desktop widths (≥1024px) — mobile burger menu has * its own layout and is untouched. * ------------------------------------------------------------------ */ @media (min-width: 1024px) { .elementor-location-header, .elementor-location-header .elementor-section, .elementor-location-header .elementor-top-section, .elementor-location-header .elementor-container, .elementor-location-header .elementor-row, .elementor-location-header .elementor-column, .elementor-location-header .elementor-column-wrap, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header [data-element_type="container"], .elementor-location-header [data-element_type="column"] { overflow: visible !important; } /* Keep the whole header row on a single line at desktop widths */ .elementor-location-header .elementor-container, .elementor-location-header .e-con-inner, .elementor-location-header [data-element_type="container"] { flex-wrap: nowrap !important; } /* The circular CTA button: never shrink, stay aligned to the row, * and ensure its own widget wrapper doesn't clip it either */ .elementor-location-header .elementor-widget-button, .elementor-location-header .elementor-widget-button .elementor-widget-container, .elementor-location-header .elementor-widget-button .elementor-button-wrapper { flex: 0 0 auto !important; flex-shrink: 0 !important; overflow: visible !important; } }