/* ==========================================================================
ACCOMMODATION DETAIL PAGE — room-detail.css
Layout (flex, no tricks):
entry-content (display:flex; flex-direction:column)
├── div.vc_row [slider] order:0 full-width gallery
├── div.lux-room-columns order:1 two-column content strip
│ ├── div.lux-room-main flex:1 title · stats · amenities · price
│ └── aside.lux-room-booking flex:0 0 320px booking widget
└── div.vc_row [description] order:3 full-width property text
entry-header (original title/tagline) is hidden — title re-injected
inside lux-room-main via PHP at priority 6.
========================================================================== */
/* --------------------------------------------------------------------------
1. CONTAINER — strip every layer of horizontal padding / margin
-------------------------------------------------------------------------- */
/* .wrapper has padding:0 2.5em at ≥48em */
.single-mphb_room_type .wrapper.main-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100%;
margin-bottom: 0 !important; /* drop the parent's ≥48em bottom margin */
}
/* The grey band below the card is the footer's own top spacing:
.footer-navigation has margin-top 5.6em inside the grey footer bg.
Collapse it on this page so the card meets the footer cleanly. */
.single-mphb_room_type .site-footer .footer-navigation {
margin-top: 2em;
}
/* .hentry gets padding:0 8.8em at ≥62em from the full-width post rule */
.single-mphb_room_type .content-area.full-width .site-main > .hentry {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0;
padding-bottom: 0 !important; /* card runs flush into the footer */
margin-top: 0;
margin-bottom: 0;
}
/* The theme adds margin/padding + an anchor-icon ::after divider to
.entry-header on single pages. Hide the whole block — the title is
re-injected inside the content column. */
.single-mphb_room_type .entry-header {
display: none !important;
}
/* MotoPress adds border-top + 3.1em padding to every h2 inside
.entry-content. Override with the exact same selector so we win. */
.single .mphb_room_type .entry-content h2 {
border-top: none;
padding: 0;
margin: 0;
}
.single-mphb_room_type h2.mphb-details-title,
.single-mphb_room_type h2.mphb-reservation-form-title {
display: none !important;
}
/* --------------------------------------------------------------------------
2. ENTRY-CONTENT — flex column, controls the vertical stacking order
-------------------------------------------------------------------------- */
.single-mphb_room_type .entry-content {
display: flex;
flex-direction: column;
align-items: center; /* centre every child column horizontally */
}
/* Beige canvas — match the front page, override any white the parent paints */
.single-mphb_room_type .site,
.single-mphb_room_type .site-content,
.single-mphb_room_type .content-area,
.single-mphb_room_type .site-main,
.single-mphb_room_type .hentry {
background-color: var(--lux-paper) !important;
}
/* Central white card — wraps gallery + content + description, floats on the
beige canvas with a soft left/right shadow so it pops slightly. */
.single-mphb_room_type .entry-content {
max-width: 1040px;
margin: 0 auto; /* no bottom gap — card runs down to the footer */
background: var(--lux-card) !important;
border-radius: 0; /* sharp corners top & bottom */
overflow: hidden; /* clip the full-bleed gallery to the card edges */
/* shadow on the left/right edges only — negative spread keeps it from
bleeding past the sharp top & bottom edges */
box-shadow: -10px 0 24px -8px rgba(47, 46, 43, .10),
10px 0 24px -8px rgba(47, 46, 43, .10);
}
/* Slider row: order 0 (natural first child, no change needed) */
/* Two-column strip: move from 3rd position to 2nd, fill the card */
.single-mphb_room_type .lux-room-columns {
order: 1;
width: 100%;
}
/* Description row: push below the two-column strip, fill the card with
matching horizontal padding so the text aligns with the columns above */
.single-mphb_room_type .entry-content > div:nth-child(2) {
order: 3;
width: 100%;
padding: 0 2rem 2.5rem;
}
/* --------------------------------------------------------------------------
3. GALLERY ROW — SmartSlider, edge-to-edge, no thumbnail strip
-------------------------------------------------------------------------- */
/* Remove WPBakery column padding so the slider bleeds to the wrapper edge */
.single-mphb_room_type .entry-content > div:nth-child(1) .wpb_column,
.single-mphb_room_type .entry-content > div:nth-child(1) .vc_column_container,
.single-mphb_room_type .entry-content > div:nth-child(1) .vc_column-inner,
.single-mphb_room_type .entry-content > div:nth-child(1) .wpb_wrapper {
padding: 0 !important;
margin: 0 !important;
}
/* Gallery fills the full width of the card (full-bleed top). */
.single-mphb_room_type .entry-content > div:nth-child(1) {
margin-bottom: 2rem;
width: 100%;
}
/* Cap the gallery height so it never dominates the viewport.
SmartSlider scales its internal stage to fill its container, so
limiting the height here keeps the carousel a comfortable band. */
.single-mphb_room_type .entry-content > div:nth-child(1) .n2-section-smartslider,
.single-mphb_room_type .entry-content > div:nth-child(1) .n2-ss-slider {
max-height: 60vh !important;
}
/* Hide the thumbnail dot-strip — keep only the left/right arrows */
.single-mphb_room_type .n2-ss-slider-controls-below {
display: none !important;
}
/* Collapse the hidden row inside SmartSlider's internal grid */
.single-mphb_room_type .n2-ss-slider-wrapper-outside {
grid-template-rows: 1fr !important;
}
/* Navigation arrows: slightly larger, fade in/out */
.single-mphb_room_type .nextend-arrow {
opacity: 0.75;
transition: opacity 0.2s;
}
.single-mphb_room_type .nextend-arrow:hover,
.single-mphb_room_type .nextend-arrow:focus {
opacity: 1;
}
.single-mphb_room_type .nextend-arrow img {
width: 48px !important;
height: 48px !important;
}
/* --------------------------------------------------------------------------
4. TWO-COLUMN STRIP (lux-room-columns)
Left: title · tagline · stats · amenities · price
Right: booking widget
-------------------------------------------------------------------------- */
.lux-room-columns {
display: flex;
gap: 2.5rem;
align-items: flex-start;
padding: 1.5rem 2rem; /* inner breathing room, symmetrical */
}
.lux-room-main {
flex: 1 1 0;
min-width: 0;
}
.lux-room-booking {
flex: 0 0 300px;
width: 300px;
}
@media (max-width: 55em) {
.lux-room-columns {
flex-direction: column;
padding: 1.25rem 1rem;
}
.lux-room-booking {
flex: none;
width: 100%;
}
}
/* --------------------------------------------------------------------------
5. TITLE + TAGLINE (injected by PHP into lux-room-main)
-------------------------------------------------------------------------- */
.lux-room-header {
margin-bottom: 1.25rem;
}
/* Title styled to echo the front-page section headings (same teal, uppercase,
wide tracking, brass underline bar) — left-aligned and a touch smaller. */
.lux-room-title {
font-size: 1.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .18em;
line-height: 1.2;
color: var(--lux-primary);
margin: 0;
text-align: left;
}
.lux-room-title::after {
content: "";
display: block;
width: 56px;
height: 2px;
background: var(--lux-accent);
margin: .5em 0 .5em;
}
/* Remove the parent theme's margin under h1s on this page only
(parent style.css sets margin-bottom on these selectors). */
.single-mphb_room_type .entry-child-pages-list h1,
.single-mphb_room_type .textwidget h1,
.single-mphb_room_type .comment-content h1,
.single-mphb_room_type .archive-description h1,
.single-mphb_room_type .entry-content h1,
.single-mphb_room_type .entry-summary h1 {
margin-bottom: 0;
}
/* Summary line under the title: "6 guests · 3 bedrooms · 3 bathrooms" */
.lux-room-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: .9rem;
letter-spacing: .01em;
color: var(--lux-muted);
margin: 0 0 .5rem;
}
.lux-room-summary-sep {
color: var(--lux-line);
margin: 0 .55rem;
}
.lux-room-tagline {
font-size: .95rem;
font-style: italic;
font-weight: 400;
color: var(--lux-muted);
line-height: 1.6;
margin: 0;
}
/* --------------------------------------------------------------------------
6. AMENITIES (custom component — see lux_render_amenities)
The plugin's own attribute list is removed in PHP; we render our own
heading + tag list, so no overrides of plugin markup are needed here.
-------------------------------------------------------------------------- */
.lux-amenities {
margin: 1.5rem 0 0;
}
/* Heading styled as a subtitle, echoing the property title.
The parent's `.single .mphb_room_type .entry-content h2` rule (0,3,1) sets
a large bold size; !important on size/weight is the clean way to win here. */
.single-mphb_room_type .lux-amenities-title {
font-size: .82rem !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--lux-primary);
line-height: 1.3;
margin: 0 0 .5em;
}
.single-mphb_room_type .lux-amenities-title::after {
content: "";
display: block;
width: 44px;
height: 2px;
background: var(--lux-accent);
margin: .45em 0;
}
/* Tag list. */
.single-mphb_room_type .lux-amenities-list {
display: flex;
flex-wrap: wrap;
gap: .35rem .4rem;
list-style: none;
margin: 0;
padding: 0;
}
.single-mphb_room_type .lux-amenity {
background: var(--lux-paper);
border: 1px solid var(--lux-line);
border-radius: 3px;
padding: .18rem .5rem;
font-size: .72rem;
font-weight: 400;
color: var(--lux-ink);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
7. PRICE
-------------------------------------------------------------------------- */
.single-mphb_room_type .mphb-regular-price,
.single-mphb_room_type .mphb-price-for-dates {
margin: .5rem 0 0;
font-size: .85rem;
color: var(--lux-muted);
}
.single-mphb_room_type .mphb-regular-price strong { font-weight: 400; }
.single-mphb_room_type .mphb-regular-price .mphb-price,
.single-mphb_room_type .mphb-price-for-dates .mphb-price {
color: var(--lux-accent);
font-weight: 600;
font-size: .95rem;
}
/* --------------------------------------------------------------------------
8. BOOKING WIDGET
-------------------------------------------------------------------------- */
.lux-room-booking {
background: var(--lux-card);
border: 1px solid var(--lux-line);
border-radius: 5px;
padding: 1.25rem;
box-shadow: var(--lux-shadow-lg);
}
/* Price block pinned to the top of the booking widget.
.lux-booking-price--from → no dates chosen ("from" base price)
.lux-booking-price--dates → search dates chosen (total for those dates) */
.lux-room-booking .lux-booking-price {
margin: -.25rem 0 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--lux-line);
}
.lux-room-booking .lux-booking-price .mphb-regular-price,
.lux-room-booking .lux-booking-price .mphb-price-for-dates {
margin: 0;
font-size: .8rem;
color: var(--lux-muted);
}
/* Replace the plugin's generic "Prices start at:" label with a clearer,
state-specific one. */
.lux-room-booking .lux-booking-price .mphb-regular-price strong,
.lux-room-booking .lux-booking-price .mphb-price-for-dates strong { display: none; }
.lux-room-booking .lux-booking-price .mphb-regular-price::before,
.lux-room-booking .lux-booking-price .mphb-price-for-dates::before {
display: block;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--lux-muted);
margin-bottom: .15rem;
}
.lux-booking-price--from .mphb-regular-price::before { content: "From"; }
.lux-booking-price--dates .mphb-regular-price::before { content: "Your stay"; }
.lux-room-booking .lux-booking-price .mphb-price {
display: block;
color: var(--lux-accent);
font-weight: 600;
font-size: 1.5rem;
line-height: 1.1;
}
/* "per night" / "for N nights" qualifier sits under the figure. */
.lux-room-booking .lux-booking-price .mphb-price-period {
display: block;
margin-top: .15rem;
font-size: .78rem;
color: var(--lux-muted);
border-bottom: 0; /* plugin adds a dashed underline + help cursor */
cursor: default;
}
/* While the dated price is being fetched. */
.lux-room-booking .lux-booking-price--loading { opacity: .55; transition: opacity .15s; }
/* No availability for the chosen dates. */
.lux-room-booking .lux-booking-price .lux-price-unavailable {
display: block;
font-size: .85rem;
font-weight: 500;
color: var(--lux-ink);
}
.lux-room-booking .mphb-booking-form p { margin-bottom: .6rem; }
.lux-room-booking .mphb-booking-form label {
display: block;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--lux-muted);
margin-bottom: .2rem;
}
.lux-room-booking .mphb-booking-form label abbr { display: none; }
/* Plugin template hard-codes a
after the date label; suppress it */
.lux-room-booking .mphb-check-in-date-wrapper br,
.lux-room-booking .mphb-check-out-date-wrapper br { display: none; }
.lux-room-booking .mphb-booking-form input[type="text"] {
width: 100%;
padding: .5rem .75rem;
border: 1px solid var(--lux-line);
border-radius: 4px;
background: var(--lux-paper);
font-size: .9rem;
color: var(--lux-ink);
transition: border-color .2s;
}
.lux-room-booking .mphb-booking-form input[type="text"]:focus {
border-color: var(--lux-accent);
outline: none;
}
/* Adults/children hidden — collected on next step */
.lux-room-booking .mphb-adults-wrapper,
.lux-room-booking .mphb-capacity-wrapper,
.single-mphb_room_type .mphb-check-children-date-wrapper,
.single-mphb_room_type .mphb-required-fields-tip { display: none !important; }
/* Book button */
.lux-room-booking .mphb-reserve-btn-wrapper { margin-top: 1rem; clear: both; float: none; }
.lux-room-booking .mphb-reserve-btn {
width: 100%;
display: block;
background: var(--lux-accent);
color: #fff;
border: none;
border-radius: 4px;
padding: .7rem 1rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
height: auto;
}
.lux-room-booking .mphb-reserve-btn:hover { background: var(--lux-accent-deep); }
/* Disabled when the selected dates aren't bookable (set by JS). */
.lux-room-booking .mphb-reserve-btn:disabled,
.lux-room-booking .mphb-reserve-btn.mphb-button-disabled {
background: var(--lux-line);
color: var(--lux-muted);
cursor: not-allowed;
pointer-events: none;
}
.lux-room-booking .mphb-confirm-reservation {
width: 100%;
display: block;
background: var(--lux-accent);
color: #fff;
border: none;
border-radius: 4px;
padding: .7rem 1rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s;
}
.lux-room-booking .mphb-confirm-reservation:hover { background: var(--lux-accent-deep); }
/* " is available for selected dates." — replaced by the button state. */
.lux-room-booking .mphb-rooms-quantity-single { display: none !important; }
.lux-room-booking .mphb-rooms-quantity-multiple { font-size: .8rem; color: var(--lux-muted); }
.lux-room-booking .mphb-errors-wrapper { font-size: .8rem; margin-top: .5rem; color: #c0392b; }
/* --------------------------------------------------------------------------
9. DATEPICKER — green = available, red = booked/unavailable
-------------------------------------------------------------------------- */
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-available-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-available-date {
background-color: #c8f0c8 !important; color: #1a5c1a !important; text-decoration: none !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-booked-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-booked-date {
background-color: #f5c0c0 !important; color: #7a1a1a !important; text-decoration: none !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-not-available-date,
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-not-stay-in-date:not(.mphb-past-date),
.mphb-calendar.mphb-datepick .datepick-month td .mphb-not-available-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-not-stay-in-date:not(.mphb-past-date) {
background-color: #f5c0c0 !important; color: #7a1a1a !important; text-decoration: none !important;
}
.mphb-calendar.mphb-datepick .datepick-month td .mphb-booked-date.mphb-date-check-in {
background: linear-gradient(to bottom right, #c8f0c8 50%, #f5c0c0 50%) !important;
}
.mphb-calendar.mphb-datepick .datepick-month td .mphb-available-date.mphb-date-check-out {
background: linear-gradient(to bottom right, #f5c0c0 50%, #c8f0c8 50%) !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month td .mphb-past-date,
.mphb-calendar.mphb-datepick .datepick-month td .mphb-past-date {
background-color: #f5f5f5 !important; color: #bbb !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month td .datepick-selected,
.datepick-popup .mphb-datepick-popup .datepick-month td a.datepick-highlight {
background-color: var(--lux-accent) !important; color: #fff !important;
}
/* --------------------------------------------------------------------------
10. DESCRIPTION ROW (second vc_row, order:3, appears below the columns)
-------------------------------------------------------------------------- */
.single-mphb_room_type .entry-content > div:nth-child(2) {
padding: 0 2rem 1.5rem;
}
.single-mphb_room_type .entry-content .vc_row { margin-bottom: 0 !important; }
.single-mphb_room_type .entry-content .wpb_wrapper { padding-top: 0; }
.single-mphb_room_type .entry-content h3 {
font-size: .95rem;
font-weight: 600;
margin: 1rem 0 .3rem;
color: var(--lux-ink);
}
.single-mphb_room_type .entry-content p {
margin-bottom: .6rem;
font-size: .92rem;
line-height: 1.75;
}
/* --------------------------------------------------------------------------
11. MISC CLEANUP
-------------------------------------------------------------------------- */
.single-mphb_room_type .main-wrapper { padding-top: 0; }
.single-mphb_room_type article.mphb_room_type { margin-bottom: 1.5rem; }