/* ============================================================ The Majlis — booking engine skin Re-styles the ReservePort to match the site. Presentation only — never changes the widget's behaviour. ReservePort renders everything inside a wrapper id="booking-widget". SCOPE NOTE: this deliberately stays to a SAFE baseline — page frame, typography, buttons, and the search card (the parts that render reliably). The room-results & checkout screens are left largely to ReservePort's own layout and should be polished against the LIVE domain, where the widget lays out correctly. ============================================================ */ :root{ --bk-gold:#C9BAA9; --bk-gold-deep:#A8927B; --bk-ink:#34322D; --bk-paper:#FCFAF5; --bk-line:#E7E1D6; --bk-muted:#8A8479; } /* ---------- page framing (our HTML, fully controlled) ---------- */ .book-section{ padding-top:clamp(2.5rem,5vw,4rem); } .book-shell{ position:relative; min-height:300px; } .book-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:5rem 1rem; color:var(--bk-muted); font-family:"Raleway",sans-serif; letter-spacing:.04em; } .book-loading.is-done{ display:none; } .book-spinner{ width:38px; height:38px; border-radius:50%; border:2px solid var(--bk-line); border-top-color:var(--bk-gold-deep); animation:bk-spin .9s linear infinite; } @keyframes bk-spin{ to{ transform:rotate(360deg); } } .book-assist{ text-align:center; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--bk-line); font-family:"Raleway",sans-serif; color:var(--bk-muted); font-size:.95rem; } .book-assist-contact{ margin-top:.4rem; } .book-assist-contact a{ color:var(--bk-gold-deep); font-weight:600; } .book-assist-contact a:hover{ color:var(--bk-ink); } .book-assist-contact span{ margin:0 .6rem; opacity:.5; } /* ---------- typography inside the widget ---------- */ #booking-widget p, #booking-widget span, #booking-widget label, #booking-widget .content-body, #booking-widget .vue-content-body, #booking-widget .vue-date-box label, #booking-widget input, #booking-widget select{ font-family:"Inter","Raleway",sans-serif !important; color:var(--bk-ink); } #booking-widget h1.room-title, #booking-widget h2, #booking-widget h3, #booking-widget .reserveport-form-wrap h3, #booking-widget .vue-side_top_card h3, .modal-title, #modalbookingForm .modal-title{ font-family:"Marcellus",serif !important; font-weight:500 !important; color:var(--bk-ink) !important; } #booking-widget a{ color:var(--bk-gold-deep); } #booking-widget a:hover, #booking-widget .show-cp:hover, #booking-widget .vue-show-details:hover, #booking-widget .vue-show-tc:hover, #vue-havepromo.vue-horizontal, #booking-widget h1.room-title:hover{ color:var(--bk-gold-deep); } /* ---------- primary actions: solid gold ---------- */ #booking-widget .btn-orange-solid, #booking-widget .btn-solid, #booking-widget .sub-total .btn.btn-solid, #booking-widget .vue-btn-proceed, #booking-widget #summery-submit.btn-proceed, button#submitFormBtn, .mx-calendar-content .cell.active{ background:var(--bk-gold-deep) !important; border:1.5px solid var(--bk-gold-deep) !important; color:#fff !important; border-radius:2px !important; letter-spacing:.1em; text-transform:uppercase; font-weight:600; font-family:"Raleway",sans-serif !important; transition:background .3s ease, border-color .3s ease, color .3s ease; } #booking-widget .btn-orange-solid:hover, #booking-widget .btn-solid:hover, #booking-widget .sub-total .btn.btn-solid:hover, #booking-widget .vue-btn-proceed:hover, #booking-widget #summery-submit.btn-proceed:hover, button#submitFormBtn:hover{ background:var(--bk-ink) !important; border-color:var(--bk-ink) !important; color:#fff !important; } /* secondary actions: quiet outline */ #booking-widget button.btn.btn-sm, #booking-widget #vue-btn-managebooking, #booking-widget .btn.w-100, #vue-toggle_residency .vue-btn{ background:transparent !important; border:1.5px solid var(--bk-line) !important; color:var(--bk-ink) !important; border-radius:2px !important; text-transform:uppercase; letter-spacing:.08em; font-weight:600; } #vue-toggle_residency .vue-btn.active, #vue-toggle_residency .vue-btn.active:hover{ background:var(--bk-gold) !important; border-color:var(--bk-gold) !important; color:#fff !important; } /* occupancy +/- steppers — narrow */ #booking-widget .vue-btnb, #booking-widget .vue-btnbb{ width:30px !important; min-width:0 !important; padding:0 !important; border:1.5px solid var(--bk-line) !important; background:#fff !important; color:var(--bk-ink) !important; border-radius:4px !important; transition:border-color .25s ease, color .25s ease; } #booking-widget .vue-btnb:hover, #booking-widget .vue-btnbb:hover{ border-color:var(--bk-gold-deep) !important; color:var(--bk-gold-deep) !important; } /* ---------- search form → clean, compact card ---------- */ #booking-widget .reserveport-form-wrap{ background:#fff; border:1px solid var(--bk-line); border-radius:8px; box-shadow:0 18px 44px -28px rgba(40,36,30,.35); padding:clamp(1rem,2vw,1.5rem); } /* the search "Check Availability" button — light ghost outline, like the live bar */ #booking-widget .reserveport-form-wrap .btn-orange-solid{ background:transparent !important; color:var(--bk-gold-deep) !important; border:1.5px solid var(--bk-gold) !important; font-weight:600; } /* drop the button down so it lines up with the date/occupancy boxes (they sit below labels) */ #booking-widget .reserveport-form-wrap [class*="col-"]:has(> .btn-orange-solid){ display:flex; flex-direction:column; justify-content:flex-end; } #booking-widget .reserveport-form-wrap .btn-orange-solid{ margin-bottom:16px; } #booking-widget .reserveport-form-wrap .btn-orange-solid:hover{ background:var(--bk-gold) !important; color:#fff !important; border-color:var(--bk-gold) !important; } /* keep the date/occupancy fields airy and light */ #booking-widget .reserveport-form-wrap .form-control, #booking-widget .reserveport-form-wrap .sd{ padding:.6rem .8rem !important; height:auto !important; color:var(--bk-ink); } /* the row wrapping the fields has no box of its own (live bar has none) */ #booking-widget .vue-date-box, #booking-widget .vue-date-box[data-v-07c68727]{ box-shadow:none !important; border:none !important; border-radius:0 !important; } /* occupancy field → a proper bordered box matching the date fields */ #booking-widget .reserveport-form-wrap .vue-small_large_select{ min-height:53px !important; display:flex !important; align-items:center; border:1px solid #dedede !important; border-radius:1px; padding:.6rem .8rem !important; } /* the occupancy summary fills the box so its chevron sits at the right edge */ #booking-widget .reserveport-form-wrap #occupancy-control{ display:flex !important; justify-content:space-between; align-items:center; width:100%; } /* heading + labels — clean & minimal, matching the live bar */ #booking-widget .reserveport-form-wrap h3{ margin-bottom:1.4rem; color:var(--bk-gold) !important; font-size:1.9rem; } #booking-widget .guest-link{ text-transform:none !important; font-size:1rem !important; font-weight:700 !important; letter-spacing:0 !important; color:var(--bk-ink) !important; margin-bottom:.45rem; display:inline-block; } /* ---------- occupancy dropdown panel (native Bootstrap dropdown, refined) ---------- */ #booking-widget .dropdown-menu{ border:1px solid var(--bk-line); border-radius:10px; padding:1rem 1.25rem; min-width:400px; width:max-content; max-width:min(92vw,660px); box-shadow:0 24px 56px -22px rgba(40,36,30,.42); } /* each guest-type row: label left (grows), steppers hugged right, vertically centred */ #booking-widget .vue-mobile .row{ display:flex; flex-wrap:nowrap; align-items:center; margin:0 0 .55rem; } #booking-widget .vue-mobile .clearfix{ display:none; } #booking-widget .vue-mobile .row > [class*="col-"]:first-child{ flex:1 1 auto; width:auto; max-width:none; padding:0; } #booking-widget .vue-mobile .row > [class*="col-"]:last-child{ flex:0 0 auto; width:auto; max-width:none; padding:0; } #booking-widget .vue-mobile label{ margin:0; font-weight:600; font-size:.82rem; letter-spacing:.04em; white-space:nowrap; } #booking-widget .vue-mobile .vue-ageDiv{ margin-left:.3em; font-weight:400; color:var(--bk-muted); white-space:nowrap; } /* the +/- group: fixed compact width so nothing overflows the panel */ #booking-widget .vue-mobile .booking-btngrp{ display:flex; flex:0 0 auto; justify-content:flex-end; align-items:center; gap:.3rem; padding-bottom:0 !important; } #booking-widget .vue-fxcount{ width:40px !important; min-width:0 !important; flex:0 0 40px; text-align:center; padding:.25rem 0; } /* the "Close" link at the foot of the panel */ #booking-widget .vue-mobile .row:last-child{ margin-bottom:0; } /* keep the whole occupancy panel (incl. the child-age selectors) inside the dropdown, otherwise its 766px float spills out to the right over the summary */ #booking-widget .dropdown-menu .vue-mobile{ float:none !important; width:auto !important; max-width:none !important; } #booking-widget .dropdown-menu .vue-mobile .col-md-12{ width:100% !important; max-width:100% !important; flex:0 0 100%; } /* the child-age helper text + validation, spaced and readable */ #booking-widget .dropdown-menu .child_div ~ *, #booking-widget .dropdown-menu .vue-mobile .col-md-12 > p{ margin-top:.5rem; font-size:.8rem; } /* ---------- calendar & notifications ---------- */ .mx-calendar-content .cell:hover{ background:var(--bk-gold) !important; color:#fff !important; } .mx-calendar-content .cell.today{ color:var(--bk-gold-deep) !important; } #booking-widget .hotel .notify-container, #booking-widget .reserveport-iframe-wrap .notify-container, #booking-widget #alert-msg.ui-pnotify.ui-pnotify-inline{ background:var(--bk-gold-deep) !important; } #booking-widget .notify-container .fa, #booking-widget .notify-container h4.notify-title, #booking-widget .notify-text span.timerspan, #modalbookingForm .modal-header{ color:#fff !important; } /* ---------- gate: hide room results until "Check Availability" is pressed ---------- */ .book-prompt{ display:none; text-align:center; color:var(--bk-muted); font-family:"Raleway",sans-serif; font-size:1rem; letter-spacing:.01em; margin:3rem auto; max-width:38ch; } .book-shell.mj-unsearched .book-prompt{ display:block; } .book-shell.mj-unsearched #booking-widget .col-md-9, .book-shell.mj-unsearched #booking-widget .vue-right-side, .book-shell.mj-unsearched #booking-widget .residencydiv, .book-shell.mj-unsearched #booking-widget #proof{ display:none !important; } /* ---------- room results: 2-up grid of compact cards ---------- */ /* cards fill the left column as a 2-up grid; the summary sidebar (cart + Continue) stays on the right — it's the proceed path for multi-room bookings */ #booking-widget .col-md-9{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; align-items:start; } #booking-widget .col-md-9 > *:not(.vue-card-unit){ grid-column:1 / -1; } /* headers/rows span full width */ #booking-widget .vue-card-unit{ max-width:none; margin:0; background:#fff; border:1px solid var(--bk-line); border-radius:10px; overflow:hidden; box-shadow:0 14px 40px -30px rgba(40,36,30,.4); display:flex; flex-direction:column; } /* room title — centred above the photo */ #booking-widget .vue-card-unit-title{ padding:1rem 1.2rem .3rem; } #booking-widget .vue-card-unit-title h1.room-title{ text-align:center; font-size:1.35rem; } /* stack ONLY the top photo+details row (photo above details); leave the nested per-room guest selectors with their own Bootstrap layout so they stay usable */ #booking-widget .vue-card-unit > div > .row{ display:block; margin:0; } #booking-widget .vue-card-unit > div > .row > [class*="col-"]{ width:100%; max-width:100%; flex:0 0 100%; float:none; padding:0; } /* the photo: large, full-width, fixed height. The image sits in an inline , so make that anchor a full-width block first, then the image fills it. */ #booking-widget .vue-card-unit > div > .row > [class*="col-"] > a{ display:block; width:100%; } #booking-widget .vue-card-unit img.responsive{ width:100% !important; max-width:100% !important; height:230px; max-height:none; object-fit:cover; display:block; margin:0; } /* "view gallery" strip sits tight under the photo */ #booking-widget .vue-card-unit a.view_images{ display:block; } /* details area — comfortable padding, left aligned */ #booking-widget .vue-card-unit .vue-pad-content, #booking-widget .vue-card-unit .vue-card-unit-summary, #booking-widget .vue-card-unit .vue-card-unit-footer{ padding:0 1.6rem; } #booking-widget .vue-card-unit .vue-pad-content{ padding-top:1.3rem; } #booking-widget .vue-card-unit .vue-card-unit-footer{ padding-top:1.2rem; padding-bottom:1.6rem; } /* footer: price on the left, Book Now on the right, tidy row */ #booking-widget .vue-card-unit-footer .row{ display:flex !important; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin:0; } #booking-widget .vue-card-unit-footer [class*="col-"]{ width:auto; max-width:none; flex:0 1 auto; } /* our own card photo carousel (replaces the widget image + "View Gallery") */ #booking-widget .mj-cardcar{ position:relative; width:100%; height:230px; overflow:hidden; background:#eceae5; } #booking-widget .mj-cardcar .mj-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; } #booking-widget .mj-cardcar .mj-slide.is-active{ opacity:1; } #booking-widget .mj-cardcar .mj-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.85); color:var(--bk-ink); font-size:1.25rem; line-height:1; display:grid; place-items:center; opacity:0; transition:opacity .3s ease, background .3s ease; } #booking-widget .vue-card-unit:hover .mj-cardcar .mj-nav{ opacity:1; } #booking-widget .mj-cardcar .mj-nav:hover{ background:#fff; } #booking-widget .mj-cardcar .mj-prev{ left:.6rem; } #booking-widget .mj-cardcar .mj-next{ right:.6rem; } #booking-widget .mj-cardcar .mj-count{ position:absolute; bottom:.6rem; left:.6rem; z-index:2; background:rgba(20,18,15,.6); color:#fff; font-size:.7rem; letter-spacing:.03em; padding:.15rem .55rem; border-radius:11px; } @media (hover:none){ #booking-widget .mj-cardcar .mj-nav{ opacity:1; } } /* checkout "You're booking" summary card (our carousel + room + dates + price) */ #booking-widget .mj-checkout-summary{ display:flex; gap:1.5rem; align-items:stretch; width:100%; margin:0 0 1.5rem; background:#fff; border:1px solid var(--bk-line); border-radius:10px; overflow:hidden; box-shadow:0 14px 40px -30px rgba(40,36,30,.4); text-align:left; } #booking-widget .mj-checkout-summary .mj-cardcar{ width:280px; height:auto; min-height:190px; flex:0 0 280px; } #booking-widget .mj-checkout-summary .mj-nav{ opacity:1; } #booking-widget .mj-cosum-body{ padding:1.2rem 1.5rem 1.2rem 0; align-self:center; } #booking-widget .mj-cosum-eyebrow{ font-family:"Raleway",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; font-weight:600; color:var(--bk-gold-deep); margin:0 0 .35rem; } #booking-widget .mj-cosum-body h3{ font-family:"Marcellus",serif; font-size:1.45rem; color:var(--bk-ink); margin:0 0 .5rem; } #booking-widget .mj-cosum-dates{ font-family:"Inter",sans-serif; color:var(--bk-muted); margin:0 0 .3rem; font-size:.9rem; } #booking-widget .mj-cosum-price{ font-family:"Inter",sans-serif; color:var(--bk-ink); font-weight:600; margin:0; } @media (max-width:620px){ #booking-widget .mj-checkout-summary{ flex-direction:column; } #booking-widget .mj-checkout-summary .mj-cardcar{ width:100%; flex:0 0 auto; height:200px; } #booking-widget .mj-cosum-body{ padding:0 1.3rem 1.3rem; } } /* image sizing elsewhere (single-room slider) */ .owl-carousel .owl-item img, #booking-widget .room-full-slider img{ max-height:420px; object-fit:cover; margin:auto; } /* ---------- de-clutter card footer ---------- */ /* drop Terms + Cancellation (moved to the page foot) and the separators; keep Room Details */ #booking-widget .vue-card-unit-footer .vue-show-tc, #booking-widget .vue-card-unit-footer .sep{ display:none !important; } #booking-widget .vue-card-unit-footer a.mj-details-link{ color:var(--bk-gold-deep); font-weight:600; letter-spacing:.08em; font-size:.72rem; text-decoration:none; } #booking-widget .vue-card-unit-footer a.mj-details-link:hover{ color:var(--bk-ink); } /* ---------- booking policies strip (before footer) ---------- */ .book-policies{ padding:1.5rem 0 3rem; text-align:center; } .book-policies p{ font-family:"Raleway",sans-serif; font-size:.9rem; color:var(--bk-muted); margin:0; } .book-policies a{ color:var(--bk-gold-deep); font-weight:600; } .book-policies a:hover{ color:var(--bk-ink); } /* ---------- child-age selectors: give them room to breathe ---------- */ #booking-widget .child_div{ display:flex; align-items:center; gap:.9rem; margin:0 0 .7rem; } #booking-widget .child_div:first-of-type{ margin-top:.6rem; } #booking-widget .child_div label{ margin:0; min-width:60px; font-weight:600; font-size:.82rem; white-space:nowrap; } #booking-widget .child_ages{ padding:.4rem .7rem; border:1px solid var(--bk-line) !important; border-radius:6px; min-width:112px; background:#fff; } #booking-widget .child_ages:focus{ outline:none; border-color:var(--bk-gold-deep) !important; } /* ---------- summary: drop the empty "No room Selected" clip-art placeholder ---------- */ #booking-widget #no_room_selected{ display:none; } /* ---------- summary sidebar (cart + Continue) — reskinned ---------- */ /* drop the standalone "Majlis Manda Island Resort" name box above the summary */ #booking-widget .vue-side_top_card{ display:none !important; } /* the summary follows you as you scroll the room list */ #booking-widget .vue-right-side{ position:sticky; top:96px; } /* the summary itself → a clean card matching the site */ #booking-widget .vue-side_bottom_card{ background:#fff; border:1px solid var(--bk-line); border-radius:10px; box-shadow:0 16px 42px -30px rgba(40,36,30,.42); padding:1.5rem 1.4rem; } #booking-widget .vue-side_bottom_card h3{ font-family:"Marcellus",serif !important; color:var(--bk-ink) !important; text-align:center; letter-spacing:.14em; font-size:1.15rem; margin:0 0 1rem; padding-bottom:.9rem; border-bottom:1px solid var(--bk-line); } #booking-widget .vue-side_bottom_card, #booking-widget .vue-side_bottom_card p, #booking-widget .vue-side_bottom_card span, #booking-widget .vue-side_bottom_card td, #booking-widget .vue-side_bottom_card th{ font-family:"Inter","Raleway",sans-serif; color:var(--bk-ink); } /* the cart table */ #booking-widget .vue-side_bottom_card table{ width:100%; margin:.9rem 0; border-collapse:collapse; } #booking-widget .vue-side_bottom_card table th{ text-transform:uppercase; letter-spacing:.07em; font-size:.62rem; font-weight:600; color:var(--bk-muted); padding:.45rem .3rem; border-bottom:1px solid var(--bk-line); text-align:left; } #booking-widget .vue-side_bottom_card table td{ font-size:.82rem; padding:.55rem .3rem; border-bottom:1px solid var(--bk-line); } /* the little bed icon in the summary — tint it to our gold instead of the default green */ #booking-widget #bedimg{ filter: brightness(0) saturate(100%) invert(63%) sepia(14%) saturate(560%) hue-rotate(350deg) brightness(90%) contrast(86%) !important; } /* the CONTINUE / proceed button → full-width solid gold primary */ #booking-widget .vue-side_bottom_card .btn-proceed, #booking-widget .vue-side_bottom_card .vue-btn-proceed, #booking-widget .vue-side_bottom_card #summery-submit, #booking-widget .vue-side_bottom_card button, #booking-widget .vue-side_bottom_card .btn{ width:100% !important; margin-top:1rem !important; padding:.85rem 1rem !important; background:var(--bk-gold-deep) !important; color:#fff !important; border:1.5px solid var(--bk-gold-deep) !important; letter-spacing:.12em; text-transform:uppercase; font-weight:600; font-size:.74rem; border-radius:2px !important; transition:background .3s ease, border-color .3s ease; } #booking-widget .vue-side_bottom_card .btn-proceed:hover, #booking-widget .vue-side_bottom_card .vue-btn-proceed:hover, #booking-widget .vue-side_bottom_card #summery-submit:hover, #booking-widget .vue-side_bottom_card button:hover, #booking-widget .vue-side_bottom_card .btn:hover{ background:var(--bk-ink) !important; border-color:var(--bk-ink) !important; color:#fff !important; } /* ---------- card details row: board / price / book each on its own line ---------- */ #booking-widget .vue-card-unit .vue-border-btm > .row{ display:block; margin:0; } #booking-widget .vue-card-unit .vue-border-btm > .row > [class*="col-"]{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; float:none; padding:0 !important; margin-bottom:.85rem; text-align:left !important; } #booking-widget .vue-card-unit .vue-border-btm > .row > [class*="col-"]:last-child{ margin-bottom:0; } /* drop the lone guest-icon column (decorative, just adds clutter) */ #booking-widget .vue-card-unit .vue-border-btm > .row > .col-md-2{ display:none !important; } /* price block — left aligned & readable on its own line */ #booking-widget .vue-card-unit #priceDetail{ text-align:left !important; } #booking-widget .vue-card-unit #priceDetail strong{ font-size:1.15rem; } /* Book Now — comfortable, not squeezed */ #booking-widget .vue-card-unit .vue-border-btm .btn-orange-solid{ width:100%; padding:.8rem 1.4rem !important; } /* room-count stepper sits on its own line with room to show +/- */ #booking-widget .vue-card-unit .vue-border-btm .booking-btngrp{ display:inline-flex !important; flex-wrap:nowrap; align-items:center; gap:.35rem; } /* ---------- card occupancy editor (adults/children/infants) ---------- */ /* horizontal, compact steppers */ #booking-widget .vue-card-unit .booking-btngrp{ display:inline-flex !important; flex-wrap:nowrap; align-items:center; justify-content:center; gap:.3rem; padding:0 !important; } #booking-widget .vue-card-unit .vue-fxcount{ width:38px !important; min-width:0 !important; text-align:center; } /* per-room guests: one type per line (label left, stepper right) instead of 3 cramped columns */ #booking-widget .vue-card-unit .unit-config > .row{ display:block; margin:0; } #booking-widget .vue-card-unit .unit-config > .row > [class*="col-"]{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important; display:flex; align-items:center; flex-wrap:wrap; gap:.1rem .5rem; margin-bottom:.75rem; } #booking-widget .vue-card-unit .unit-config .booking-btngrp{ margin-left:auto; } #booking-widget .vue-card-unit .vue-card-unit-summary label{ font-size:.85rem; font-weight:600; margin:0; } #booking-widget .vue-card-unit .vue-card-unit-summary .vue-ageDiv{ font-size:.78rem; color:var(--bk-muted); } /* ROOM block: drop the redundant X / "close" control (the room stepper's − removes the room), which was overlapping the guest rows and bleeding past the card edge */ #booking-widget .vue-card-unit .close-container{ display:none !important; } #booking-widget .vue-card-unit .roomborder-btm{ position:relative; } /* ---------- modal / checkout ---------- */ #myModal{ background:rgba(24,21,17,.55); } #modalbookingForm{ padding-top:4rem; } #booking-widget .close{ padding:4px 8px; background:var(--bk-ink); opacity:1; border-radius:2px; } /* soften off-domain "invalid property" notice (never shows on the live domain) */ #booking-widget .alert.alert-danger{ background:var(--bk-paper); border:1px solid var(--bk-line); color:var(--bk-muted); border-radius:6px; font-size:.85rem; } /* mobile sticky reservation trigger */ #mobile_booking_triger.btn.btn-orange-solid{ border-radius:999px !important; padding:.9rem 1.6rem !important; box-shadow:0 10px 30px -10px rgba(40,36,30,.5); }