/* * Automatic.css variables used below carry fallbacks, so this looks the same * on a site without Automatic.css. Where Automatic.css is present its values * win and nothing changes; the fallbacks are one such site's values, with the * brand colour taken from MS Tours' own setting. */ /* ========================================================= SOURCE: 04 — Booking Form CSS ========================================================= */ /** * MS Tours Engine — Frontend booking form styles * Version: 0.6.8 * * WPCodeBox settings: * - Type: CSS * - Run: Frontend / Everywhere the booking form can render * - Priority: 40 * * Keep this separate from 03-ms-tours-frontend.php so visual changes * never require editing the booking logic. */ /* TOURS TABLE */ .tours-tabs__table { width: 100% !important; height: auto !important; margin: 30px 0; border: none; border-top: 2px solid #e4e4e4; border-bottom: 2px solid #e4e4e4; font-size: 0.933em; } .tours-tabs__table td, .tours-tabs__table th { padding: 10px; vertical-align: top; border: none; } .tours-tabs__table tr { border-bottom: 1px solid #e4e4e4; } .tours-tabs__table tr:last-of-type { border-bottom: 0px; } .on::before, .off::before { content: ""; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .on::before { color: var(--success, #29a745); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .off::before { color: var(--error, #dc3545); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); } /* * The open calendar is moved onto , outside the form, so no container * can clip it. It carries the form's colours with it; without them its days * lost their brand tint and hovered in the default teal. */ .ms-tour-calendar-popover{ --ms-accent:var(--ms-brand-color,#37c8bd); --ms-accent-dark:color-mix(in srgb,var(--ms-accent) 80%,#000); --ms-accent-soft:color-mix(in srgb,var(--ms-accent) 11%,#fff); --ms-ink:#14222b; --ms-border:#dde4e7; --ms-muted:#6b767d; --ms-bg:#f7f9f9; } /* BOOKING FORM */ .ms-tour-booking{ --ms-accent:var(--ms-brand-color,#37c8bd); --ms-accent-dark: color-mix(in srgb,var(--ms-accent) 80%,#000); --ms-accent-soft: color-mix(in srgb,var(--ms-accent) 11%,#fff); --ms-ink:#14222b; --ms-border:#dde4e7; --ms-muted:#6b767d; --ms-bg:#f7f9f9; font-family:inherit; color:var(--ms-ink); width:100%; min-width:0; display:flex; flex-direction:column; gap:12px } .ms-tour-booking *{ box-sizing:border-box } .ms-tour-booking [hidden]{ display:none!important } .ms-tour-booking__heading{ display:block } .ms-tour-booking__heading h3{ font-size: var(--h4, 1.25rem); line-height:1; margin:0 } .time-arrow { position: absolute; top: 50%; right: 11px; pointer-events: none; margin-top: -4px!important; } .ms-tour-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-xs, 0.85rem); } .ms-tour-field{ display:block; min-width:0; position:relative; margin-bottom: 0px; } .ms-tour-field--full{ grid-column:1/-1 } .ms-tour-field>span,.ms-tour-section-label{ display:block; font-size:12px; font-weight:700; color:var(--ms-muted); position: absolute; top: -6px; left: 10px; background: var(--white, #fff); z-index: 1; padding-inline: 5px; line-height: 1; } .ms-tour-duration-field span, .ms-tour-pickup .ms-tour-section-label { position: relative; top: 0px; left: 0px; padding-inline: 0px; } .ms-tour-field input,.ms-tour-field select,.ms-tour-control{ display:flex; align-items:center; justify-content:space-between; width:100%!important; min-width:0; max-width:none; height:42px; padding:0 11px; border:1px solid var(--ms-border)!important; border-radius:var(--radius, 8px)!important; background:#fff; color:var(--ms-ink); font:inherit; font-size:13px; outline:0; box-shadow:none!important } /* * One chevron on the form's selects, drawn here like the date field's. The * browser's own arrow is switched off, and so is the picker icon newer Chrome * adds to selects, which together showed two chevrons on the Time field. */ .ms-tour-booking .ms-tour-field select{ -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b767d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:16px 16px; text-overflow:ellipsis; } .ms-tour-booking .ms-tour-field select::-ms-expand{ display:none } .ms-tour-booking .ms-tour-field select::picker-icon{ display:none } .ms-tour-field input:focus,.ms-tour-field select:focus,.ms-tour-control:focus{ border-color:var(--ms-accent-dark)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--ms-accent) 18%,transparent)!important } .ms-tour-control{ cursor:pointer; text-align:left } .ms-tour-control span:last-child{ color:var(--ms-muted) } /* The Date control is a button, not a placeholder-only field. Keep its label fully legible when available; use a neutral disabled treatment instead of fading the whole control when a duration must be selected first. */ .ms-tour-date-trigger [data-role="selected-date"]{ color:var(--ms-ink); opacity:1 } .ms-tour-date-trigger:disabled{ opacity:1!important; cursor:not-allowed; background:#f6f7f7 } .ms-tour-date-trigger:disabled [data-role="selected-date"]{ color:var(--ms-muted) } /* v0.29.4: a bookable date control must never inherit faded/disabled styling from Bricks, the lightbox, or generic button rules. */ .ms-tour-datebox{ opacity:1!important } .ms-tour-datebox > span{ opacity:1!important } .ms-tour-date-trigger:not(:disabled){ opacity:1!important; color:var(--ms-ink)!important; background:#fff!important } .ms-tour-date-trigger:not(:disabled) [data-role="selected-date"]{ opacity:1!important; color:var(--ms-ink)!important } /* The date field's chevron: the same Lucide chevron the selects draw. */ .ms-tour-chevron{ display:inline-flex; flex:0 0 auto; color:var(--ms-muted); } .ms-tour-date-trigger:disabled .ms-tour-chevron{ opacity:.5 } .ms-tour-people-row{ display:flex; flex-direction:column; justify-content:center; gap:8px; padding:12px 0; border-top:1px solid var(--neutral-ultra-light, #f2f2f2); border-bottom:1px solid var(--neutral-ultra-light, #f2f2f2); line-height: 1!important; } /* * Two groups side by side rather than four stacked rows: the control on one side, * its constraints on the other. Roughly halves the height of this block, which * matters most in the lightbox where the whole form has to fit without scrolling. */ .ms-tour-people-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .ms-tour-people-row__control{ display:flex; align-items:center; gap:10px; } .ms-tour-people-row__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; min-inline-size:0; } /* Below ~360px the two groups stop fitting; stack rather than crush the stepper. */ @media (max-width:360px){ .ms-tour-people-row{ flex-direction:column; align-items:stretch; } .ms-tour-people-row__meta{ align-items:flex-start; text-align:left; } } .ms-tour-people-row strong{ display:block; font-size:11px; white-space:nowrap; } .ms-tour-people-row small{ display:block; color:var(--ms-muted); font-size:10px; } .ms-tour-qty{ display:grid; grid-template-columns:34px 42px 34px; text-align: center!important; } .ms-tour-qty button{ height:34px; border:1px solid var(--ms-border); background:#fff; color:var(--ms-ink); font-size:18px; cursor:pointer } .ms-tour-qty button:first-child{ border-radius:var(--radius, 8px) 0 0 var(--radius, 8px) } .ms-tour-qty button:last-child{ border-radius:0 var(--radius, 8px) var(--radius, 8px) 0 } .ms-tour-qty input{ width:42px!important; height:34px; text-align:center; border:1px solid var(--ms-border); border-left:0; border-right:0; border-radius:0!important; padding:0!important; font-weight:700; -webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield } /* * Remove the native number stepper completely. * * `appearance: textfield` above is only half the job — Firefox honours it, but * WebKit and Blink draw the stepper as a pseudo-element that has to be removed on * its own. Safari therefore still drew the arrows, and Chrome still reserved their * width even while hiding them, which pushed the number off-centre between the * minus and plus buttons. * * Scoped to this stepper deliberately: number fields in the admin are typed into * and should keep their native controls. */ .ms-tour-qty input::-webkit-outer-spin-button, .ms-tour-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; } .ms-tour-vehicle-note{ color:var(--ms-muted); font-size:10px; line-height:1.35 } .ms-tour-duration-options{ display:flex; flex-direction:column; gap:6px } .ms-tour-duration-option{ display:grid!important; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; line-height: 1.2; gap:6px; padding:9px 10px; border:1px solid var(--ms-border); border-radius:var(--radius, 8px); background:#fff; cursor:pointer; margin:0!important; transition:.15s } .ms-tour-duration-option:hover{ border-color:color-mix(in srgb,var(--ms-accent) 52%,#cfd7da) } .ms-tour-duration-option:has(input:checked){ border-color:var(--ms-accent-dark); background:var(--ms-accent-soft); box-shadow:inset 0 0 0 1px var(--ms-accent-dark) } .ms-tour-duration-option input{ position:absolute; opacity:0; pointer-events:none } .ms-tour-duration-option__radio{ width:14px; height:14px; border:1.5px solid #9ba5aa; border-radius:50%; position:relative } .ms-tour-duration-option input:checked+.ms-tour-duration-option__radio{ border-color:var(--ms-accent-dark) } .ms-tour-duration-option input:checked+.ms-tour-duration-option__radio:after{ content:''; position:absolute; inset:3px; background:var(--ms-accent-dark); border-radius:50% } .ms-tour-duration-option__label{ font-size:12px; font-weight:600; line-height:1.25 } .ms-tour-duration-option__price{ font-size:10px; font-weight:700; color:var(--ms-muted); white-space:nowrap } .ms-tour-duration-field, .ms-tour-pickup{ display:flex; flex-direction:column; gap:8px } .ms-tour-pickup-list{ display:flex; flex-direction:column; gap:6px } .ms-tour-pickup-option{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; line-height: 1.2; gap:6px; padding:9px 10px; border:1px solid var(--ms-border); border-radius:var(--radius, 8px); background:#fff; cursor:pointer; margin:0!important; transition:.15s } .ms-tour-pickup-option:hover{ border-color:color-mix(in srgb,var(--ms-accent) 52%,#cfd7da) } .ms-tour-pickup-option:has(input:checked){ border-color:var(--ms-accent-dark); background:var(--ms-accent-soft); box-shadow:inset 0 0 0 1px var(--ms-accent-dark) } .ms-tour-pickup-option input{ position:absolute; opacity:0; pointer-events:none } .ms-tour-pickup-option__radio{ width:14px; height:14px; border:1.5px solid #9ba5aa; border-radius:50%; position:relative } .ms-tour-pickup-option input:checked+.ms-tour-pickup-option__radio{ border-color:var(--ms-accent-dark) } .ms-tour-pickup-option input:checked+.ms-tour-pickup-option__radio:after{ content:''; position:absolute; inset:3px; background:var(--ms-accent-dark); border-radius:50% } .ms-tour-pickup-option__label{ font-size:12px; font-weight:600; line-height:1.25 } .ms-tour-pickup-option__fee{ font-size:10px; font-weight:700; color:var(--ms-muted); white-space:nowrap } .ms-tour-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:var(--radius, 8px); background:var(--ms-bg) } .ms-tour-total>div{ display:flex; flex-direction:column; gap:2px } .ms-tour-total span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ms-muted) } .ms-tour-total small{ display:block; font-size:10px; color:var(--ms-muted) } .ms-tour-total strong{ font-size:20px; white-space:nowrap } .ms-tour-message{ font-size:11px } .ms-tour-message--error{ /* A banner, not a line of small print: it says why the booking did not go through. */ padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--danger, #b3261e) 35%, #fff); border-radius: var(--radius, 8px); background: color-mix(in srgb, var(--danger, #b3261e) 8%, #fff); color: var(--danger, #b3261e); font-size: 12.5px; font-weight: 600; line-height: 1.35; } .ms-tour-message--success{ color: var(--success, #29a745); } .ms-tour-book{ appearance:none; border:0; border-radius:var(--radius, 8px); background:var(--ms-accent); color:var(--white,#fff); font:inherit; font-weight:800; font-size:14px; padding:12px 16px; cursor:pointer; width:100%; text-align:center; transition:.15s } .ms-tour-book:hover:not(:disabled){ background:var(--ms-accent-dark) } .ms-tour-book:disabled{ opacity:.42; cursor:not-allowed } .ms-tour-calendar__week, .ms-tour-calendar { gap: 5px!important; } .ms-tour-calendar-popover{ display:none; position:fixed; z-index:999999; width:270px; padding:8px; border:1px solid var(--ms-border); border-radius:var(--radius, 8px); background:#fff; box-shadow:0 16px 45px rgba(20,34,43,.18) } .ms-tour-calendar-popover.is-open{ display:flex; flex-direction:column; gap:6px; } .ms-tour-calendar__nav{ display:grid; grid-template-columns:34px 1fr 34px; align-items:center; text-align: center; } .ms-tour-calendar__nav strong{ text-align:center; font-size:13px; text-transform:capitalize } .ms-tour-calendar__nav button{ height:32px; border:1px solid var(--ms-border); border-radius:var(--radius, 8px); background:#fff; font-size:19px; cursor:pointer } .ms-tour-calendar__nav button:hover { background:var(--primary-hover, var(--ms-accent-dark, #2ca79e)); color: var(--white, #fff); } .ms-tour-calendar__week,.ms-tour-calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px } .ms-tour-calendar__week span{ text-align:center; font-size:9px; font-weight:700; color:var(--ms-muted); padding:0px; line-height: 1; } .ms-tour-calendar__nav { display: grid; grid-template-columns: 34px minmax(0, 1fr) 78px 34px; align-items: center; gap: 6px; } .ms-tour-calendar__nav select { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--ms-border); border-radius: 7px; background: #fff; color: var(--ms-ink); font: inherit; font-size: 12px; cursor: pointer; } .ms-tour-calendar__nav select:focus { outline: 2px solid color-mix(in srgb, var(--ms-accent) 45%, transparent); outline-offset: 1px; } .ms-tour-day{ aspect-ratio:1; border:0; border-radius:var(--radius, 8px); background:#f5f7f8; color:#adb4b8; cursor:not-allowed; font:inherit; font-size:11px; position:relative; text-align: center; } .ms-tour-day--available{ background:var(--ms-accent-soft); color:var(--ms-ink); cursor:pointer; font-weight:700 } .ms-tour-day--available:hover{ background: var(--primary-hover, var(--ms-accent-dark, #2ca79e)); color: var(--white, #fff); } /* --ms-accent has no fallback below by design elsewhere, but here an undefined value would make the background declaration invalid and leave the selected day with no highlight at all. The chain ends in the shipped default. */ .ms-tour-day--selected{ background:var(--ms-accent, var(--ms-brand-color, #37c8bd))!important; color:var(--ms-brand-contrast,#fff)!important } .ms-tour-day--today:after{ content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--primary, var(--ms-accent, #37c8bd)); left:50%; bottom:5px; transform:translateX(-50%) } .ms-tour-day--outside{ visibility:hidden } .ms-tour-loading{ grid-column:1/-1; padding:32px 8px; text-align:center; color:var(--ms-muted); font-size:11px } .ms-tour-booking-error{ padding:12px; border:1px solid var(--danger, #dc3545); color:var(--danger, #dc3545); } .ms-tour-pickup-extra { margin-top: 6px; } .ms-tour-people-row { transition: opacity 0.2s ease; } .ms-tour-people-row.is-disabled { opacity: 0.4; } .ms-tour-people-row.is-disabled .ms-tour-qty { cursor: not-allowed; } @media(max-width:420px){ .ms-tour-field--full{ grid-column:1/-1 } } @media(max-width:600px){ .ms-tour-calendar-popover.is-open{ left:12px!important; right:12px!important; top:auto!important; bottom:12px!important; width:auto!important; max-height:70vh; overflow:auto } } /* ========================================================= MS TOURS — BOOKING FORM ACTIONS ========================================================= */ .ms-tour-actions { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: var(--space-xs, 10px); width: 100%; } .ms-tour-actions > * { width: 100%; min-width: 0; } /* "Add to cart" on sites without Automatic.css, whose btn-- classes style it elsewhere: an outline twin of "Book now". */ .ms-tour-booking--own-buttons .ms-tour-add-cart { appearance: none; border: 1.5px solid var(--ms-accent); border-radius: var(--radius, 8px); background: transparent; color: var(--ms-accent-dark); font: inherit; font-weight: 800; font-size: 14px; padding: 12px 16px; cursor: pointer; width: 100%; text-align: center; transition: .15s; } .ms-tour-booking--own-buttons .ms-tour-add-cart:hover:not(:disabled) { background: var(--ms-accent-soft, #eaf8f7); } .ms-tour-add-cart:disabled { opacity: 0.42; cursor: not-allowed; } /* ========================================================= MS TOURS — CONTACT FIELDS International phone input ========================================================= */ /* --------------------------------------------------------- Phone input / intl-tel-input --------------------------------------------------------- */ .iti--detached-country-selector { width: auto!important; } .iti { width: 100%; } .iti input { width: 100%; min-width: 0; } .iti__country-container { z-index: 2; } .iti__search-input { width: 100%; } .iti__selected-dial-code { font-size: 10px; margin-left: 0px!important; } .iti__country-check-svg { color: var(--primary, var(--ms-accent, #37c8bd)); } .iti__country-name { font-size: 13px; line-height: 1.2; } .iti__search-input-wrapper input { padding-left: 35px!important; border-radius: var(--radius, 8px)!important; border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important; font-size: 13px!important; padding-block: 0px!important; } .iti__country-selector { .iti--inline-country-selector:not(.iti--detached-country-selector) & { height: auto !important; } } @media (max-width: 767px) { .iti__search-input-wrapper input { font-size: 16px !important; } } .iti__country-selector { border-radius: var(--radius, 8px)!important; } /* --------------------------------------------------------- BricksExtras Dynamic Lightbox / GLightbox --------------------------------------------------------- */ .glightbox-container > .ms-iti-lightbox-portal { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible; z-index: 2147483000; } .glightbox-container > .ms-iti-lightbox-portal .iti__country-selector, .glightbox-container > .ms-iti-lightbox-portal .iti__dropdown-content, .glightbox-container > .ms-iti-lightbox-portal .iti__country-list { pointer-events: auto; } /* * Phone selector event isolation is handled in JS at .ms-iti-lightbox-portal. * Do not disable pointer events here: intl-tel-input must receive the country click. */ /* ========================================================= v0.33 — KEYBOARD / ACCESSIBILITY BASELINE ========================================================= */ .ms-tour-booking :where(button, input, select, textarea, a):focus-visible { outline: 3px solid color-mix(in srgb, var(--ms-accent, #37c8bd) 48%, transparent) !important; outline-offset: 2px !important; } .ms-tour-booking .ms-tour-day:focus-visible { outline-color: var(--ms-accent-dark, #1b938b) !important; outline-offset: 1px !important; position: relative; z-index: 2; } .ms-tour-booking [aria-busy="true"] { cursor: progress !important; } .ms-tour-calendar-popover[aria-hidden="true"] { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ms-tour-booking *, .ms-tour-booking *::before, .ms-tour-booking *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= MS TOURS — TICKET TYPES One stepper per ticket type replaces the single people stepper. ========================================================= */ .ms-tour-people-row--tickets { flex-direction: column; align-items: stretch; } .ms-tour-people-row--tickets .ms-tour-people-row__control { flex-direction: column; align-items: stretch; } .ms-tour-people-row--tickets .ms-tour-people-row__control > .ms-tour-qty { display: none; } .ms-tour-people-row--tickets .ms-tour-people-row__meta { align-items: flex-start; text-align: left; } .ms-tour-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ms-tour-ticket { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; margin: 0; } .ms-tour-ticket__text { display: flex; flex-direction: column; min-width: 0; } .ms-tour-ticket__label { font-weight: 700; } .ms-tour-ticket__text small { color: var(--ms-muted); font-size: 12px; } .ms-tour-ticket__price { font-weight: 700; font-size: 14px; white-space: nowrap; } /* ========================================================= MS TOURS — DEPOSIT OR FULL PAYMENT ========================================================= */ .ms-tour-payment { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; } .ms-tour-payment legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ms-muted); } .ms-tour-payment-option { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--ms-border); border-radius: var(--radius, 8px); background: #fff; font-size: 12px; font-weight: 600; line-height: 1.25; cursor: pointer; margin: 0 !important; transition: .15s; } .ms-tour-payment-option:hover { border-color: color-mix(in srgb, var(--ms-accent) 52%, #cfd7da); } .ms-tour-payment-option:has(input:checked) { border-color: var(--ms-accent-dark); background: var(--ms-accent-soft); box-shadow: inset 0 0 0 1px var(--ms-accent-dark); } .ms-tour-payment-option input { accent-color: var(--ms-accent-dark); width: 14px; height: 14px; margin: 0; } /* ========================================================= MS TOURS: EXTRAS Cards like the pickup options: a counter for extras per person, a checkbox for extras per booking. ========================================================= */ .ms-tour-extras { display: flex; flex-direction: column; gap: 8px; } .ms-tour-extras .ms-tour-section-label { position: relative; top: 0; left: 0; padding-inline: 0; } .ms-tour-extras-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ms-tour-extra { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; margin: 0 !important; border: 1px solid var(--ms-border); border-radius: var(--radius, 8px); background: #fff; line-height: 1.25; transition: .15s; } .ms-tour-extra--booking, .ms-tour-extra--everyone { grid-template-columns: minmax(0, 1fr) auto; padding-block: 9px; cursor: pointer; } .ms-tour-extra:hover { border-color: color-mix(in srgb, var(--ms-accent) 52%, #cfd7da); } .ms-tour-extra.is-chosen { border-color: var(--ms-accent-dark); background: var(--ms-accent-soft); box-shadow: inset 0 0 0 1px var(--ms-accent-dark); } .ms-tour-extra__text { display: flex; flex-direction: column; min-width: 0; } .ms-tour-extra__label { font-size: 12px; font-weight: 600; } .ms-tour-extra__text small { font-size: 11px; color: var(--ms-muted); } .ms-tour-extra__price { font-size: 10px; font-weight: 700; color: var(--ms-muted); white-space: nowrap; } .ms-tour-extra__check { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; cursor: pointer; } .ms-tour-extra__check input { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--ms-accent-dark); } .ms-tour-extra .ms-tour-qty { grid-template-columns: 28px 32px 28px; } .ms-tour-extra .ms-tour-qty button, .ms-tour-extra .ms-tour-qty input { height: 28px; font-size: 14px; } .ms-tour-extra .ms-tour-qty input { width: 32px !important; font-size: 13px; } /* ========================================================= MS TOURS: PHONE NUMBER CHECK ========================================================= */ .ms-tour-field-error { display: block; margin-top: 4px; color: var(--ms-danger, #b3261e); font-size: 11.5px; font-weight: 600; line-height: 1.3; } .ms-tour-field.is-invalid input, .ms-tour-field.is-invalid select, .ms-tour-field.is-invalid .ms-tour-date-trigger { border-color: var(--ms-danger, #b3261e); }