/* Restaurant Sat Bains theme v20261101h — generated 2026-11-01 18:16 by retheme.py. Do not hand-edit: change the brand JSON / templates and regenerate. */
/* ===== Part 1: recolour of _VoucherThemeDefault.css + UserVoucher.css (generated) ===== */
::-webkit-scrollbar-thumb { background-color: #c1a98b; }
#alacerHotelSurroundPageBody { background-color: #e6ded0; }
.headerMenu.mob .menuItem.menuIcon .glyphicon { color: #1d1b19; }
.headerMenu.mob .menuItem.basketIcon .glyphicon { color: #1d1b19; }
.headerMenu.mob .menuItem.userIcon .glyphicon { color: #1d1b19; }
.toastMessage { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #fefdfd; }
voucherbookingapp input, voucherbookingapp input.form-control { border-color: #1d1b19; }
voucherbookingapp select { border-color: #1d1b19; }
voucherbookingapp textarea { border-color: #1d1b19; }
.notIE.fullWidth .inputDropdown, drop-down .inputDropdown { background-color: #e6ded0; border-color: #1d1b19; }
.notIE.fullWidth .counterIcon, drop-down .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
.notIE.fullWidth .counterIconMob, drop-down .counterIconMob { color: #fefdfd; background-color: #8a7d6b; }
drop-down select.inputDropdown { background-color: #e6ded0; border-color: #1d1b19; }
drop-down .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
drop-down .counterIconMob { color: #fefdfd; background-color: #8a7d6b; }
.controlIndicator { background-color: #fefdfd; }
.control:hover input ~ .controlIndicator, .control input:focus ~ .controlIndicator { background-color: #1d1b19; }
.control input:checked ~ .controlIndicator { background-color: #e6ded0; }
.control:hover input:not([disabled]):checked ~ .controlIndicator, .control input:checked:focus ~ .controlIndicator { background-color: rgba(29, 27, 25, 0.5); }
.control input:disabled ~ .controlIndicator { background-color: rgba(29, 27, 25, 0.5); }
.controlCheckbox .controlIndicator:after { border-color: #fefdfd; }
.loginRegisterLink .loginLink { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
.loginRegisterLink .loginLink:hover { background-color: #472917; }
.card-shadow { box-shadow: none; }
login .loginForm { background-color: #f3efe7; border-color: var(--brand-line); }
login .loginPopupTitle { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
login .loginPopupEmailLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
login .loginPopupEmailInput { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #e6ded0; }
login .loginPopupEmailInput::-webkit-input-placeholder { color: rgba(29, 27, 25, 0.5); }
login .loginPopupEmailInput:-moz-placeholder { color: rgba(29, 27, 25, 0.5); }
login .loginPopupEmailInput::-moz-placeholder { color: rgba(29, 27, 25, 0.5); }
login .loginPopupEmailInput:-ms-input-placeholder { color: rgba(29, 27, 25, 0.5); }
login .loginPopupPasswordLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
login .loginPopupPasswordInput { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #e6ded0; }
login .loginPopupForgotPasswordLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
login .loginPopupForgotPasswordLabel:hover { color: #1d1b19; }
login .loginPopupForgotPasswordLabel:focus { color: #1d1b19; }
login .loginPopupForgotPasswordLabel:active { color: #1d1b19; }
login .loginPopupForgotPasswordLabel:visited { color: #1d1b19; }
login .loginPopupInvalidPasswordMessage { color: #75583d; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
login .loginPopupLoginFailedMessage { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
login .loginPopupForgotPasswordResultMessage { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
login .loginPopupLoginBtn { color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #1d1b19; }
login .loginPopupLoginBtn:hover { background-color: #472917; }
login .loginPopupCancelBtn { color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #1d1b19; }
login .loginPopupCancelBtn:hover { background-color: #472917; }
@media (max-width: 480px) {
  .loginPopupTitle { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
  .loginPopupEmailLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
  .loginPopupEmailInput { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #e6ded0; }
  .loginPopupPasswordLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
  .loginPopupPasswordInput { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; background-color: #e6ded0; }
  .loginPopupForgotPasswordLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .loginPopupInvalidPasswordMessage { color: #75583d; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .loginPopupLoginFailedMessage { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .loginPopupForgotPasswordResultMessage { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .loginPopupLoginBtn { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #d9cbb8; }
  .loginPopupCancelBtn { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #d9cbb8; }
}
voucherpurchaseprocess voucher-bread-crumb .breadCrumbGroup { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
voucherpurchaseprocess voucher-bread-crumb .breadcrumb .current { color: #1d1b19; }
.basketWrapper { background-color: #ece6dc; border-color: var(--brand-line); }
.basketWrapper .basket .basketCounts .glyphicon.glyphicon-shopping-cart { color: #1d1b19; }
.basketWrapper .basket .basketCounts .basketTotalItemsCount { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.basketWrapper .basket .basketTotalItemsPrice { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.basketWrapper .basketItemsWrapper { box-shadow: none; }
.basketWrapper .basketItemsWrapper .basketItems { background-color: #d9cbb8; border-color: var(--brand-line); }
.basketWrapper .basketItemsWrapper .basketItems .basketItem { border-bottom-color: var(--brand-line); }
.basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemName { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemPrice { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.basketWrapper .basketItemsWrapper .basketCheckOutMenu { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
.basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover { background-color: #472917; }
.basketIcon .basketIconTotalItemsCount { background-color: #d9cbb8; color: #1d1b19; }
spinner .spinnerIcon { color: #1d1b19; }
spinner .spinnerText { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; }
@media (max-width: 480px) {
  .spinnerIcon { color: #1d1b19; }
}
.voucherCategoryDisplay .page1NoVoucherText { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.voucherCategoryDisplay .page1NoMenuItemText { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.voucherCategoryDisplay .page1TopBar { background-color: #f3efe7; }
.voucherCategoryDisplay #page1TextMenuHeaderList { background-color: #f3efe7; }
.voucherCategoryDisplay .page1SearchBoxInputWrapper { border-color: #d9cbb8; background-color: #d9cbb8; }
.voucherCategoryDisplay .page1SearchBoxInput { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #d9cbb8; }
.voucherCategoryDisplay .page1SearchBoxIcon { color: #1d1b19; background-color: #d9cbb8; }
.voucherCategoryDisplay #page1TextMenuHeader { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.voucherCategoryDisplay .page1TextMenuItem { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
.voucherCategoryDisplay .page1TitlesMenuItemContainer { background-color: #f3efe7; }
.voucherCategoryDisplay .page1TilesMenuTitle { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #d9cbb8; }
.voucherCategoryDisplay .page1TilesMenuItem { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
.voucherCategoryDisplay .page1SearchBoxInputMob { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #d9cbb8; }
.voucherCategoryDisplay .page1SearchBoxIconMob { color: #1d1b19; background-color: #d9cbb8; }
.voucherCategoryDisplay #page1TextMenuHeaderMob { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #f3efe7; }
.voucherCategoryDisplay #page1TextMenuSubHeaderMob { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #e6ded0; border-bottom-color: var(--brand-line); }
.voucherCategoryDisplay .page1TextMenuItemMob { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #e6ded0; border-bottom-color: var(--brand-line); }
.voucherCategoryDisplay .page1TitlesMenuItemContainerMob { background-color: #e6ded0; border-color: var(--brand-line); }
.voucherCategoryDisplay .page1TilesMenuTitleMob { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #e6ded0; }
voucher-refine-area .voucherRefineAreaContainer { background-color: #f3efe7; border-color: var(--brand-line); }
voucher-refine-area .filterSummaryWrapper .filters { border-color: var(--brand-line); }
voucher-refine-area .page2HomeIconStyle { color: #1d1b19; }
voucher-refine-area .refineVoucherT { background-color: #d9cbb8; border-color: var(--brand-line); }
voucher-refine-area .refineVoucherT input { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #d9cbb8; }
voucher-refine-area .refineVoucherT input::-webkit-input-placeholder { color: rgba(29, 27, 25, 0.5); }
voucher-refine-area .refineVoucherT input:-moz-placeholder { color: rgba(29, 27, 25, 0.5); }
voucher-refine-area .refineVoucherT input::-moz-placeholder { color: rgba(29, 27, 25, 0.5); }
voucher-refine-area .refineVoucherT input:-ms-input-placeholder { color: rgba(29, 27, 25, 0.5); }
voucher-refine-area .refineVoucherT input #page2SearachFieldIcon-search { color: #1d1b19; }
voucher-refine-area #page2SearachFieldIcon { color: #1d1b19; }
voucher-refine-area .sortingContainerLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-refine-area .page2PriceRangeLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-refine-area span#page2SortIconTriangleBottom, voucher-refine-area span#page2SortIconTriangleTop { color: #1d1b19; }
voucher-refine-area #page2SortIconTriangleBottom.selectedOrder, voucher-refine-area #page2SortIconTriangleTop.selectedOrder { color: #d9cbb8; }
voucher-refine-area .slider.slider-horizontal { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; border-color: #1d1b19; color: #1d1b19; }
voucher-refine-area .slider.slider-horizontal .slider-track { background-color: #d9cbb8; }
voucher-refine-area .slider.slider-horizontal .slider-track .slider-track-low, voucher-refine-area .slider.slider-horizontal .slider-track .slider-track-high, voucher-refine-area .slider.slider-horizontal .slider-track .slider-selection { background-color: #d9cbb8; }
voucher-refine-area .slider.slider-horizontal .slider-track .slider-selection { background-color: #f3efe7; }
voucher-refine-area .slider.slider-horizontal .slider-track .slider-handle { background-color: #1d1b19; }
voucher-refine-area .slider.slider-horizontal .tooltip { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucher-refine-area .slider.slider-horizontal .tooltip .tooltip-inner { background-color: #f3efe7; color: #1d1b19; }
vouchercard .voucherCardContainerStyle { background-color: #f3efe7; border-color: var(--brand-line); }
vouchercard .voucherDetailPaneVoucherTitle { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
vouchercard .mobVoucherDetailPaneVoucherTitle { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
vouchercard .voucherDetailPaneVoucherPrice { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
vouchercard .mobVoucherDetailPaneVoucherPrice { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
vouchercard .voucherDetailPaneVoucherInfo { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
vouchercard .mobVoucherDetailPaneVoucherInfo { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
vouchercard .commonButton, vouchercard login .loginPopupLoginBtn, login vouchercard .loginPopupLoginBtn, vouchercard login .loginPopupCancelBtn, login vouchercard .loginPopupCancelBtn { border-color: #1d1b19; }
vouchercard .voucherDetailPaneAddToBasketBtnLabel { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover { background-color: #472917; }
vouchercard .voucherDetailPaneMoreInfoBtnLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; }
vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover { background-color: #472917; }
voucherdetailsdialog .modalHeaderTexTitleLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .modalHeaderTextPriceLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .modModalHeaderTextTitleLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .mobModalHeaderTextPriceLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle, voucherdetailsdialog .voucherOptionsTitle { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo, voucherdetailsdialog .voucherOptionsDesc, voucherdetailsdialog .voucherOptionsPrice { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media only screen and (max-device-width: 768px) {
  voucherdetailsdialog .voucherOverviewTitle, voucherdetailsdialog .voucherExpiryDetailTitle, voucherdetailsdialog .voucherTermsTitle { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  voucherdetailsdialog .voucherOverviewInfo, voucherdetailsdialog .voucherExpiryDetailInfo, voucherdetailsdialog .voucherExpiryVoucherExpiryFromDate, voucherdetailsdialog .voucherExpiryVoucherDuration, voucherdetailsdialog .voucherTermsInfo { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
}
voucherdetailsdialog .mobVoucherOptionsTitle { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .mobVoucherOptionsDesc, voucherdetailsdialog .mobVoucherOptionsPrice { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherOptionsAddToBasket { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherOptionsAddToBasket:hover { background-color: #472917; }
voucherdetailsdialog .voucherDetailsDialogCloseBtnFont { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherDetailsDialogCloseBtnFont:hover { background-color: #472917; }
voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn, voucherdetailsdialog .mobVoucherOptionsAddToBasket { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdetailsdialog .voucherOptions .info { border-top-color: var(--brand-line) !important; border-bottom-color: var(--brand-line) !important; }
voucher-summary .basketheading { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
voucher-summary .tableBgColor { background-color: #f3efe7; border-color: var(--brand-line); }
voucher-summary .item-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .price-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .action-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .item-content { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .price-content { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .content-editIcon { color: #1d1b19; }
voucher-summary .content-deleteIcon { color: #1d1b19; }
voucher-summary .total-foot { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
voucher-summary .foot-deleteIcon { color: #1d1b19; }
voucher-summary .table > thead > tr > th { border-bottom-color: var(--brand-line); }
voucher-summary .table > tfoot > tr > th { border-top-color: var(--brand-line); }
#page3 .intrestedheading { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page3 vouchercard .voucherCardContainerStyle { background-color: #f3efe7; border-color: var(--brand-line); }
#page3 vouchercard .voucherTitleItem { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page3 vouchercard .voucherPriceItem { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page3 .deskcheckout, #page3 .deskback { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
#page3 .deskcheckout:hover, #page3 .deskback:hover { background-color: #472917; }
#page3 .moreBtn, #page3 .addBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
#page3 .moreBtn:hover, #page3 .addBtn:hover { background-color: #472917; }
#page3 .mobback, #page3 .mobcheckout { color: #1d1b19; background-color: #d9cbb8; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#page3 .mobback:hover, #page3 .mobcheckout:hover { background-color: #472917; }
@media (max-width: 767px) {
  #summary .item-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #summary .price-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #summary .action-head { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #summary .item-content { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #fefdfd; }
  #summary .price-content { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #fefdfd; }
  #summary .content-editIcon { color: #1d1b19; }
  #summary .content-deleteIcon { color: #1d1b19; }
  #summary .total-foot { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
  #summary .foot-deleteIcon { color: #1d1b19; }
}
#yourDetails { background-color: #f3efe7; border-color: var(--brand-line); }
#yourDetails #YourDetailsHeadingTextLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
#yourDetails .yourDetailsFieldLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#yourDetails .yourDetailsFieldInput { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #e6ded0; }
#yourDetails .yourDetailsFieldInputDropdown { background-color: #e6ded0; }
#yourDetails .yourDetailsFieldInputDropdown .fancyArrow { color: #fefdfd; background-color: #8a7d6b; }
#yourDetails .yourDetailsFieldInputDropdown select { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#yourDetails #marketingCheckBoxLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#yourDetails #marketingCheckBoxTick { background-color: #fefdfd; }
#yourDetails #marketingCheckBoxTick::after { border-color: #fefdfd; }
#yourDetails #marketingCheckBoxInput:checked ~ #marketingCheckBoxTick { background-color: #1d1b19; }
#yourDetails #marketingCheckBoxInputMob:checked ~ #marketingCheckBoxTick { background-color: #1d1b19; }
#yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page45ContinueBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
#page45MethodBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
#page45MethodBtn:disabled { color: rgba(29, 27, 25, 0.5); }
@media (max-width: 480px) {
  #yourDetails #YourDetailsHeadingTextLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
  #yourDetails .yourDetailsFieldLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #yourDetails .yourDetailsFieldInput { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #yourDetails .yourDetailsFieldInputDropdown select { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
  #yourDetails #marketingCheckBoxLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
  #yourDetails .checkOutGuestFont, #yourDetails .createWebAccountFont { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
}
#mobPage45ContinueBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #d9cbb8; }
#mobPage45MethodBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #d9cbb8; }
#mobPage45MethodBtn:disabled { color: rgba(29, 27, 25, 0.5); }
#page4 .deliveryTitle { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-details .errorfont { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-details .visible-lg .delivery-container { background-color: #f3efe7; border-color: var(--brand-line); }
delivery-details .visible-lg .delivery-container table tr { border-bottom-color: var(--brand-line); }
delivery-details .visible-lg .promobtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
delivery-details .visible-lg .promobtn:hover { background-color: #472917; }
delivery-details .visible-lg .header { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg .voucherDeliveryAddress select, delivery-details .visible-lg .inputDropdown { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-details .visible-lg .vouchertext { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
delivery-details .visible-lg .deliverytext { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg .pointer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
delivery-details .visible-lg .total { border-bottom-color: var(--brand-line); }
delivery-details .visible-lg .voucherinput { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #d9cbb8; }
delivery-details .visible-lg .hr-mobile { border-bottom-color: var(--brand-line); }
delivery-details .visible-lg .pricetext { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg .totallabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg #combineCheckBoxLabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg .combineCheckBoxTick { background-color: #fefdfd; }
delivery-details .visible-lg .combineCheckBoxTick::after { border-color: #fefdfd; }
delivery-details .visible-lg .combineCheckBoxTick:hover { background-color: #fefdfd; }
delivery-details .visible-lg #combineCheckboxInput:checked ~ #combineCheckBoxTick { background-color: #1d1b19; }
delivery-details .visible-lg .inputTextarea { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-details .visible-lg textarea { background-color: #d9cbb8; }
delivery-details .visible-lg .counterIcon { color: #1d1b19; background-color: #e6ded0; }
delivery-details .visible-xs .voucherDeliveryAddress select { background-color: #e6ded0; }
delivery-details .visible-xs .voucherContainer { background-color: #f3efe7; }
delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsPrice, delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsVoucherTypeName { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-details .visible-xs .voucherContainer .personlizeMessageMobile { background-color: #d9cbb8; }
delivery-details .visible-xs .voucherContainer .deliveryAddressContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #e6ded0; }
delivery-details .visible-xs .voucherContainer .deliveryMethodContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-details .visible-xs .voucherContainer textarea { background-color: #e6ded0; }
delivery-details .visible-xs .voucherContainer .PMCReadOnly { border-top-color: var(--brand-line); border-bottom-color: var(--brand-line); }
delivery-details .visible-xs .voucherContainer .PMCReadOnly div:first-child { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
delivery-details .visible-xs .voucherContainer .personlizeMessageContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; background-color: #d9cbb8; }
delivery-details .visible-xs .voucherContainer .DMDEContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-details .visible-xs .voucherContainer .DMDEContainer .DMEdit { background-color: #1d1b19; }
delivery-details .visible-xs .promoContainer { background-color: #f3efe7; }
delivery-details .visible-xs .promoContainer .promoHeader { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-details .visible-xs .promoContainer .promoInput input { background-color: #d9cbb8; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-details .visible-xs .promoContainer .promoInput button { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
delivery-details .visible-xs .CAPAInputContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
delivery-details .visible-xs .ammountSummaryContainer tr .seprator { border-top-color: var(--brand-line); }
delivery-details .visible-xs .ammountSummaryContainer tr td { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-details .visible-xs .deleteVoucherContainer { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #1d1b19; }
delivery-address .VDSDContainer { background-color: #f3efe7; }
delivery-address .visible-lg .addDeliveryAddressEmailHeading, delivery-address .visible-lg .addDeliveryAddressPostHeading { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-address .visible-lg legend { border-bottom-color: var(--brand-line); }
delivery-address .visible-lg hr { border-top-color: var(--brand-line); }
delivery-address .visible-lg .addDeliveryAddressLabelText { color: #1d1b19; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-address .visible-lg .phoneInput, delivery-address .visible-lg .postInput, delivery-address .visible-lg .townInput, delivery-address .visible-lg .address2Input, delivery-address .visible-lg .address1Input, delivery-address .visible-lg .emailInput, delivery-address .visible-lg .surnameInput, delivery-address .visible-lg .forenameInput { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-address .visible-lg .titleDropdown .inputdropdown, delivery-address .visible-lg .countyDropdown .inputdropdown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-address .visible-lg .titleDropdown .counterIcon, delivery-address .visible-lg .countyDropdown .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
delivery-address .visible-lg .cancleButton, delivery-address .visible-lg .addButton { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
delivery-address .visible-lg .cancleButton:hover, delivery-address .visible-lg .addButton:hover { background-color: #1d1b19; }
delivery-address .visible-sm .addDeliveryAddressEmailHeading, delivery-address .visible-sm .addDeliveryAddressPostHeading { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; }
delivery-address .visible-sm legend { border-bottom-color: var(--brand-line); }
delivery-address .visible-sm hr { border-top-color: var(--brand-line); }
delivery-address .visible-sm .addDeliveryAddressLabelText { color: #1d1b19; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-address .visible-sm .phoneInput, delivery-address .visible-sm .postInput, delivery-address .visible-sm .townInput, delivery-address .visible-sm .address2Input, delivery-address .visible-sm .address1Input, delivery-address .visible-sm .emailInput, delivery-address .visible-sm .surnameInput, delivery-address .visible-sm .forenameInput { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
delivery-address .visible-sm .titleDropdown .inputdropdown, delivery-address .visible-sm .countyDropdown .inputdropdown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
delivery-address .visible-sm .titleDropdown .counterIcon, delivery-address .visible-sm .countyDropdown .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
delivery-address .visible-sm .cancleButton, delivery-address .visible-sm .addButton { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #d9cbb8; }
delivery-address .visible-sm .cancleButton:hover, delivery-address .visible-sm .addButton:hover { background-color: #472917; }
voucherdeliveryshippingdate #VDSD .calendarLoading .glyphicon-refresh { color: #1d1b19; }
voucherdeliveryshippingdate .loading { color: #fefdfd; }
voucherdeliveryshippingdate .VDSDPopUpOpacity { background-color: #1d1b19; }
voucherdeliveryshippingdate .VDSDContainer { background-color: #f3efe7; }
voucherdeliveryshippingdate .VDSDHeader { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdeliveryshippingdate .VDSDDetailSection { border-bottom-color: var(--brand-line); border-top-color: var(--brand-line); }
voucherdeliveryshippingdate .yearMonthContainer { font-weight: 400; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #e6ded0; border-color: #fefdfd; }
voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .prevMonthIcon { color: #8a7d6b; }
voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption .nextMonthIcon { color: #8a7d6b; }
voucherdeliveryshippingdate .VDSDDetailSection .calendar table thead tr th { border-color: #fefdfd; }
voucherdeliveryshippingdate .calendar table thead tr th { color: #1d1b19; background-color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .calendar table tbody tr td { border-color: #fefdfd; }
voucherdeliveryshippingdate .calendar .calendarSelectedDayStyle { background-color: #75583d; color: #fefdfd; }
voucherdeliveryshippingdate .calendar .calendarDisableDayStyle { background-color: #d9cbb8; color: #1d1b19; }
voucherdeliveryshippingdate .calendar .calendarDefaultDayStyle { background-color: #e6ded0; color: #1d1b19; }
voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
voucherdeliveryshippingdate .notIE.fullWidth .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown, voucherdeliveryshippingdate drop-down .inputDropdown { background-color: #d9cbb8; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #e6ded0; }
voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .commonButton, voucherdeliveryshippingdate .VDSDContainer .VDSDFooter login .loginPopupLoginBtn, login voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .loginPopupLoginBtn, voucherdeliveryshippingdate .VDSDContainer .VDSDFooter login .loginPopupCancelBtn, login voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .loginPopupCancelBtn { font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; background-color: #d9cbb8; }
@media only screen and (max-device-width: 768px) {
  voucherdeliveryshippingdate .VDSDDetailSection .calendar table caption { background-color: #fefdfd; border-color: #fefdfd; }
  voucherdeliveryshippingdate .VDSDContainer { background-color: #e6ded0; }
  voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer { background-color: #fefdfd; }
  voucherdeliveryshippingdate .VDSDHeader { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .deliveryMethod label { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
  voucherdeliveryshippingdate .VDSDContainer .VDSDDetailSection .EDDContainer .EDDHeader { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
  voucherdeliveryshippingdate #VDSD .VDSDContainer .VDSDDetailSection .EDDContainer .EDDValue { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d1b19; font-weight: 400; }
}
#page4 .mobcheckout, #page4 .mobback, #page4 .deskback, #page4 .deskcheckout { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
#page4 .mobcheckout:hover, #page4 .mobback:hover, #page4 .deskback:hover, #page4 .deskcheckout:hover { background-color: #472917; }
#paymentBillingAddressSurround #PaymentBillingAddressHeading { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f3efe7; border-color: var(--brand-line); }
#paymentBillingAddressSurround .billingBgColor { background-color: #f3efe7; border-color: var(--brand-line); }
#paymentBillingAddressSurround .postLabel, #paymentBillingAddressSurround .countryLabel, #paymentBillingAddressSurround .countyLabel, #paymentBillingAddressSurround .townLabel, #paymentBillingAddressSurround .address2Label, #paymentBillingAddressSurround .address1Label { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#paymentBillingAddressSurround #Postcode, #paymentBillingAddressSurround #Town, #paymentBillingAddressSurround #Address1, #paymentBillingAddressSurround #Address2 { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#paymentBillingAddressSurround .countryDropdown, #paymentBillingAddressSurround .countyDropdown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#paymentBillingAddressSurround .countryDropdown .counterIcon, #paymentBillingAddressSurround .countyDropdown .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
#paymentBillingAddressSurround .sameAsLeadGuestCheckboxLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#paymentBillingAddressSurround .sameAsLeadGuestCheckbox { background-color: #fefdfd; }
#paymentBillingAddressSurround .control input:checked ~ .sameAsLeadGuestCheckbox { background-color: #1d1b19; }
#paymentBillingAddressSurround .controlCheckbox .sameAsLeadGuestCheckbox:after { border-color: #fefdfd; }
page5 #PaymentCardDetailHeading { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f3efe7; border-color: var(--brand-line); }
page5 termsandconditions .dailogBg { background-color: #f3efe7; }
page5 termsandconditions .tncTitle { color: #1d1b19; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
page5 termsandconditions .crossIcon { color: #1d1b19; }
page5 termsandconditions .modal-header { border-bottom-color: var(--brand-line) !important; }
page5 termsandconditions .voucherfont { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
page5 termsandconditions .termsdescfont { color: #1d1b19; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
page5 termsandconditions .tncCloseBtn { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fefdfd; background-color: #1d1b19; }
page5 termsandconditions .tncCloseBtn:hover { background-color: #472917; }
page5 .termsCheckboxWrapper { background-color: #f3efe7; border-color: #1d1b19; }
page5 .termsCheckboxWrapper .agreementfont { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
page5 .termsCheckboxWrapper .termsfont { color: #1d1b19; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
page5 .termsCheckboxWrapper .control input:checked ~ .custoCheckbox { background-color: #1d1b19; }
page5 .termsCheckboxWrapper .controlCheckbox .custoCheckbox:after { border-color: #fefdfd; }
page5 .cardDetailsBgColor { background-color: #f3efe7; border-color: var(--brand-line); }
page5 .page5ButtonSurround .deskcheckout, page5 .page5ButtonSurround .deskback { background-color: #1d1b19; color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
page5 .page5ButtonSurround .deskcheckout:hover, page5 .page5ButtonSurround .deskback:hover { background-color: #472917; }
page5 .page5ButtonSurround .mobcheckout, page5 .page5ButtonSurround .mobback { background-color: #d9cbb8; color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_cardholdername .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_cardholdername #cardholdername { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
form[name=verifonePaymentForm] #rowFor_pan .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_pan #pan { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
form[name=verifonePaymentForm] #rowFor_cardType .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_cardType #cardTypeDropDown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_cardType .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
form[name=verifonePaymentForm] #rowFor_startdateArea .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID #startYearDropDown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_startdateArea .yearSelectID .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID #startMonthDropDown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_startdateArea .monthSelectID .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
form[name=verifonePaymentForm] #rowFor_expirydateArea .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID #expiryYearDropDown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_expirydateArea .yearSelectID .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID #expiryMonthDropDown { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
form[name=verifonePaymentForm] #rowFor_expirydateArea .monthSelectID .counterIcon { color: #fefdfd; background-color: #8a7d6b; }
form[name=verifonePaymentForm] #rowFor_csc .labelDiv { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
form[name=verifonePaymentForm] #rowFor_csc #csc { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#CardDetailsSurround #CardTypeRow #CardTypeLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#CardDetailsSurround #CardTypeRow #DropDownCardType { color: #1d1b19; background-color: #e6ded0; font-weight: 400; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#CardDetailsSurround #CardNumberRow #CardNumberLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#CardDetailsSurround #CardNumberRow #CardNumberPaymentDetails { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#CardDetailsSurround #CardHoldersNameRow #CardHoldersNameLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#CardDetailsSurround #CardHoldersNameRow #CardHoldersNamePaymentDetails { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#CardDetailsSurround #ValidToRow #ValidToLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#CardDetailsSurround #ValidToRow #ValidToPaymentDetails { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodeLabel { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#CardDetailsSurround #CardSecurityCodeRow #CardSecurityCodePaymentDetails { background-color: #e6ded0; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page6 .heading { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#page6 .subHeading { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#page6 .deliveryDetailsHeading { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#page6 .deskBackBtn, #page6 .mobBackBtn { color: #fefdfd; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #1d1b19; }
#page6 .deskBackBtn:hover, #page6 .mobBackBtn:hover { background-color: #472917; }
#page6 .delivery-details .visible-lg .delivery-container { background-color: #f3efe7; border-bottom-color: var(--brand-line); }
#page6 .delivery-details .visible-lg .header { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page6 .delivery-details .visible-lg .pricetext, #page6 .delivery-details .visible-lg .vouchertext { color: #1d1b19; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
#page6 .delivery-details .visible-lg .deliverytext { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page6 .delivery-details .visible-lg .inputTextarea { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page6 .delivery-details .visible-lg .totallabel { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: #1d1b19; }
#page6 .delivery-details .visible-lg .total { border-color: var(--brand-line) !important; }
#page6 .delivery-details .visible-lg .delivery-container table tr { border-bottom-color: var(--brand-line); }
:root { --buttonBackgroundColor: #1d1b19; --buttonBackgroundColorHover: #d9cbb8; --buttonBorder: 1px solid #d9cbb8; --checkboxTickColor: #1d1b19; }
#page4 .deliveryTitle { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
.voucherCategoryDisplay .page1SearchBoxInput, .voucherCategoryDisplay .page1SearchBoxIcon { background-color: #fefdfd; }
.voucherCategoryDisplay .page1SearchBoxInputMob, .voucherCategoryDisplay .page1SearchBoxIconMob { background-color: #fefdfd; }
.voucherCategoryDisplay .page1SearchBoxInputWrapper { border-color: #d9cbb8; background-color: #fefdfd; }
.voucherCategoryDisplay .page1TilesMenuTitle { color: #fefdfd; }
voucher-refine-area .refineVoucherT input { background-color: #fefdfd; }
voucher-refine-area .refineVoucherT { background-color: #fefdfd; }
#yourDetails #marketingCheckBoxTick { border-color: #1d1b19; }
.notIE.fullWidth .inputDropdown, drop-down .inputDropdown, #yourDetails .yourDetailsFieldInput { background-color: #fefdfd; }
input:-internal-autofill-selected { background-color: #fefdfd !important; }
.controlIndicator { border-color: #1d1b19; }
.voucherCategoryDisplay .page1TextMenuItemMob, .voucherCategoryDisplay #page1TextMenuSubHeaderMob { color: #fefdfd; }
.voucherCategoryDisplay .page1TextMenuItemMob:hover, .voucherCategoryDisplay #page1TextMenuSubHeaderMob:hover { background-color: #472917; }
delivery-details .visible-lg .voucherinput { background-color: #fefdfd; }
delivery-details .visible-lg .voucherDeliveryAddress select, delivery-details .visible-lg .inputDropdown { background-color: #fefdfd; }
delivery-details .visible-lg textarea { background-color: #fefdfd; }
delivery-details .visible-xs .voucherDeliveryAddress select { background-color: #fefdfd; }
delivery-details .visible-xs .voucherContainer textarea { background-color: #fefdfd; }
delivery-details .visible-xs .promoContainer .promoInput input { background-color: #fefdfd; }
delivery-address .visible-lg .titleDropdown .inputdropdown, delivery-address .visible-lg .countyDropdown .inputdropdown { background-color: #fefdfd; }
delivery-address .visible-lg .phoneInput, delivery-address .visible-lg .postInput, delivery-address .visible-lg .townInput, delivery-address .visible-lg .address2Input, delivery-address .visible-lg .address1Input, delivery-address .visible-lg .emailInput, delivery-address .visible-lg .surnameInput, delivery-address .visible-lg .forenameInput { background-color: #fefdfd; }
delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsPrice, delivery-details .visible-xs .voucherContainer .voucherNamePriceContainer .deliveryDetailsVoucherTypeName { color: #1d1b19; }
.notIE.fullWidth .inputDropdown, drop-down .inputDropdown, #yourDetails .yourDetailsFieldInput { color: #1d1b19; }
.voucherDeliveryAddress[_ngcontent-c20] select[_ngcontent-c20] { color: #1d1b19; }
delivery-address .visible-sm .titleDropdown .inputdropdown, delivery-address .visible-sm .countyDropdown .inputdropdown { background-color: #fefdfd; }
delivery-address .visible-sm .phoneInput, delivery-address .visible-sm .postInput, delivery-address .visible-sm .townInput, delivery-address .visible-sm .address2Input, delivery-address .visible-sm .address1Input, delivery-address .visible-sm .emailInput, delivery-address .visible-sm .surnameInput, delivery-address .visible-sm .forenameInput { background-color: #fefdfd; }
#paymentBillingAddressSurround #Postcode, #paymentBillingAddressSurround #Town, #paymentBillingAddressSurround #Address1, #paymentBillingAddressSurround #Address2 { background-color: #fefdfd; }
#paymentBillingAddressSurround .countryDropdown, #paymentBillingAddressSurround .countyDropdown { background-color: #fefdfd; }
#CardDetailsSurround #CardTypeRow #DropDownCardType { background-color: #fefdfd; border-color: #1d1b19; }
#CardDetailsSurround #CardNumberRow #CardNumberPaymentDetails, #CardDetailsSurround #CardHoldersNameRow #CardHoldersNamePaymentDetails, #CardDetailsSurround #ValidToRow #ValidToPaymentDetails { background-color: #fefdfd; }
#paymentBillingAddressSurround .control input:checked ~ .sameAsLeadGuestCheckbox, #paymentBillingAddressSurround .sameAsLeadGuestCheckbox { border-color: #1d1b19; }
#summary .price-content { color: #1d1b19; }
voucher-summary .total-foot { color: #1d1b19; }
#ValidFromLabel, #ValidFromPaymentDetails { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#page6 .subHeading { color: #1d1b19; }
delivery-details .visible-lg .totallabel { color: #1d1b19; }
#yourDetails #YourDetailsHeadingTextLabel, delivery-address .visible-lg .addDeliveryAddressEmailHeading, delivery-address .visible-lg .addDeliveryAddressPostHeading { font-weight: 400; }
.btn.disabled, .btn[disabled] { background-color: #f3efe7 !important; }
.btn.disabled:hover, .btn[disabled]:hover { background-color: #472917 !important; }
.basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemPrice, .basketWrapper .basketItemsWrapper .basketItems .basketItem .basketItemName { color: #1d1b19; }
.breadcrumb a, .breadcrumb a:before { color: #1d1b19 !important; }
.breadcrumb a.current { color: #75583d !important; }
.btn, .btn-default, .btn-primary { font-weight: 400 !important; }
.deliveryDetailsHeading { color: #472917 !important; }
voucherdeliveryshippingdate div.deliveryMethod select { background-color: #fefdfd !important; }
voucherdeliveryshippingdate div.VDSDFooter > button { color: #fefdfd !important; }
voucherdeliveryshippingdate div.VDSDFooter > button:hover { background-color: #472917 !important; }
voucherdeliveryshippingdate .calendar .calendarSelectedDayStyle { color: #fefdfd; }
div.modal-dialog button:not(.close) { color: #fefdfd; }
div.modal-dialog button:not(.close):hover, div.modal-dialog button:not(.close):active { background-color: #472917; }
delivery-details .visible-xs .voucherContainer { background-color: #fefdfd; }
voucherdeliveryshippingdate .VDSDContainer .VDSDFooter .commonButton { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#alacerHotelSurroundPageBody .basketWrapper .basket .basketCounts .glyphicon.glyphicon-shopping-cart { color: #75583d; }
spinner .spinnerText { color: #1d1b19; }

/* ===== Part 2: brand layer ===== */
/* =====================================================================
   Restaurant Sat Bains — engine theme brand layer (generated by retheme.py)
   Palette: page #f3efe7, ink #1d1b19, dark #472917, accent #75583d,
   sand #c1a98b, linen #e6ded0, paper #fefdfd.  Font: neue-haas-grotesk-text
   Loaded last (from the wrapper), after any shared frame stylesheet.
   ===================================================================== */
:root {
	--brand-cream: #f3efe7;
	--brand-ink: #1d1b19;
	--brand-corten: #472917;
	--brand-bronze: #75583d;
	--brand-sand: #c1a98b;
	--brand-linen: #e6ded0;
	--brand-cal-avail: #e4dbcc;
	--brand-cal-limited: #c1a98b; --brand-slider-handle: #1d1b19;
	--brand-paper: #fefdfd;
	--brand-muted: #8a7d6b;
	--brand-line: rgba(29, 27, 25, 0.12);
	--brand-line-strong: rgba(29, 27, 25, 0.25);
	--brand-font: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--brand-texture: url("https://www.restaurantsatbains.com/images/rsb_texture_corten.jpg");
	--brand-heading-font: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* variables consumed by UserVoucher.css */
	--buttonBackgroundColor: #1d1b19;
	--buttonTextColor: #f3efe7;
	--buttonBackgroundColorHover: #472917;
	--buttonTextColorHover: #f3efe7;
	--buttonBorder: 1px solid #1d1b19;
	--buttonBorderHover: 1px solid #472917;
	--checkboxBackgroundColor: #fefdfd;
	--checkboxTickColor: #1d1b19;
}

/* ---------- Page ---------- */
html body#alacerHotelSurroundPageBody {
	background: var(--brand-cream) !important;
	color: var(--brand-ink);
	font-family: var(--brand-font) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

#alacerHotelSurroundPageBody main,
#alacerHotelSurroundPageBody main.uneven {
	background: transparent !important;
	padding: 0 0 3rem 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	float: none !important;
}

/* Global type inside the engine — keep icon fonts intact */
#alacerHotelSurroundPageBody #engineAreaContainer,
#alacerHotelSurroundPageBody #engineAreaContainer *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i),
#alacerHotelSurroundPageBody #headerBar,
#alacerHotelSurroundPageBody #headerBar *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i),
#alacerHotelSurroundPageBody .modal,
#alacerHotelSurroundPageBody .modal *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i),
#alacerHotelSurroundPageBody .bootstrap-dialog *:not(.fa):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]):not(i) {
	font-family: var(--brand-font) !important;
}

#alacerHotelSurroundPageBody #engineAreaContainer h1,
#alacerHotelSurroundPageBody #engineAreaContainer h2,
#alacerHotelSurroundPageBody #engineAreaContainer h3,
#alacerHotelSurroundPageBody #engineAreaContainer h4,
#alacerHotelSurroundPageBody .modal h1,
#alacerHotelSurroundPageBody .modal h2,
#alacerHotelSurroundPageBody .modal h3,
#alacerHotelSurroundPageBody .modal h4 {
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	color: #111111;
}

#alacerHotelSurroundPageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]) {
	color: var(--brand-bronze);
}
#alacerHotelSurroundPageBody #engineAreaContainer a:not(.btn):not([class*="Btn"]):not([class*="btn"]):not([class*="Button"]):hover {
	color: var(--brand-corten);
}

/* ---------- Header (replaces old site nav) ---------- */


#alacerHotelSurroundPageBody .brand-header {
	background: #472917 var(--brand-texture) repeat;
	border-bottom: 0;
	color: #f3efe7;
	margin: 0 0 2.5rem 0;
	padding: 0;
	position: relative;
}
#alacerHotelSurroundPageBody .brand-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 110px;
	padding: 0 50px;
	box-sizing: border-box;
}
#alacerHotelSurroundPageBody .brand-logo {
	display: flex;
	align-items: center;
	gap: 18px;
	text-decoration: none;
	border: 0;
	background: none;
	color: #f3efe7;
}
#alacerHotelSurroundPageBody .brand-logo svg {
	display: block;
	width: 80px;
	height: auto;
}
#alacerHotelSurroundPageBody .brand-logo svg path:not([fill]) { /* paths that set their own fill (e.g. a mask or a two-colour mark) keep it */
	fill: #f3efe7;
}
#alacerHotelSurroundPageBody .brand-wordmark {
	font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #f3efe7;
}
#alacerHotelSurroundPageBody .brand-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#alacerHotelSurroundPageBody .brand-header-side {
	display: flex;
	align-items: center;
	gap: 22px;
}
#alacerHotelSurroundPageBody .brand-accolade,
#alacerHotelSurroundPageBody .brand-back {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--brand-font);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #c1a98b;
	line-height: 1;
	text-decoration: none;
}
#alacerHotelSurroundPageBody .brand-back::before {
	content: "\2190";
	font-size: 14px;
	letter-spacing: 0;
	transition: transform .2s ease;
}
#alacerHotelSurroundPageBody .brand-back:hover::before { transform: translateX(-3px); }
#alacerHotelSurroundPageBody .brand-accolade img {
	display: inline-block;
	height: 12px;
	width: auto;
}

/* light header: page-coloured band, ink logo, quiet grey labels */
#alacerHotelSurroundPageBody .brand-header--light .brand-accolade,
#alacerHotelSurroundPageBody .brand-header--light .brand-back {
	color: var(--brand-muted);
}
#alacerHotelSurroundPageBody .brand-header--light .brand-back:hover {
	color: var(--brand-ink);
}

/* centred header: back link | logo | accolade */
#alacerHotelSurroundPageBody .brand-header--centred .brand-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	height: auto;
	min-height: 110px;
	padding-top: 22px;
	padding-bottom: 22px;
}
#alacerHotelSurroundPageBody .brand-header--centred .brand-header-left { justify-content: flex-start; }
#alacerHotelSurroundPageBody .brand-header--centred .brand-header-right { justify-content: flex-end; }
#alacerHotelSurroundPageBody .brand-header--centred.brand-header--wordmark .brand-logo {
	flex-direction: column;
	gap: 14px;
}

@media (max-width: 767.98px) {
	#alacerHotelSurroundPageBody .brand-header { margin-bottom: 1.5rem; }
	#alacerHotelSurroundPageBody .brand-header-inner { height: 76px; padding: 0 20px; }
	#alacerHotelSurroundPageBody .brand-logo svg { width: 60px; }
	#alacerHotelSurroundPageBody .brand-wordmark { font-size: 20px; }
	#alacerHotelSurroundPageBody .brand-accolade,
	#alacerHotelSurroundPageBody .brand-back { font-size: 10px; letter-spacing: 1.1px; }
	#alacerHotelSurroundPageBody .brand-accolade img { height: 11px; }
	#alacerHotelSurroundPageBody .brand-header--centred .brand-header-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 12px;
		height: auto;
		padding: 18px 20px;
	}
	#alacerHotelSurroundPageBody .brand-header--centred .brand-header-left { order: 2; justify-content: center; }
	#alacerHotelSurroundPageBody .brand-header--centred .brand-logo { order: 1; }
	#alacerHotelSurroundPageBody .brand-header--centred .brand-header-right { display: none; }
	#alacerHotelSurroundPageBody .brand-header--centred.brand-header--wordmark .brand-logo { gap: 10px; }
}

/* ---------- Notices carried over from the old wrapper (e.g. dietary / waiting-list notes) ---------- */
#alacerHotelSurroundPageBody #note,
#alacerHotelSurroundPageBody #waitlist,
#alacerHotelSurroundPageBody #termsandconditions,
#alacerHotelSurroundPageBody .brand-notice {
	max-width: 820px;
	margin: 0 auto 10px auto !important;
	padding: 0 20px;
	text-align: center;
	font-family: var(--brand-font) !important;
	font-size: 15px !important;
	line-height: 1.6;
	font-weight: 400;
	color: var(--brand-muted) !important;
	background: none !important;
}
#alacerHotelSurroundPageBody #note {
	font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 22px !important;
	line-height: 1.35;
	font-style: italic;
	color: var(--brand-ink) !important;
	margin-bottom: 18px !important;
	font-size-adjust: none;
}
#alacerHotelSurroundPageBody #waitlist b,
#alacerHotelSurroundPageBody #waitlist strong {
	display: block;
	font-weight: 500;
	color: var(--brand-ink);
	border-top: 1px solid var(--brand-line);
	border-bottom: 1px solid var(--brand-line);
	padding: 14px 0;
	margin-bottom: 8px;
}
#alacerHotelSurroundPageBody #termsandconditions {
	font-size: 13px !important;
	margin-bottom: 2rem !important;
}
#alacerHotelSurroundPageBody #waitlist a,
#alacerHotelSurroundPageBody #termsandconditions a,
#alacerHotelSurroundPageBody .brand-notice a {
	color: var(--brand-ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 767.98px) {
	#alacerHotelSurroundPageBody #note { font-size: 19px !important; margin-bottom: 12px !important; }
	#alacerHotelSurroundPageBody #waitlist,
	#alacerHotelSurroundPageBody .brand-notice { font-size: 13px !important; line-height: 1.5; }
	#alacerHotelSurroundPageBody #termsandconditions { font-size: 12px !important; margin-bottom: 1rem !important; }
	#alacerHotelSurroundPageBody #waitlist b,
	#alacerHotelSurroundPageBody #waitlist strong { padding: 10px 0; }
}
#alacerHotelSurroundPageBody #waitlist a:hover,
#alacerHotelSurroundPageBody #termsandconditions a:hover {
	color: var(--brand-corten) !important;
}

/* ---------- Headings in the heading font (only emitted when heading_font_family is set) ---------- */

/* ---------- Footer ---------- */
#alacerHotelSurroundPageBody .brand-footer {
	font-family: var(--brand-font);
	color: var(--brand-cream);
	margin: 3rem 0 0 0;
	clear: both;
}
#alacerHotelSurroundPageBody .brand-footer a {
	text-decoration: none;
	color: var(--brand-cream);
}
#alacerHotelSurroundPageBody .brand-footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 48px;
	padding: 56px 50px;
	background: #472917 var(--brand-texture) repeat;
}
#alacerHotelSurroundPageBody .brand-contact {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
#alacerHotelSurroundPageBody .brand-footer-title {
	font-size: 32px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--brand-paper);
	margin-bottom: 6px;
}
#alacerHotelSurroundPageBody .brand-contact-item {
	font-size: 14px;
	line-height: 1.5;
}
#alacerHotelSurroundPageBody .brand-label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--brand-cream);
	margin-bottom: 2px;
}
#alacerHotelSurroundPageBody .brand-links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}
#alacerHotelSurroundPageBody .brand-strap-name {
	display: block;
	font-size: 16px;
	letter-spacing: 2px;
	color: #f3efe7;
	margin-bottom: 4px;
}
#alacerHotelSurroundPageBody .brand-strap {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #c1a98b;
	padding-bottom: 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(193, 169, 139, 0.6);
}
#alacerHotelSurroundPageBody .brand-links a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
#alacerHotelSurroundPageBody .brand-links a:hover {
	color: var(--brand-sand);
}
#alacerHotelSurroundPageBody .brand-footer-under {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 50px;
	background: var(--brand-cream);
	color: var(--brand-ink);
}
#alacerHotelSurroundPageBody .brand-affiliations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	min-width: 0;
}
#alacerHotelSurroundPageBody .brand-affiliations img {
	display: block;
	height: 30px;
	width: auto;
}
#alacerHotelSurroundPageBody .brand-copy {
	font-size: 12px;
	color: var(--brand-ink);
}
@media (max-width: 767.98px) {
	#alacerHotelSurroundPageBody .brand-footer-top {
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 20px;
	}
	#alacerHotelSurroundPageBody .brand-links {
		align-items: flex-start;
		text-align: left;
	}
	#alacerHotelSurroundPageBody .brand-footer-under {
		padding: 18px 20px;
		flex-direction: column;
		align-items: flex-start;
	}
	#alacerHotelSurroundPageBody .brand-affiliations { gap: 14px; max-width: 100%; }
}

/* ---------- Header bar (login / basket) ---------- */
#alacerHotelSurroundPageBody #headerBar,
#alacerHotelSurroundPageBody #headerBar .headerBanner,
#alacerHotelSurroundPageBody #headerBar [style*="background-color:white"],
#alacerHotelSurroundPageBody #headerBar [style*="background-color: white"] {
	background-color: transparent !important;
}
#alacerHotelSurroundPageBody .loginLink,
#alacerHotelSurroundPageBody .loginLinkmobile,
#alacerHotelSurroundPageBody #headerBar .loginLink,
#alacerHotelSurroundPageBody #headerBar .loginLinkmobile {
	display: inline-block;
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--brand-cream) !important;
	background: var(--brand-ink) !important;
	border: 1px solid var(--brand-ink) !important;
	padding: 10px 18px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
#alacerHotelSurroundPageBody .loginLink:empty,
#alacerHotelSurroundPageBody .loginLinkmobile:empty {
	display: none;
}
#alacerHotelSurroundPageBody .loginLink:hover,
#alacerHotelSurroundPageBody .loginLinkmobile:hover,
#alacerHotelSurroundPageBody #headerBar .loginLink:hover,
#alacerHotelSurroundPageBody #headerBar .loginLinkmobile:hover {
	background: var(--brand-corten) !important;
	border-color: var(--brand-corten) !important;
	color: var(--brand-cream) !important;
}
#alacerHotelSurroundPageBody .logoutButton {
	color: var(--brand-ink);
}

/* ---------- Buttons ---------- */
#alacerHotelSurroundPageBody #engineAreaContainer .btn,
#alacerHotelSurroundPageBody #engineAreaContainer .commonButton,
#alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton,
#alacerHotelSurroundPageBody .modal .btn,
#alacerHotelSurroundPageBody .modal .commonButton,
#alacerHotelSurroundPageBody .bootstrap-dialog .btn {
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	font-size: 13px !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Button height standard (2026 refresh): one 44px height for primary and secondary actions,
   label centred. Breadcrumb steps, input-group addons and calendar arrows keep their own size. */
#alacerHotelSurroundPageBody #engineAreaContainer .btn,
#alacerHotelSurroundPageBody #engineAreaContainer .commonButton,
#alacerHotelSurroundPageBody #engineAreaContainer .commonNavButton,
#alacerHotelSurroundPageBody .modal .btn,
#alacerHotelSurroundPageBody .modal .commonButton,
#alacerHotelSurroundPageBody .bootstrap-dialog .btn,
#alacerHotelSurroundPageBody .loginLink {
	min-height: 44px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	line-height: 1.2 !important;
	box-sizing: border-box;
}
#alacerHotelSurroundPageBody #engineAreaContainer .btn-block { display: flex; width: 100%; }
#alacerHotelSurroundPageBody #engineAreaContainer .hidden,
#alacerHotelSurroundPageBody .loginLink.hidden { display: none !important; }
#alacerHotelSurroundPageBody .btn-breadcrumb .btn,
#alacerHotelSurroundPageBody #alacerBreadcrumbContainer .btn,
#alacerHotelSurroundPageBody .input-group-addon,
#alacerHotelSurroundPageBody .btn-xs {
	min-height: 0 !important;
	display: inline-block;
}


/* ---------- Form fields ---------- */
#alacerHotelSurroundPageBody #engineAreaContainer input.form-control,
#alacerHotelSurroundPageBody #engineAreaContainer select.form-control,
#alacerHotelSurroundPageBody #engineAreaContainer textarea.form-control,
#alacerHotelSurroundPageBody #engineAreaContainer input[type="text"],
#alacerHotelSurroundPageBody #engineAreaContainer input[type="email"],
#alacerHotelSurroundPageBody #engineAreaContainer input[type="tel"],
#alacerHotelSurroundPageBody #engineAreaContainer input[type="password"],
#alacerHotelSurroundPageBody #engineAreaContainer select,
#alacerHotelSurroundPageBody #engineAreaContainer textarea,
#alacerHotelSurroundPageBody .modal input.form-control {
	border-radius: 0 !important;
	border-color: var(--brand-line-strong) !important;
	background-color: var(--brand-paper) !important;
	box-shadow: none !important;
	color: var(--brand-ink);
}
#alacerHotelSurroundPageBody #engineAreaContainer input:focus,
#alacerHotelSurroundPageBody #engineAreaContainer select:focus,
#alacerHotelSurroundPageBody #engineAreaContainer textarea:focus,
#alacerHotelSurroundPageBody .modal input:focus {
	border-color: var(--brand-bronze) !important;
	box-shadow: 0 0 0 1px var(--brand-bronze) !important;
	outline: none !important;
}
#alacerHotelSurroundPageBody #engineAreaContainer .input-group-addon {
	border-radius: 0 !important;
	background-color: var(--brand-linen) !important;
	border-color: var(--brand-line-strong) !important;
	color: var(--brand-ink) !important;
}

/* Mandatory fields: the engine marks them with a red border (class "invalid") until they are filled in.
   That red-from-the-start border is DELIBERATE (it tells the guest which fields are mandatory): keep it, in the
   brand's required colour, over the brand form-field border above. Do not hide it until "touched". */
#alacerHotelSurroundPageBody #engineAreaContainer input.invalid,
#alacerHotelSurroundPageBody #engineAreaContainer select.invalid,
#alacerHotelSurroundPageBody #engineAreaContainer textarea.invalid,
#alacerHotelSurroundPageBody #engineAreaContainer .invalid > select,
#alacerHotelSurroundPageBody #engineAreaContainer .invalid > .fancyArrow,
#alacerHotelSurroundPageBody #engineAreaContainer .invalid select,
#alacerHotelSurroundPageBody #engineAreaContainer .invalid span.fancyArrow,
#alacerHotelSurroundPageBody #engineAreaContainer .invalidinput {
	border-color: #b3261e !important;
}

/* ---------- Dialogs ---------- */
#alacerHotelSurroundPageBody .modal-content,
#alacerHotelSurroundPageBody .bootstrap-dialog .modal-content {
	border-radius: 0 !important;
	border: 1px solid var(--brand-line) !important;
	box-shadow: 0 10px 40px rgba(29, 27, 25, 0.18) !important;
	background: var(--brand-paper);
}
#alacerHotelSurroundPageBody .modal-header {
	border-bottom-color: var(--brand-line) !important;
	background: var(--brand-paper) !important;
	color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .modal-footer {
	border-top-color: var(--brand-line) !important;
}
#alacerHotelSurroundPageBody .modal-backdrop.in {
	opacity: .6;
	background: var(--brand-ink);
}

/* Checkbox indicators */
#alacerHotelSurroundPageBody .controlIndicator {
	background-color: var(--brand-paper) !important;
	border: 1px solid var(--brand-line-strong) !important;
	border-radius: 0 !important;
}
#alacerHotelSurroundPageBody .control input:checked ~ .controlIndicator {
	background-color: var(--brand-linen) !important;
	border-color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .controlCheckbox .controlIndicator:after {
	border-color: var(--brand-ink) !important;
}

/* ---------- Disabled buttons ---------- */
#alacerHotelSurroundPageBody #engineAreaContainer .btn:disabled,
#alacerHotelSurroundPageBody #engineAreaContainer .btn[disabled],
#alacerHotelSurroundPageBody #engineAreaContainer .btn.disabled,
#alacerHotelSurroundPageBody #engineAreaContainer button:disabled {
	background-color: var(--brand-linen) !important;
	border-color: var(--brand-linen) !important;
	color: rgba(29, 27, 25, 0.45) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* image logos (when a logo image URL is used instead of inline SVG) */
#alacerHotelSurroundPageBody .brand-logo img {
	display: block;
	height: 56px;
	width: auto;
}
@media (max-width: 767.98px) {
	#alacerHotelSurroundPageBody .brand-logo img { height: 40px; }
}

/* ---------- Icon fonts: always win over the brand font ---------- */
#alacerHotelSurroundPageBody .fa,
#alacerHotelSurroundPageBody .fa::before,
#alacerHotelSurroundPageBody [class^="fa-"],
#alacerHotelSurroundPageBody [class*=" fa-"] {
	font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
}
#alacerHotelSurroundPageBody .glyphicon:not(.glyphicon-shopping-cart),
#alacerHotelSurroundPageBody .glyphicon:not(.glyphicon-shopping-cart)::before {
	font-family: "Glyphicons Halflings" !important;
}

/* ---------- Step indicator (shared design for rooms + vouchers) ---------- */
:root {
	--brand-steps-height: 48px;
	--brand-dark: #472917;
	--brand-accent: #75583d;
}

/* Login button: identical size on both engines */
#alacerHotelSurroundPageBody #headerBar .loginLink {
	display: inline-flex !important;
	align-items: center;
	height: 40px;
	padding: 0 18px !important;
	font-size: 13px !important;
	line-height: 1 !important;
}
#alacerHotelSurroundPageBody #headerBar .loginLink:empty {
	display: none !important;
}

/* Select arrows ("fancy" dropdown carets): a paper box that closes the select's border, ink caret, never the old grey */
#alacerHotelSurroundPageBody .fancyArrow {
	background-color: var(--brand-paper) !important;
	color: var(--brand-ink) !important;
	border: 1px solid var(--brand-line-strong) !important;
	border-left: 0 !important;
	box-sizing: border-box !important;
	pointer-events: none;
}
#alacerHotelSurroundPageBody .fancyArrow .fa,
#alacerHotelSurroundPageBody .fancyArrow i {
	color: var(--brand-ink) !important;
}

/* ---------- Accessibility layer (a11y.js): only visible to keyboard users ---------- */
#alacerHotelSurroundPageBody .brand-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
#alacerHotelSurroundPageBody .brand-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10000;
	padding: 10px 18px;
	background: var(--brand-ink);
	color: var(--brand-cream) !important;
	font-family: var(--brand-font);
	font-size: 14px;
	text-decoration: none;
}
#alacerHotelSurroundPageBody .brand-skip:focus {
	top: 12px;
}
/* a clear focus ring, shown for keyboard focus only (:focus-visible), never for mouse clicks */
#alacerHotelSurroundPageBody a:focus-visible,
#alacerHotelSurroundPageBody button:focus-visible,
#alacerHotelSurroundPageBody input:focus-visible,
#alacerHotelSurroundPageBody select:focus-visible,
#alacerHotelSurroundPageBody textarea:focus-visible,
#alacerHotelSurroundPageBody [tabindex]:focus-visible,
#alacerHotelSurroundPageBody [role="button"]:focus-visible {
	outline: 2px solid var(--brand-ink) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--brand-paper) !important;
}
#alacerHotelSurroundPageBody .alacerCalendarBody tbody td:focus-visible {
	outline-offset: -3px !important;
	box-shadow: inset 0 0 0 4px var(--brand-paper) !important;
}
/* elements the layer made focusable must look exactly as before when clicked with a mouse */
#alacerHotelSurroundPageBody [data-a11y-btn]:focus:not(:focus-visible),
#alacerHotelSurroundPageBody .alacerCalendarBody tbody td:focus:not(:focus-visible),
#alacerHotelSurroundPageBody a:not([href]):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
/* zoom is allowed again, so phones must not auto-zoom into small form fields when tapped (iOS zooms below 16px) */
@media (max-width: 767.98px) {
	#alacerHotelSurroundPageBody input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
	#alacerHotelSurroundPageBody select,
	#alacerHotelSurroundPageBody textarea {
		font-size: 16px !important;
	}
}
#alacerHotelSurroundPageBody .brand-step-heading:focus,
#alacerHotelSurroundPageBody [aria-modal="true"]:focus {
	outline: none !important;
}
/* SVG logos that set words in the brand fonts keep them */
#alacerHotelSurroundPageBody .brand-logo svg .logo-serif { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
#alacerHotelSurroundPageBody .brand-logo svg .logo-sans { font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

/* Summary: the small Edit (pencil) and Delete (bin) buttons were dark squares with dark icons. Outlined squares with an ink
   icon, ink fill and white icon on hover; delete turns the mandatory red on hover. */
#alacerHotelSurroundPageBody .editButton, #alacerHotelSurroundPageBody .deleteButton {
	background: var(--brand-paper) !important; border: 1px solid var(--brand-line-strong) !important; color: var(--brand-ink) !important;
	width: 40px; min-width: 40px; height: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 2px;
	display: inline-flex !important; align-items: center; justify-content: center; border-radius: 0 !important; box-shadow: none !important;
}
#alacerHotelSurroundPageBody .editButton .fa, #alacerHotelSurroundPageBody .deleteButton .fa { color: inherit !important; font-size: 14px !important; }
#alacerHotelSurroundPageBody .editButton:hover, #alacerHotelSurroundPageBody .editButton:focus-visible { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; }
#alacerHotelSurroundPageBody .deleteButton:hover, #alacerHotelSurroundPageBody .deleteButton:focus-visible { background: #b3261e !important; border-color: #b3261e !important; color: #fff !important; }

/* Your details: a required dropdown (County) got the engine's bright red #f00 border on its wrapper AND the brand red on the
   select itself, so it looked thicker and a different red. Only the select keeps the (deliberate) red. */
#alacerHotelSurroundPageBody drop-down.invalid, #alacerHotelSurroundPageBody .yourDetailsFieldInputDropdown.invalid { border: 0 !important; outline: 0 !important; }
/* Additional guest names: the engine sets 10px text in these boxes; same size as the other fields */
#alacerHotelSurroundPageBody .guestDetailsFieldInput, #alacerHotelSurroundPageBody .guestDetailsFieldInput::placeholder { font-size: 16px !important; }

/* Drop-downs (review 24 Oct): Safari draws native selects with rounded corners, its own arrows and its own height, so on
   the voucher / ticket details pages Title and County looked different from the text boxes. Plain selects drop the native
   look and get the text-box style with a simple chevron (the engine's own styled drop-downs with a .fancyArrow, the rooms
   occupancy drop-downs and the calendar month picker keep theirs). Autofill keeps the paper colour instead of yellow. */
html body#alacerHotelSurroundPageBody:not(#brand-sel) :is(#engineAreaContainer, #content, .modal) select:not([multiple]):not(availability-rooms-details select):not(#singleCalendar select):not(:has(+ .fancyArrow)) {
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border-radius: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
	padding-right: 38px !important; cursor: pointer;
}
html body#alacerHotelSurroundPageBody :is(#engineAreaContainer, #content, .modal) :is(input, select, textarea):-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--brand-paper) inset !important; -webkit-text-fill-color: var(--brand-ink) !important;
}

/* Entry fields one height everywhere (review 24 Oct): text boxes and drop-downs 44px, like the buttons. Search boxes that sit
   inside their own bordered box, the rooms occupancy counters and the calendar pickers keep their own sizing. */
html body#alacerHotelSurroundPageBody:not(#brand-fh) :is(#engineAreaContainer, #content, .modal) :is(input:is([type=text], [type=email], [type=tel], [type=password], :not([type])), select:not([multiple])):not(availability-rooms-details *):not(.ui-datepicker *):not([class*=SearchBox] *):not([class*=searchBox] *) {
	height: 44px !important; min-height: 44px !important; box-sizing: border-box !important;
}

/* Engine demo leftovers in the clean *BootstrapWrapperTemplate wrappers (St Michael's Manor, 29 Oct 2026): the 'Welcome to the
   Alacer' Cambridge banner, the spacer blocks under the floating header bar and the 'Phone Footer' social-icons bar. */
#headerBar .headerLogoArea,
#headerBar > .row-fluid:has(> .headerLogoArea),
#headerBar > div[style*="height:"]:empty,
#footerBar:has(img[src*="Social_Icons"]) { display: none !important; }

/* Footer sits at the bottom of the screen when the page is short (Rob 29 Oct 2026: Safari showed it floating mid-screen with
   white below). The page is a full-height column and the footer takes the spare space above it; the gap above the footer
   on normal pages comes from the content's bottom padding instead of the footer's top margin. */
#alacerHotelSurroundPageBody { min-height: 100vh; min-height: 100dvh; display: flex !important; flex-direction: column; }
#alacerHotelSurroundPageBody > * { flex-shrink: 0; }
#alacerHotelSurroundPageBody > [role="contentinfo"], #alacerHotelSurroundPageBody > footer, #alacerHotelSurroundPageBody > .brand-footer { margin-top: auto !important; }
#alacerHotelSurroundPageBody > :is(div, main, section):has(#engineAreaContainer, #engineArea) { padding-bottom: 3rem; }
/* the engine column takes the spare height, so any footer (custom footers such as Rothay's .rm-footer have no footer tag or
   .brand-footer class) sits on the bottom of the screen on short pages (Rothay 29 Oct) */
#alacerHotelSurroundPageBody > :is(div, main, section):has(#engineAreaContainer, #engineArea) { flex: 1 0 auto; }
/* (build z) also <main>/<section>: Moddershall's clean wrapper puts the engine in <main class="uneven">, so nothing grew and the
   footer wasn't pinned on short pages */


/* =====================================================================
   Engine theme — Voucher / shop engine specifics
   ===================================================================== */
#alacerHotelSurroundPageBody voucherbookingapp,
#alacerHotelSurroundPageBody #engineArea,
#alacerHotelSurroundPageBody #engineAreaContainer {
	background-color: transparent !important;
	color: var(--brand-ink);
}

/* Top bar (search + category menu) */
#alacerHotelSurroundPageBody .page1TopBar,
#alacerHotelSurroundPageBody .page1SearchBoxContainer,
#alacerHotelSurroundPageBody .page1TextMenuContainer,
#alacerHotelSurroundPageBody .page1TitlesMenuContainer {
	background-color: var(--brand-paper) !important;
	box-shadow: none !important;
}
#alacerHotelSurroundPageBody .page1TopBar {
	border: 1px solid var(--brand-line) !important;
}
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxInputWrapper {
	border: 1px solid var(--brand-line-strong) !important;
	border-radius: 0 !important;
	background: var(--brand-paper) !important;
	min-height: 44px; display: flex !important; align-items: center;   /* 44px like every other field (review 24 Oct) */
}
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxInput,
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxIcon,
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxInputMob,
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1SearchBoxIconMob,
#alacerHotelSurroundPageBody .page1SearchBoxInputWrapper .glyphicon {
	border-radius: 0 !important;
	background: var(--brand-paper) !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--brand-ink) !important;
}

/* Category tiles */
#alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer,
#alacerHotelSurroundPageBody .page1TitlesMenuItemContainer {
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: var(--brand-linen) !important;
	overflow: hidden;
}
#alacerHotelSurroundPageBody .page1TitlesMenuItemContainer {
	transition: opacity .25s ease;
}
#alacerHotelSurroundPageBody .page1TitlesMenuItemContainer:hover {
	opacity: .92;
}
/* category name: the same treatment as the tickets engine's category cards (review 24 Oct): heading font in white over a
   soft dark fade along the bottom of the picture, instead of a small dark tag */
#alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer { position: relative; }
#alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer img, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer img { transition: transform .6s ease; }
#alacerHotelSurroundPageBody .filterVoucherCategoryImageContainer:hover img, #alacerHotelSurroundPageBody .page1TitlesMenuItemContainer:hover img { transform: scale(1.03); }
html body#alacerHotelSurroundPageBody:not(#x):not(#y) .page1TilesMenuTitle {
	position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important;
	border-radius: 0 !important; background: linear-gradient(to bottom, rgba(29, 27, 25, 0), rgba(29, 27, 25, .82)) !important; color: #fff !important;
	padding: 56px 22px 18px !important; margin: 0 !important; text-align: left !important; text-transform: none !important;
	font-family: var(--brand-heading-font) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: .01em !important;
	font-size-adjust: none;
}
@media (max-width: 767px) { html body#alacerHotelSurroundPageBody:not(#x):not(#y) .page1TilesMenuTitle { font-size: 22px !important; padding: 44px 16px 14px !important; } }
/* the tiles sit on the page like the tickets engine's, not inside a white panel */
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TitlesMenuContainer { background-color: transparent !important; }

/* Category dropdown items (mobile + desktop text menu) */
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TextMenuItemMob,
#alacerHotelSurroundPageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob {
	background-color: var(--brand-ink) !important;
	color: var(--brand-cream) !important;
}
#alacerHotelSurroundPageBody .voucherCategoryDisplay .page1TextMenuItemMob:hover,
#alacerHotelSurroundPageBody .voucherCategoryDisplay #page1TextMenuSubHeaderMob:hover {
	background-color: var(--brand-corten) !important;
	color: var(--brand-cream) !important;
}

/* Voucher cards */
#alacerHotelSurroundPageBody vouchercard .card-shadow,
#alacerHotelSurroundPageBody .card-shadow {
	box-shadow: none !important;
	border: 1px solid var(--brand-line) !important;
	border-radius: 0 !important;
}
#alacerHotelSurroundPageBody vouchercard img {
	border-radius: 0 !important;
}

/* Buttons (UserVoucher.css uses the --button* variables set in :root) */
#alacerHotelSurroundPageBody .btn.commonButton,
#alacerHotelSurroundPageBody .commonButton,
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel,
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket,
#alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu,
#alacerHotelSurroundPageBody #page3 .deskcheckout,
#alacerHotelSurroundPageBody #page3 .deskback,
#alacerHotelSurroundPageBody #page3 .mobback,
#alacerHotelSurroundPageBody #page3 .mobcheckout,
#alacerHotelSurroundPageBody #page4 .deskcheckout,
#alacerHotelSurroundPageBody #page4 .deskback,
#alacerHotelSurroundPageBody #page4 .mobcheckout,
#alacerHotelSurroundPageBody #page4 .mobback,
#alacerHotelSurroundPageBody #page45ContinueBtn,
#alacerHotelSurroundPageBody #page45MethodBtn,
#alacerHotelSurroundPageBody #mobPage45MethodBtn,
#alacerHotelSurroundPageBody #mobPage45ContinueBtn {
	background-color: var(--brand-ink) !important;
	color: var(--brand-cream) !important;
	border: 1px solid var(--brand-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
#alacerHotelSurroundPageBody .btn.commonButton:hover,
#alacerHotelSurroundPageBody .commonButton:hover,
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneAddToBasketBtnLabel:hover,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:hover,
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsAddToBasket:hover,
#alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu:hover,
#alacerHotelSurroundPageBody #page3 .deskcheckout:hover,
#alacerHotelSurroundPageBody #page3 .deskback:hover,
#alacerHotelSurroundPageBody #page3 .mobback:hover,
#alacerHotelSurroundPageBody #page3 .mobcheckout:hover,
#alacerHotelSurroundPageBody #page4 .deskcheckout:hover,
#alacerHotelSurroundPageBody #page4 .deskback:hover,
#alacerHotelSurroundPageBody #page4 .mobcheckout:hover,
#alacerHotelSurroundPageBody #page4 .mobback:hover,
#alacerHotelSurroundPageBody #page45ContinueBtn:hover,
#alacerHotelSurroundPageBody #page45MethodBtn:hover,
#alacerHotelSurroundPageBody #mobPage45MethodBtn:hover,
#alacerHotelSurroundPageBody #mobPage45ContinueBtn:hover {
	background-color: var(--brand-corten) !important;
	border-color: var(--brand-corten) !important;
	color: var(--brand-cream) !important;
}

/* Basket / header icons */
#alacerHotelSurroundPageBody #headerBar .glyphicon,
#alacerHotelSurroundPageBody .basketIcon,
#alacerHotelSurroundPageBody .menuIcon,
#alacerHotelSurroundPageBody .userIcon {
	color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .basketIconTotalItemsCount {
	background: var(--brand-bronze) !important;
	color: #ffffff !important;
}

/* Toast */
#alacerHotelSurroundPageBody #basketInfoMessage {
	background: var(--brand-ink) !important;
	color: var(--brand-cream) !important;
	border-radius: 0 !important;
	letter-spacing: 0.5px;
}


/* "More information" — a secondary button at every width (it was a small text link on desktop and a button on phones;
   Moddershall review 27 Oct: the button reads as clickable, the link was easy to miss) */
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px;   /* house 44px (was 40; Washingborough audit 29 Oct) */
	background: #fefdfd !important;
	color: #1d1b19 !important;
	border: 1px solid #fefdfd !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 8px 18px !important;
	margin: 4px 0 0 !important;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel:hover,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel:hover {
	background: var(--brand-ink) !important;
	color: var(--brand-cream) !important;
	border-color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel .fa,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel .fa {
	font-size: 10px !important;
	margin-left: 6px;
	color: inherit !important;
}

/* Voucher card */
#alacerHotelSurroundPageBody .voucherImg,
#alacerHotelSurroundPageBody .voucherImg img {
	border-radius: 0 !important;
}
#alacerHotelSurroundPageBody .voucherDetailPaneVoucherTitle,
#alacerHotelSurroundPageBody .voucherDetailPaneVoucherPrice {
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	color: #111111 !important;
}

/* Refine bar (search, sort, budget) */
#alacerHotelSurroundPageBody .refineVoucherT,
#alacerHotelSurroundPageBody #page2SearachFieldInput {
	border-radius: 0 !important;
}
#alacerHotelSurroundPageBody .refineVoucherT {
	border-color: var(--brand-line-strong) !important;
	/* the 44px house field must sit inside its box (Manor House's old theme fixed the box at 38px: the field spilled out, 29 Oct) */
	height: auto !important; min-height: 44px; overflow: hidden; background: var(--brand-paper, #fff) !important;
}
#alacerHotelSurroundPageBody .refineVoucherT #page2SearachFieldInput { background: transparent !important; }
/* Budget slider: ONE design in every engine (26 Oct, Rob) — a linen band, the chosen range in sand, the two ends as thin ink
   bars (no circles), prices in ink tags. The spa/treatment/class engines' jQuery UI slider matches (brand_leisure.css).
   Some engine versions draw round handles; these rules set the shape, not just the colours. */
#alacerHotelSurroundPageBody .slider.slider-horizontal { height: 32px !important; background: transparent !important; box-shadow: none !important; top: 0 !important; vertical-align: middle; }
#alacerHotelSurroundPageBody .slider .slider-track { height: 32px !important; top: 0 !important; margin-top: 0 !important; background: var(--brand-linen) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; }
#alacerHotelSurroundPageBody .slider .slider-selection { background: var(--brand-sand) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; }
#alacerHotelSurroundPageBody .slider .slider-track-high, #alacerHotelSurroundPageBody .slider .slider-track-low { background: transparent !important; border: 0 !important; }
#alacerHotelSurroundPageBody .slider .slider-selection, #alacerHotelSurroundPageBody .slider .slider-track-low, #alacerHotelSurroundPageBody .slider .slider-track-high { top: 0 !important; height: 100% !important; border: 0 !important; }
#alacerHotelSurroundPageBody .slider .slider-handle, #alacerHotelSurroundPageBody .slider.slider-horizontal .slider-handle { width: 4px !important; height: 42px !important; top: -5px !important; margin-top: 0 !important; margin-left: -2px !important; background: var(--brand-slider-handle) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: ew-resize; }
#alacerHotelSurroundPageBody .slider .slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; }
#alacerHotelSurroundPageBody .slider .tooltip.bottom { top: 100% !important; margin-top: 8px !important; }
#alacerHotelSurroundPageBody .slider .tooltip-inner {
	border-radius: 0 !important;
	background: var(--brand-ink) !important;
	color: var(--brand-cream) !important;
	font-size: 12px !important;
	letter-spacing: 0.5px;
}
#alacerHotelSurroundPageBody .slider .tooltip.bottom .tooltip-arrow {
	border-bottom-color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .slider .tooltip {
	font-size: 12px !important;
	opacity: 1 !important;
}
/* The overall min/max labels sit under the handles and clash with them; the tags below show the chosen range */
#alacerHotelSurroundPageBody .slider .stats {
	display: none !important;
}

/* Checkout breadcrumb: refined text steps (same design as the rooms engine) */
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	height: var(--brand-steps-height);
	margin: 0 !important;
	padding: 0 22px !important;
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a {
	position: relative;
	padding: 4px 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1.4px !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a:not(.current):not(.inactive):hover {
	color: var(--brand-accent) !important;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a.current {
	color: var(--brand-dark) !important;
	box-shadow: inset 0 -1px 0 var(--brand-dark);
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a.inactive {
	color: #8a7d6b !important;   /* muted, not muted_light: future steps still need 4.5:1 contrast (as the rooms engine, 29 Oct) */
	cursor: default;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a + a {
	margin-left: 34px !important;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a::before {
	content: none !important;
}
#alacerHotelSurroundPageBody .breadCrumbGroup .breadcrumb a + a::before {
	content: "\203A" !important;
	position: absolute;
	left: -21px;
	top: 50%;
	transform: translateY(-55%);
	padding: 0 !important;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--brand-sand) !important;
	pointer-events: none;
}

/* Login sits on the left, basket on the right (rooms engine matches) */
#alacerHotelSurroundPageBody #headerBar .headerDesktop .loginRegisterLink,
#alacerHotelSurroundPageBody #headerBar .headerTabTop .loginRegisterLink {
	float: left !important;
	margin-left: 0 !important;
}

/* Voucher "More information" dialog */
#alacerHotelSurroundPageBody voucherdetailsdialog .modal-content {
	border-top: 4px solid var(--brand-corten) !important;
}
#alacerHotelSurroundPageBody voucherdetailsdialog .modalHeaderTexTitleLabel,
#alacerHotelSurroundPageBody voucherdetailsdialog .modalHeaderTextPriceLabel {
	font-weight: 500 !important;
	font-size: 22px !important;
	letter-spacing: -0.01em;
	color: #111111 !important;
}
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOverviewTitle,
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsTitle,
#alacerHotelSurroundPageBody voucherdetailsdialog label.title {
	font-weight: 500 !important;
	font-size: 12px !important;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--brand-bronze) !important;
}
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOverviewInfo,
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherOptionsDesc {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* ---------- Basket (header) ---------- */
#alacerHotelSurroundPageBody .basketModule.basketWrapper {
	background: transparent !important;
	line-height: normal !important;
	height: auto !important;
	margin: 0 0 0 16px !important;
}
#alacerHotelSurroundPageBody .basketModule .basket.basketDropdown {
	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	height: 40px;
	padding: 0 16px !important;
	line-height: 1 !important;
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line-strong) !important;
	cursor: pointer;
	transition: border-color .2s ease;
}
#alacerHotelSurroundPageBody .basketModule .basket.basketDropdown:hover {
	border-color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .basketModule .basketCounts,
#alacerHotelSurroundPageBody .basketModule .basketPrice {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 !important;
	line-height: 1 !important;
	float: none !important;
}
#alacerHotelSurroundPageBody .basketModule .basketPrice {
	padding-left: 14px !important;
	border-left: 1px solid var(--brand-line-strong);
	height: 18px;
}
#alacerHotelSurroundPageBody .basketModule .basketTotalItemsCount,
#alacerHotelSurroundPageBody .basketModule .basketTotalItemsPrice {
	display: inline !important;
	float: none !important;
	margin: 0 !important;
	line-height: 1 !important;
	height: auto !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--brand-ink) !important;
	background: transparent !important;
}
/* line-art bag replaces the Bootstrap trolley glyph (header + mobile icons) */
#alacerHotelSurroundPageBody .glyphicon-shopping-cart {
	width: 20px !important;
	height: 20px !important;
	font-size: 0 !important;
	line-height: 0 !important;
	top: 0 !important;
	vertical-align: middle;
	background-color: var(--brand-ink) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1%2012.5a1%201%200%200%201-1%20.9H7a1%201%200%200%201-1-.9L5%208z%22/%3E%3Cpath%20d%3D%22M9%2010V6.5a3%203%200%200%201%206%200V10%22/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208h14l-1%2012.5a1%201%200%200%201-1%20.9H7a1%201%200%200%201-1-.9L5%208z%22/%3E%3Cpath%20d%3D%22M9%2010V6.5a3%203%200%200%201%206%200V10%22/%3E%3C/svg%3E") center / contain no-repeat;
}
#alacerHotelSurroundPageBody .glyphicon-shopping-cart::before {
	content: none !important;
}
/* line Login and basket up on one row, same 40px height */
#alacerHotelSurroundPageBody .basketModule.basketWrapper,
#alacerHotelSurroundPageBody #headerBar .loginRegisterLink {
	height: 77px !important;
	display: flex !important;
	align-items: center;
	line-height: normal !important;
}
#alacerHotelSurroundPageBody #headerBar .loginRegisterLink .loginLink {
	display: inline-flex !important;
	align-items: center;
	height: 40px;
	padding: 0 18px !important;
	line-height: 1 !important;
}
#alacerHotelSurroundPageBody #headerBar .loginRegisterLink .loginLink:empty {
	display: none !important;
}
/* high-end treatment: no box, nav-style type, hairline underline on hover */
#alacerHotelSurroundPageBody .basketModule .basket.basketDropdown {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	padding: 0 2px !important;
	height: 32px;
	gap: 16px;
	transition: border-color .25s ease;
}
#alacerHotelSurroundPageBody .basketModule .basket.basketDropdown:hover {
	border-bottom-color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .basketModule .basketCounts {
	gap: 10px;
}
#alacerHotelSurroundPageBody .basketModule .basketTotalItemsCount,
#alacerHotelSurroundPageBody .basketModule .basketTotalItemsPrice {
	font-size: 12px !important;
	letter-spacing: 1.6px;
}
#alacerHotelSurroundPageBody .basketModule .basketTotalItemsPrice {
	color: var(--brand-bronze) !important;
}
#alacerHotelSurroundPageBody .basketModule .basketPrice {
	border-left-color: rgba(29, 27, 25, 0.2);
	padding-left: 16px !important;
	height: 14px;
}
#alacerHotelSurroundPageBody .basketModule .glyphicon-shopping-cart {
	width: 19px !important;
	height: 19px !important;
}
/* basket dropdown: paper panel below the basket, hairline + soft shadow */
#alacerHotelSurroundPageBody .basketModule .basketItemsWrapper {
	top: 62px !important;
	right: 0 !important;
	left: auto !important;
	width: 320px !important;
	background: var(--brand-paper) !important;
	border: 1px solid var(--brand-line) !important;
	border-top: 2px solid var(--brand-corten) !important;
	box-shadow: 0 14px 40px rgba(29, 27, 25, 0.14) !important;
	text-align: left !important;
	line-height: 1.4 !important;
}
#alacerHotelSurroundPageBody .basketModule .basketItems {
	background: transparent !important;
	margin: 0 !important;
	padding: 6px 18px !important;
	list-style: none;
}
#alacerHotelSurroundPageBody .basketModule .basketItem {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0 !important;
	border-bottom: 1px solid var(--brand-line);
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody .basketModule .basketItem:last-child {
	border-bottom: 0;
}
#alacerHotelSurroundPageBody .basketModule .basketItem > div {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
#alacerHotelSurroundPageBody .basketModule .basketItem::before,
#alacerHotelSurroundPageBody .basketModule .basketItem::after {
	display: none !important;
}
#alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu {
	display: block !important;
	margin: 0 18px 18px !important;
	padding: 12px 18px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1.6px !important;
	line-height: 1.2 !important;
	text-align: center !important;
}
/* basket sits flush right, no dead space on the left; button stays inside panel */
#alacerHotelSurroundPageBody .basketModule.basketWrapper {
	justify-content: flex-end;
	width: auto !important;
	min-width: 0 !important;
}
#alacerHotelSurroundPageBody .basketWrapper .basketItemsWrapper .basketCheckOutMenu {
	width: auto !important;
	box-sizing: border-box !important;
}
/* line Login / basket up with the content edges below */
#alacerHotelSurroundPageBody #headerBar .headerDesktop .headerMenu,
#alacerHotelSurroundPageBody #headerBar .headerTabTop .headerMenu {
	padding-left: 45px !important;
	padding-right: 45px !important;
}

/* Voucher cards: clean 5-line description with ellipsis, titles can wrap */
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherInfo {
	height: auto !important;
	max-height: none !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	font-size: 15px !important;
	line-height: 1.5 !important;
	margin-bottom: 14px !important;
	color: var(--brand-ink) !important;
}
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherInfo * {
	font-size: 15px !important;
	line-height: 1.5 !important;
	display: inline;
}
#alacerHotelSurroundPageBody vouchercard article.voucherTitle {
	height: auto !important;
	overflow: visible !important;
	margin-bottom: 8px !important;
}
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherTitle {
	float: none !important;
	width: auto !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
}
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherPrice {
	font-size: 18px !important;
	margin-bottom: 4px;
}
#alacerHotelSurroundPageBody vouchercard article.voucherTitle,
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneVoucherTitle {
	text-align: left !important;
}

/* Checkbox ticks: UserVoucher.css draws a full square border on the marketing tick; keep it a proper tick */
#alacerHotelSurroundPageBody #yourDetails #marketingCheckBoxTick::after,
#alacerHotelSurroundPageBody delivery-details .combineCheckBoxTick::after {
	border-style: solid !important;
	border-color: var(--brand-ink) !important;
	border-width: 0 2px 2px 0 !important;
}

/* Basket edit / delete (review 24 Oct): the same outlined squares as the rooms summary (ink icon; ink fill on hover for
   edit, the mandatory red for delete) instead of solid dark blocks */
#alacerHotelSurroundPageBody .glyphicon.content-editIcon,
#alacerHotelSurroundPageBody .glyphicon.content-deleteIcon,
#alacerHotelSurroundPageBody .glyphicon.foot-deleteIcon {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin: 0 2px; top: 0 !important; vertical-align: middle;
	background: transparent !important; border: 1px solid var(--brand-line-strong) !important; border-radius: 0 !important;
	color: var(--brand-ink) !important; font-size: 0 !important; line-height: 1 !important; cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
#alacerHotelSurroundPageBody .glyphicon.content-editIcon:is(:hover, :focus-visible) { background: var(--brand-ink) !important; border-color: var(--brand-ink) !important; color: #fff !important; }
#alacerHotelSurroundPageBody .glyphicon:is(.content-deleteIcon, .foot-deleteIcon):is(:hover, :focus-visible) { background: #b3261e !important; border-color: #b3261e !important; color: #fff !important; }
#alacerHotelSurroundPageBody .glyphicon.content-editIcon::before,
#alacerHotelSurroundPageBody .glyphicon.content-deleteIcon::before,
#alacerHotelSurroundPageBody .glyphicon.foot-deleteIcon::before {
	font-family: FontAwesome, "Font Awesome 5 Free" !important; font-size: 14px; font-weight: normal; line-height: 1; color: inherit !important;
}
#alacerHotelSurroundPageBody .glyphicon.content-editIcon::before { content: "\f040" !important; }
#alacerHotelSurroundPageBody .glyphicon.content-deleteIcon::before,
#alacerHotelSurroundPageBody .glyphicon.foot-deleteIcon::before { content: "\f1f8" !important; }

/* Some wrappers split the header bar into an empty half + a half holding login/basket:
   drop the empty half so Login can sit on the content's left edge and the basket on its right */
#alacerHotelSurroundPageBody #headerBar .headerBanner > div:not(.headerMenu) {
	display: none !important;
}
#alacerHotelSurroundPageBody #headerBar .headerBanner > .headerMenu {
	width: 100% !important;
	float: none !important;
}

/* More information dialog: terms text at the same size as the overview */
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherTermsInfo,
#alacerHotelSurroundPageBody voucherdetailsdialog .voucherTermsInfo * {
	font-size: 14px !important;
	line-height: 1.55 !important;
}

/* Your Details: labels line up with their input boxes */
#alacerHotelSurroundPageBody .yourDetailsFieldLabel {
	padding-left: 0 !important;
}


/* voucher cards always on paper (some sites' own CSS tinted them) */
#alacerHotelSurroundPageBody vouchercard .voucherCardContainerStyle {
	background-color: var(--brand-paper) !important;
}
/* Holding picture wherever a picture is missing (toolkit default): vouchers, voucher categories, ticket categories and
   events. The engines set pictures as an inline background-image; elements with no url (or a "null" one) get the brand
   placeholder, so real pictures always show and replace it as soon as the site adds one. While a picture loads the
   panel shows the soft colour. */
#alacerHotelSurroundPageBody vouchercard .voucherImg { background-color: var(--brand-sand) !important; }
#alacerHotelSurroundPageBody :is(vouchercard .voucherImg, .filterVoucherCategoryImage, .TicketCategoryCard, .eventImage, .eventImageMobile, .eventDetailsImage, .modalEventImage):is(:not([style*="url("]), [style*="null"], [style*="undefined"]) {
	background: #472917 url("../../BrandTheme/img/RSB2026_placeholder.svg") center / cover no-repeat !important;
}
/* The voucher engine writes a picture address for every category even when it has no picture
   (.../VoucherCategories/<id>/1.jpg returns 404), so the rule above never matches and the tile showed blank
   (Manor Greasby "Afternoon Tea", 30 Oct). The holding picture sits on the container behind the picture instead:
   a real picture covers it, a missing one lets it show through. */
html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .filterVoucherCategoryImageContainer { background: #472917 url("../../BrandTheme/img/RSB2026_placeholder.svg") center / cover no-repeat !important; }
html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .filterVoucherCategoryImage[style*="url("] { background-color: transparent !important; }
/* Events the same way (31 Oct, Inn On The Lake "A Salute to Elvis"): the tickets engine writes an Img/Event address for
   every event, and one with no picture returns a page instead of an image, so the event showed an empty panel. The
   holding picture sits on .eventImageContainer behind the event's own picture. */
html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .eventImageContainer { background: #472917 url("../../BrandTheme/img/RSB2026_placeholder.svg") center / cover no-repeat !important; background-clip: content-box !important; background-origin: content-box !important; }
html body#alacerHotelSurroundPageBody:not(#ph1):not(#ph2) .eventImageContainer > :is(.eventImage, .eventImageMobile)[style*="url("] { background-color: transparent !important; }

/* ---------- checkout forms (vouchers and tickets share them) ---------- */
#alacerHotelSurroundPageBody [class*="yourDetailsField"] input:not([type=checkbox]):not([type=radio]),
#alacerHotelSurroundPageBody [class*="yourDetailsField"] select {
	height: 44px !important; border-radius: 0 !important; background: #fff !important; padding: 0 12px !important; font-size: 15px !important; color: var(--brand-ink) !important; box-shadow: none !important;
}
#alacerHotelSurroundPageBody [class*="yourDetailsField"] input:focus, #alacerHotelSurroundPageBody [class*="yourDetailsField"] select:focus { border-color: var(--brand-ink) !important; outline: 2px solid rgba(29, 27, 25, .12); outline-offset: 0; }
/* checkout steps: the progress links in small capitals, the page heading in the serif (in the heading colour, as on the
   other pages; it was ink - Washingborough 29 Oct) */
html body#alacerHotelSurroundPageBody:not(#x):not(#y) a.breadcrumbLink:not(.fa) {
	font-family: var(--brand-font) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important;
	text-transform: uppercase !important; text-decoration: none !important; color: var(--brand-muted) !important;
}
html body#alacerHotelSurroundPageBody:not(#x):not(#y) .pageHeading:not(.fa) {
	font-family: var(--brand-heading-font) !important; font-size: 32px !important; font-weight: 400 !important; color: #111111 !important;
	text-transform: none !important; letter-spacing: 0 !important; margin: 10px 0 18px !important; font-size-adjust: none;
}
/* buttons at the foot of the checkout steps: one height, a gap between them */
#alacerHotelSurroundPageBody .continueShoppingTextTransitionButton,
#alacerHotelSurroundPageBody .deliveryMethodsTextTransitionButton,
#alacerHotelSurroundPageBody [class*="TextTransitionButton"] {
	min-height: 44px !important; padding: 0 24px !important; border-radius: 0 !important; margin-left: 10px !important;
	font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 44px !important;
}

/* Basket bar (basket_bar.js, vouchers + tickets): fixed to the bottom once the header basket is out of sight */
html body .brand-basket-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	background: var(--brand-ink); color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.18);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); animation: brand-basket-in .25s ease-out;
}
html body .brand-basket-bar[hidden] { display: none !important; }
html body .brand-basket-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html body .brand-basket-title { font-size: 16px; letter-spacing: .04em; color: #fff; line-height: 1.3; }
html body .brand-basket-sub { font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.4; margin-top: 2px; }
html body .brand-basket-go {
	font-family: var(--brand-font) !important; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
	min-height: 44px; padding: 0 26px; border-radius: 0; cursor: pointer; flex: 0 0 auto;
	background: var(--brand-paper); color: var(--brand-ink); border: 1px solid var(--brand-paper);
}
html body .brand-basket-go:hover { background: var(--brand-sand); border-color: var(--brand-sand); }
html body .brand-basket-bar.is-pulse { animation: brand-basket-pulse .9s ease-out; }
@keyframes brand-basket-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes brand-basket-pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 27, 25, .55); } 100% { box-shadow: 0 0 0 18px rgba(29, 27, 25, 0); } }
html.brand-basket-bar-on body { padding-bottom: 76px !important; }
@media (max-width: 600px) { html body .brand-basket-title { font-size: 14px; } html body .brand-basket-go { padding: 0 16px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { html body .brand-basket-bar, html body .brand-basket-bar.is-pulse { animation: none; } }

/* Voucher cards: price, Add to basket and More information pinned to the bottom of each card, so they line up across a row
   whatever the length of the name and description */
#alacerHotelSurroundPageBody .voucherCardContainerStyle > .voucherDetailPaneParent { flex: 1 1 auto; display: flex; flex-direction: column; }
#alacerHotelSurroundPageBody .voucherDetailPaneParent > .voucherDetailPane { flex: 1 1 auto; display: flex; flex-direction: column; }
#alacerHotelSurroundPageBody .voucherDetailPane > .voucherDetailPaneVoucherInfo + article { margin-top: auto; }

/* Voucher pop-up on phones: the title and the price were floated (left / right) and never cleared, so the overview text ran
   down beside the price in a narrow column with white space on the right (Moddershall review 27 Oct). Title, then price,
   then the full-width text. */
@media (max-width: 767px) {
	#alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
	#alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .voucherTitleItem { float: none !important; width: auto !important; max-width: 100%; text-align: left !important; }
	#alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextPriceLabel { display: inline-flex !important; align-items: baseline; gap: 6px; }
	#alacerHotelSurroundPageBody .voucherDetailsDialog article.voucherTitle .mobModalHeaderTextFromLabel { display: inline !important; }
	#alacerHotelSurroundPageBody .voucherDetailsDialog .modal-body > article { clear: both; }
	#alacerHotelSurroundPageBody .voucherDetailsDialog .modal-body .info { width: auto !important; }
}

/* category picker in the search bar ("Gift Vouchers" + chevron): was a 29px tap target; 44px like every other control (audit 28 Oct, Douneside) */
#alacerHotelSurroundPageBody .voucherCategoryTitle { min-height: 44px !important; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
#alacerHotelSurroundPageBody #engineAreaContainer { min-height: clamp(160px, calc(100vh - 520px), 380px); }   /* laptop screens: never more than the room left by the header and footer (Manor House tickets 29 Oct);  footer stays put while the vouchers load (audit 28 Oct: layout shift 0.3); capped at 520px (bar + a row of tiles) so short pages don't leave a gap above the footer on big screens (St Michael's 29 Oct) */

/* Dark header only (generated; empty for light headers): login/basket row stays in the band and takes the band colours.
   Rooms and vouchers only: the ticket wrapper keeps its row below the band, on the page colour. */
html body#alacerHotelSurroundPageBody #headerBar .headerDesktop.sticky, html body#alacerHotelSurroundPageBody #headerBar .headerBanner.sticky,
html body#alacerHotelSurroundPageBody #headerBar .sticky { position: relative !important; top: auto !important; left: auto; right: auto; }


/* phone search box on the voucher landing page was 35px (house standard 44px; St Michael's audit 29 Oct 2026) */
#alacerHotelSurroundPageBody .page1SearchBoxInputMob { height: 44px !important; min-height: 44px !important; }

/* ---------- Older voucher engine (St Michael's 29 Oct 2026) ----------
   Landing page: categories in a boxed left sidebar (no .page1TopBar) -> a slim top bar like the newer engine, photo tiles in a grid.
   List page ("tall" display size): .voucherTile cards stacked full width -> a 3/2/1-column grid of cards matching the newer engine. */
#alacerHotelSurroundPageBody article.voucherCategoryDisplay > section.leftSection:not(.page1TopBar) {
	float: none !important; width: 100% !important; display: flex !important; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 12px 32px; padding: 10px 0 !important; margin: 0 0 28px !important; background: transparent !important;
	border: 0 !important; border-top: 1px solid rgba(29, 27, 25, 0.12) !important; border-bottom: 1px solid rgba(29, 27, 25, 0.12) !important; box-shadow: none !important;
}
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer,
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer {
	width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; float: none !important;
}
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1SearchBoxContainer { flex: 0 1 300px; }
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 28px; }
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) #page1TextMenuHeader { display: none !important; }
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) > .page1TextMenuContainer > div { width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) .page1TextMenuItem {
	display: inline-block; padding: 13px 0 !important; font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--brand-ink) !important;
	border-bottom: 1px solid transparent;
}
#alacerHotelSurroundPageBody section.leftSection:not(.page1TopBar) .page1TextMenuItem:hover { border-bottom-color: var(--brand-ink); }
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) > section.rightSection {
	float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
}
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important;
}
/* the clearfix ::before/::after would take the first grid cells */
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::before,
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer::after,
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile)::before,
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile)::after { display: none !important; }
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .filterVoucherCategoryImageContainer { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
#alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuItemContainer { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; padding: 0 !important; }
@media (max-width: 991.98px) { #alacerHotelSurroundPageBody article.voucherCategoryDisplay:has(> section.leftSection:not(.page1TopBar)) .page1TitlesMenuContainer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 24px; }
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard,
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard > section,
#alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) vouchercard > section > div { display: block; height: 100%; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile {
	width: 100% !important; height: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column; padding: 0 !important;
	background: var(--brand-paper, #fff) !important; border: 1px solid rgba(29, 27, 25, 0.12) !important; box-shadow: none !important; border-radius: 0 !important;
}
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherImg { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; background-size: cover !important; background-position: center !important; border-radius: 0 !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherImg .glass { height: 100% !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherTitle { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 22px 4px !important; height: auto !important; margin: 0 !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherTitleItem {
	height: auto !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; line-height: 1.3 !important;
	font-family: var(--brand-heading-font) !important; font-size: 19px !important; font-weight: 400 !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--brand-ink) !important; text-align: left !important;
}
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherTitleItem.voucherPriceItem { font-family: var(--brand-font) !important; font-size: 16px !important; font-weight: 500 !important; white-space: nowrap; text-align: right !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu { margin-top: auto !important; padding: 18px 22px 22px !important; display: flex !important; flex-direction: column-reverse; gap: 10px; height: auto !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .btn { width: 100% !important; margin: 0 !important; float: none !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn { background: var(--brand-paper, #fff) !important; color: var(--brand-ink) !important; border: 1px solid var(--brand-ink) !important; }
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:hover,
#alacerHotelSurroundPageBody:not(#x):not(#y) .voucherTile .voucherMenu .moreBtn:focus-visible { background: var(--brand-ink) !important; color: #fff !important; }
@media (max-width: 991.98px) { #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { #alacerHotelSurroundPageBody section.voucherCardBook:has(.voucherTile) { grid-template-columns: 1fr; } }

/* Category picker in the top bar ("Gift Vouchers ˅"): its list (.card-shadow, absolute) opened BEHIND the category photos, which
   come later in the page and are positioned (Penventon 29 Oct). Lift the bar above the grid and give the list a proper panel. */
#alacerHotelSurroundPageBody .page1TopBar { position: relative; z-index: 30; }
#alacerHotelSurroundPageBody .page1TextMenuContainer { position: relative; }
#alacerHotelSurroundPageBody .page1TextMenuContainer .card-shadow {
	z-index: 31; min-width: 220px; right: 0; left: auto; background: var(--brand-paper, #fff);
	border: 1px solid var(--brand-line); box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
/* drop-downs with the engine's own arrow (.fancyArrow): drop our drawn arrow, or two show (a stray dot beside the caret;
   Hampton, Washingborough 29 Oct) */
/* the engine's own arrow is there: no second chevron (raised 1 Nov 2026 - brand input rules with 4 ids were re-adding it, The Elm) */
html body#alacerHotelSurroundPageBody:not(#brand-dd):not(#brand-dd2):not(#brand-dd3):not(#brand-dd4):not(#brand-dd5) .notIE:has(> .fancyArrow) select.inputDropdown { background-image: none !important; }
/* categories page: the tile grid takes the full row (Great House's compiled theme held it at 50%, so three 170px columns
   squeezed the tiles; 29 Oct) */
html body#alacerHotelSurroundPageBody:not(#brand-cat) .filterVoucherCategory.page1TitlesMenuContainer { width: 100% !important; max-width: none !important; float: none !important; }

/* phones: the checkout buttons are full width, so the 10px gap on their left pushed them 10px past the panel's right edge
   (Great House 29 Oct); stacked with the gap underneath instead */
@media (max-width: 767px) {
	#alacerHotelSurroundPageBody:not(#brand-ttb) [class*="TextTransitionButton"] { margin-left: 0 !important; margin-right: 0 !important; }
}

/* button_secondary_style: outline */
#alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary,
#alacerHotelSurroundPageBody #page6 .page6PrevNavButton,
#alacerHotelSurroundPageBody .modal .brand-btn-secondary,
#alacerHotelSurroundPageBody .loginLink,
#alacerHotelSurroundPageBody .loginLinkmobile,
#alacerHotelSurroundPageBody #headerBar .loginLink,
#alacerHotelSurroundPageBody #headerBar .loginLinkmobile,
#alacerHotelSurroundPageBody #page3 .deskback,
#alacerHotelSurroundPageBody #page3 .mobback,
#alacerHotelSurroundPageBody #page4 .deskback,
#alacerHotelSurroundPageBody #page4 .mobback,
#alacerHotelSurroundPageBody vouchercard .voucherDetailPaneMoreInfoBtnLabel,
#alacerHotelSurroundPageBody vouchercard .mobVoucherDetailPaneMoreInfoBtnLabel { background: #fefdfd !important; color: #1d1b19 !important; border: 1px solid #1d1b19 !important; border-color: #1d1b19 !important; }
#alacerHotelSurroundPageBody .loginLink:hover, #alacerHotelSurroundPageBody .loginLinkmobile:hover, #alacerHotelSurroundPageBody #engineAreaContainer .brand-btn-secondary:hover, #alacerHotelSurroundPageBody .modal .brand-btn-secondary:hover, #alacerHotelSurroundPageBody #page6 .page6PrevNavButton:hover, #alacerHotelSurroundPageBody #page3 .deskback:hover, #alacerHotelSurroundPageBody #page3 .mobback:hover, #alacerHotelSurroundPageBody #page4 .deskback:hover, #alacerHotelSurroundPageBody #page4 .mobback:hover { background: #1d1b19 !important; color: #ffffff !important; border-color: #1d1b19 !important; }

/* ===== DR-1101 (design review 1 Nov 2026, Rob approved): Restaurant Sat Bains ===== */
/* header: house rule Back link + logo (website logo 80x56); accolade moved back to the footer as on the website */
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; }
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner .brand-header-left { justify-self: start; }
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner .brand-logo { justify-self: center; }
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner .brand-header-right { justify-self: end; }
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header .brand-back { display: inline-flex !important; align-items: center !important; min-height: 44px !important; color: #f3efe7 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; text-decoration: none !important; }
html body:not(#dr1):not(#dr2):not(#dr3) .brand-header .brand-back:hover, html body:not(#dr1):not(#dr2):not(#dr3) .brand-header .brand-back:focus-visible { color: #c1a98b !important; }
/* text: at least as dark as the website body text (#111) ; headings weight 500 and -0.02em like the website */
html body:not(#dr1):not(#dr2):not(#dr3) #engineArea { color: #111111 !important; }
html body:not(#dr1):not(#dr2):not(#dr3) #engineArea h1, html body:not(#dr1):not(#dr2):not(#dr3) #engineArea h2, html body:not(#dr1):not(#dr2):not(#dr3) #engineArea h3, html body:not(#dr1):not(#dr2):not(#dr3) #engineArea h4 { font-weight: 500 !important; letter-spacing: -0.02em !important; }
/* footer: website content in its 1240px container */



















@media (max-width: 767px) {
	html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner { grid-template-columns: 1fr auto !important; padding: 0 16px !important; }
	html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner .brand-header-right { display: none !important; }
	html body:not(#dr1):not(#dr2):not(#dr3) .brand-header-inner .brand-logo { justify-self: end; }
	
	
	
}
/* primary buttons: the website's outline style (transparent, 1px ink border, ink text) */
html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) .commonButton:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .voucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .voucherOptionsAddToBasket:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasket:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) .basketWrapper .basketItemsWrapper .basketCheckOutMenu:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskcheckout:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskback:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .moreBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .addBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page45ContinueBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page45MethodBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-lg .promobtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-xs .promoContainer .promoInput button:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .cancleButton:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .addButton:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobcheckout:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobback:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskback:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskcheckout:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskcheckout:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskback:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .deskBackBtn:not([disabled]):not(.disabled),
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .mobBackBtn:not([disabled]):not(.disabled) {
	background: transparent !important; background-color: transparent !important; background-image: none !important;
	color: #1d1b19 !important; border: 1px solid #1d1b19 !important; border-radius: 0 !important; box-shadow: none !important;
	font-weight: 500 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; font-size: 14px !important;
}
html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) .commonButton:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) .commonButton:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .voucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .voucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .voucherOptionsAddToBasket:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .voucherOptionsAddToBasket:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasket:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasket:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) .basketWrapper .basketItemsWrapper .basketCheckOutMenu:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) .basketWrapper .basketItemsWrapper .basketCheckOutMenu:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskcheckout:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskcheckout:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskback:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskback:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .moreBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page3 .moreBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .addBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page3 .addBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page45ContinueBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page45ContinueBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page45MethodBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page45MethodBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-lg .promobtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-lg .promobtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-xs .promoContainer .promoInput button:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-xs .promoContainer .promoInput button:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .cancleButton:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .cancleButton:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .addButton:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .addButton:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobcheckout:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobcheckout:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobback:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobback:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskback:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskback:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskcheckout:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskcheckout:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskcheckout:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskcheckout:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskback:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskback:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .deskBackBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page6 .deskBackBtn:not([disabled]):not(.disabled):focus-visible,
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .mobBackBtn:not([disabled]):not(.disabled):hover,html body:not(#dr1):not(#dr2):not(#dr3) #page6 .mobBackBtn:not([disabled]):not(.disabled):focus-visible {
	background: #1d1b19 !important; background-color: #1d1b19 !important; color: #f3efe7 !important;
}
/* labels/icons inside outline buttons follow the button text colour (white spans went invisible) */
html body:not(#dr1):not(#dr2):not(#dr3) .btn.commonButton:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) .commonButton:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .voucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) vouchercard .mobVoucherDetailPaneAddToBasketBtnLabel:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .voucherOptionsAddToBasket:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasketBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) voucherdetailsdialog .mobVoucherOptionsAddToBasket:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) .basketWrapper .basketItemsWrapper .basketCheckOutMenu:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskcheckout:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .deskback:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .moreBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page3 .addBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page45ContinueBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page45MethodBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-lg .promobtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-details .visible-xs .promoContainer .promoInput button:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .cancleButton:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) delivery-address .visible-lg .addButton:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobcheckout:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .mobback:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskback:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page4 .deskcheckout:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskcheckout:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) page5 .page5ButtonSurround .deskback:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .deskBackBtn:not([disabled]):not(.disabled) *,
html body:not(#dr1):not(#dr2):not(#dr3) #page6 .mobBackBtn:not([disabled]):not(.disabled) * { color: inherit !important; border-color: currentColor !important; }

/* PAY-1103: payment step - 'Same as Lead Guest' beside the Billing Address heading, so it is seen before the fields, and the billing
   and card panels the same height on desktop. Works whichever order the engine renders the tick box in (Rob, 3 Nov 2026). */
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding-bottom: 100px !important; /* vouchers: the engine lifts the terms tick box 100px up into this space */ background: var(--brand-paper, #fff) !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > #PaymentBillingAddressHeading { grid-column: 1; grid-row: 1; align-self: last baseline; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard { display: contents !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > * { grid-column: 1 / -1; padding-left: 20px; padding-right: 20px; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { grid-column: 2 !important; grid-row: 1 !important; align-self: last baseline; margin: 0 !important; padding: 0 20px 0 0 !important; width: auto !important; white-space: nowrap; }
@media (max-width: 479.98px) {
	html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { grid-column: 1 / -1 !important; grid-row: 2 !important; padding: 0 20px 10px !important; white-space: normal; }
}
@media (min-width: 992px) {
	html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround):has(> #paymentDetailsSurroundSurround) { display: flex; flex-wrap: wrap; }
	html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround)::before,
	html body:not(#py1):not(#py2):not(#py3) .row:has(> #paymentBillingAddressSurround)::after { display: none; }
	html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround) { float: none; display: flex; }
	html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround) > .card-shadow { flex: 1 1 auto; }
}
/* PAY-1103b: card panel's white inner box fills the equal-height panel; the engine's loose 'Your Card Details' line under the panel's own heading is hidden */
@media (min-width: 992px) {
	html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround > .card-shadow { display: flex; flex-direction: column; }
	html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround > .card-shadow > .accordionCard { flex: 1 1 auto; }
}
html body:not(#py1):not(#py2):not(#py3) #PaymentDetailsArea { visibility: visible !important; font-size: 0 !important; line-height: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #PaymentDetailsArea > * { font-size: 14px; line-height: normal; }

/* ALIGN-1103: the billing column and the card frame use the same explicit spacing, so their rows line up on every site whatever
   the label size (Lovat / Elveden, Rob 3 Nov 2026): both headings 20px top / 12px bottom; each label 4px above its field;
   12px between rows (drop-down wrappers included); billing rows packed at the top when the equal-height panel is taller. */
html body:not(#py1):not(#py2):not(#py3) :is(#PaymentBillingAddressHeading, #PaymentCardDetailHeading) { padding: 20px 20px 12px !important; margin: 0 !important; line-height: 1.25 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow { row-gap: 0 !important; align-items: start !important; align-content: start !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > #PaymentBillingAddressHeading { align-self: start !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { align-self: center !important; margin-top: 8px !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > label { display: block !important; margin: 0 !important; padding: 0 0 4px !important; line-height: normal !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(input, select, div, drop-down) { display: block !important; margin: 0 0 12px !important; height: auto; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround > .card-shadow > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(div, drop-down) :is(select, input) { margin: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #PaymentDetailsArea, html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsSurround { margin: 0 !important; padding: 0 !important; }

/* CVH-1103: the card frame is fixed at 350px by the engine (inline style). With 44px fields an engine that also shows a Start Date
   row (Dundonald) pushed the Card Verification Number below the bottom of the frame, so it was cut off and the guest couldn't pay.
   Give the frame room for five rows with large labels (Rob, 3 Nov 2026). */
html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsIframe { height: 460px !important; }

/* UC-1103 (3 Nov 2026): guest-facing behaviour carried over from the retired UserVoucher.css (original kept as UserVoucher.css.pre-RSB2026.bak). Only rules that hide / reword / show functional parts of the engine are kept; its old colours, fonts, borders and positioning are superseded by this theme. */
page6 delivery-details table div.deliverytext a.pointer { display: none; }
.combineCheckBoxContainer, .CAPAInputContainer { display: none !important; }

/* PAY-1103c: (1) the box round the card frame carries jQuery UI's ui-state-highlight class, which some base themes colour (Crown: grey):
   keep it clear. (2) Older engines (Dundonald) have no .card-shadow in the payment columns: the heading and the fields are two separate
   boxes straight in the column. Stack them and join them into one panel (no border between), keep 'Same as Lead Guest' beside the
   heading, and use the same field spacing as newer engines so the card rows line up (Rob, 3 Nov 2026). */
html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround #CardDetailsSurround { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) { flex-direction: column; position: relative; }
html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) > .accordionCard { flex: 1 1 auto; margin: 0 !important; padding: 0 20px 20px !important; border-top: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) :is(#paymentBillingAddressSurround, #paymentDetailsSurroundSurround):not(:has(> .card-shadow)) > :is(#PaymentBillingAddressHeading, #PaymentCardDetailHeading) { border-bottom: 0 !important; padding-right: 210px !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentDetailsSurroundSurround:not(:has(> .card-shadow)) > #PaymentCardDetailHeading { padding-right: 20px !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) #sameAsLeadGuestArea { position: absolute !important; top: 22px; right: 35px; margin: 0 !important; padding: 0 !important; width: auto !important; white-space: nowrap; }
@media (max-width: 479.98px) {
	html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > #PaymentBillingAddressHeading { padding-right: 20px !important; }
	html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) #sameAsLeadGuestArea { position: static !important; padding: 0 0 10px !important; }
}
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) { margin: 0 !important; padding: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > label { display: block !important; margin: 0 !important; padding: 0 0 4px !important; line-height: normal !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(input, select, div, drop-down) { display: block !important; margin: 0 0 12px !important; height: auto; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround:not(:has(> .card-shadow)) > .accordionCard > div:not(#sameAsLeadGuestArea) > :is(div, drop-down) :is(select, input) { margin: 0 !important; }
/* PAY-1103d: the hidden tick input carries .form-control, so the 44px field height stretched the 'Same as Lead Guest' row and left the
   visible tick at its top (Crown): size the row to its content and centre it */
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea { align-items: center !important; height: auto !important; min-height: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea :is(label, input) { height: auto !important; min-height: 0 !important; }

/* PAY-1103e: the tick box is a 20px square level with its text (Crown: the label had collapsed to 0px, so the box sat 8px low), and the
   tick mark is centred in the box (the engine draws it 6x16px from 3px down, so it sat low; demo) */
html body#alacerHotelSurroundPageBody:not(#ck1):not(#ck2) .controlIndicator::after { top: 2px !important; left: 6px !important; width: 6px !important; height: 11px !important; box-sizing: border-box !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > label.control { position: relative !important; display: block !important; flex: 0 0 20px; width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 10px 0 0 !important; padding: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > label.control > .controlIndicator { top: 0 !important; left: 0 !important; }
html body:not(#py1):not(#py2):not(#py3) #paymentBillingAddressSurround #sameAsLeadGuestArea > span { margin: 0 !important; line-height: 20px !important; }