/* ═══════════════════════════════════════════════════════════════ Amax Connect Public Styles v2 All design tokens are injected as CSS custom properties from PHP. ═══════════════════════════════════════════════════════════════ */ /* ─── Design tokens (defaults — overridden by PHP inline CSS) ── */ :root { --ac-primary: #0066ff; --ac-secondary: #f5f7fa; --ac-accent: #ff5500; --ac-btn-bg: #0066ff; /* separate from primary so it can be customised independently */ --ac-btn-text: #ffffff; --ac-text: #1a1a2e; --ac-text-muted: #6b7280; --ac-border: #e5e7eb; --ac-card-bg: #ffffff; --ac-radius: 12px; --ac-btn-radius: 8px; --ac-font: inherit; --ac-heading-size: 20px; --ac-shadow: 0 2px 12px rgba(0,0,0,0.07); --ac-shadow-hover: 0 10px 40px rgba(0,0,0,0.14); --ac-transition: 0.22s ease; } /* ─── Container ──────────────────────────────────────────────── */ .ac-wrap { font-family: var(--ac-font); color: var(--ac-text); width: 100%; } .ac-wrap *, .ac-wrap *::before, .ac-wrap *::after { box-sizing: border-box; } .ac-wrap a { transition: var(--ac-transition); } .ac-error { background: #fee2e2; color: #dc2626; padding: 12px 16px; border-left: 4px solid #dc2626; border-radius: 6px; font-size: 14px; margin-bottom: 16px; } .ac-empty { text-align: center; padding: 48px 20px; color: var(--ac-text-muted); font-size: 15px; } /* ─── Filter Bar ─────────────────────────────────────────────── */ /* Scoped under .ac-wrap + !important on visual properties so */ /* theme button styling can't override. Matches the minimal site */ /* tab aesthetic: no chunky pills, no heavy backgrounds. */ .ac-wrap .ac-filter-bar { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 24px !important; margin: 0 0 12px 0 !important; padding: 4px 0 0 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .ac-wrap .ac-filter-label { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #94a3b8 !important; margin: 0 !important; padding: 0 !important; width: auto !important; flex: none !important; background: transparent !important; border: none !important; } .ac-wrap .ac-filter-group { display: flex !important; align-items: center !important; gap: 9px !important; flex-wrap: nowrap !important; } /* count on each filter option (faceted). Fixed min-width + tabular figures so the number changing (1 → 2 digits) never changes the button width — that width jitter was making the Features group jump between rows on select. */ .ac-wrap .ac-opt-count { display: inline-block !important; min-width: 1.5em !important; text-align: left !important; font-size: 10.5px !important; font-weight: 700 !important; opacity: 0.55 !important; font-variant-numeric: tabular-nums !important; margin-left: 1px !important; } /* Features has the most options; pin it to its own row so it can't hop lines as counts change. Result: a stable 2-row bar (Sort·Show·Size / Features). */ .ac-wrap .ac-filter-group--feat { flex-basis: 100% !important; } .ac-wrap .ac-size-btn--active .ac-opt-count, .ac-wrap .ac-feat-btn--active .ac-opt-count, .ac-wrap .ac-avail-btn--active .ac-opt-count { opacity: 0.8 !important; } .ac-wrap .ac-opt--empty { opacity: 0.4 !important; } .ac-wrap .ac-sort-select { padding: 6px 28px 6px 10px !important; border: 1px solid #e5e7eb !important; border-radius: 6px !important; font-family: var(--ac-font, inherit) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 10px center !important; font-size: 13px !important; font-weight: 500 !important; color: #0f172a !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; cursor: pointer !important; line-height: 1.4 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; } .ac-wrap .ac-sort-select:hover { border-color: #cbd5e1 !important; } .ac-wrap .ac-sort-select:focus-visible { outline: 2px solid var(--ac-primary, #0066ff) !important; outline-offset: 1px !important; } /* Segmented control for Availability — inline pill buttons */ .ac-wrap .ac-avail-btns { display: inline-flex !important; gap: 0 !important; padding: 2px !important; background: #f1f5f9 !important; border-radius: 6px !important; border: none !important; } .ac-wrap .ac-avail-btn { padding: 5px 12px !important; margin: 0 !important; border: none !important; border-radius: 4px !important; background: transparent !important; font-family: var(--ac-font, inherit) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; color: #64748b !important; cursor: pointer !important; transition: color .15s ease, background-color .15s ease !important; box-shadow: none !important; text-shadow: none !important; min-height: 0 !important; height: auto !important; transform: none !important; } .ac-wrap .ac-avail-btn:hover { color: #0f172a !important; background: rgba(255,255,255,0.6) !important; } .ac-wrap .ac-avail-btn--active, .ac-wrap .ac-avail-btn--active:hover { background: #fff !important; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important; transform: none !important; } .ac-wrap .ac-size-btns { display: inline-flex !important; gap: 0 !important; padding: 2px !important; background: #f1f5f9 !important; border-radius: 6px !important; border: none !important; } .ac-wrap .ac-size-btn { padding: 5px 12px !important; margin: 0 !important; border: none !important; border-radius: 4px !important; background: transparent !important; font-family: var(--ac-font, inherit) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; color: #64748b !important; cursor: pointer !important; transition: color .15s ease, background-color .15s ease !important; box-shadow: none !important; text-shadow: none !important; min-height: 0 !important; height: auto !important; transform: none !important; } .ac-wrap .ac-size-btn:hover { color: #0f172a !important; background: rgba(255,255,255,0.6) !important; } .ac-wrap .ac-size-btn--active, .ac-wrap .ac-size-btn--active:hover { background: #fff !important; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important; transform: none !important; } .ac-wrap .ac-filter-count { margin-left: auto !important; font-size: 12px !important; color: #94a3b8 !important; white-space: nowrap !important; font-weight: 500 !important; } /* ─── Grid ───────────────────────────────────────────────────── */ .ac-grid { display: grid; gap: 24px; } .ac-cols-1 { grid-template-columns: 1fr; } .ac-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ac-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } .ac-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } /* List layout overrides */ .ac-layout-list { grid-template-columns: 1fr !important; gap: 10px; } /* Responsive breakpoints */ @media (max-width: 1100px) { .ac-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } } @media (max-width: 860px) { .ac-cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ac-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 540px) { .ac-cols-2, .ac-cols-3, .ac-cols-4 { grid-template-columns: 1fr; gap: 14px; } } /* ─── Card Base ──────────────────────────────────────────────── */ .ac-card { background: var(--ac-card-bg, #fff); border-radius: var(--ac-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ac-transition), box-shadow var(--ac-transition); position: relative; min-width: 0; /* prevent grid blowout */ } /* ── Card Style: Default ── */ .ac-style--default .ac-card { box-shadow: var(--ac-shadow); border: 1px solid var(--ac-border); } .ac-style--default .ac-card:hover { transform: translateY(-4px); box-shadow: var(--ac-shadow-hover); } /* ── Card Style: Flat ── */ .ac-style--flat .ac-card { box-shadow: none; border: 1.5px solid var(--ac-border); } .ac-style--flat .ac-card:hover { border-color: var(--ac-primary); } /* ── Card Style: Elevated ── */ .ac-style--elevated .ac-card { box-shadow: 0 4px 20px rgba(0,0,0,0.10); border: none; } .ac-style--elevated .ac-card:hover { transform: scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,0.18); } /* ── Card Style: Dark ── */ .ac-style--dark .ac-card { background: #1e293b; border: 1px solid #334155; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .ac-style--dark .ac-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4); transform: translateY(-3px); } .ac-style--dark .ac-card__title { color: #fff !important; } .ac-style--dark .ac-card__size { color: #94a3b8; } .ac-style--dark .ac-card__features li { color: #cbd5e1; } .ac-style--dark .ac-feat-icon { stroke: var(--ac-accent); } .ac-style--dark .ac-price__amount { color: var(--ac-accent); } .ac-style--dark .ac-price__period { color: #94a3b8; } /* ─── Card density at higher column counts ───────────────────── */ /* 3 columns — slightly tighter */ .ac-cols-3 .ac-card__body { padding: 14px 16px; gap: 8px; } .ac-cols-3 .ac-card__title { font-size: clamp(14px, 1.5vw, 18px); } .ac-cols-3 .ac-price__amount { font-size: 19px; } .ac-cols-3 .ac-card__media { aspect-ratio: 4/3; } /* 4 columns — compact */ .ac-cols-4 .ac-card__body { padding: 12px 14px; gap: 6px; } .ac-cols-4 .ac-card__title { font-size: clamp(13px, 1.3vw, 16px); margin-bottom: 2px; } .ac-cols-4 .ac-card__size { font-size: 12px; } .ac-cols-4 .ac-price__amount { font-size: 18px; } .ac-cols-4 .ac-card__media { aspect-ratio: 4/3; } .ac-cols-4 .ac-card__foot { padding-top: 10px; gap: 8px; } .ac-cols-4 .ac-card__features li { font-size: 12px; } .ac-cols-4 .ac-btn { padding: 9px 12px; font-size: 13px; } .ac-cols-4 .ac-promo-badge { font-size: 11px; padding: 3px 8px; } /* ─── Card Media ─────────────────────────────────────────────── */ .ac-card__media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--ac-secondary); flex-shrink: 0; } .ac-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ac-card:hover .ac-card__media img { transform: scale(1.04); } /* ─── Badges on image ────────────────────────────────────────── */ .ac-dim-badge { position: absolute; bottom: 10px; left: 10px; top: auto; /* defensive: prevent themes pinning top+bottom */ right: auto; /* defensive: prevent full-width stretch */ height: auto; /* defensive: size to content, not container */ width: auto; /* defensive: size to content, not container */ max-width: calc(100% - 20px); align-self: auto; /* defensive: ignore flex align-items: stretch */ background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1.4; font-weight: 700; padding: 3px 9px; border-radius: 4px; backdrop-filter: blur(4px); box-sizing: border-box; white-space: nowrap; } .ac-status-badge { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; } .ac-status-badge--inline { position: static; display: inline-block; margin-bottom: 10px; } .ac-status--bookable { background: #dcfce7; color: #15803d; } .ac-status--lead-capture { background: #fef3c7; color: #b45309; } .ac-status--rented, .ac-status--reserved { background: #fee2e2; color: #b91c1c; } .ac-status--hidden { background: #f1f5f9; color: #64748b; } .ac-status--other { background: #e0e7ff; color: #4338ca; } /* ─── Card Body ──────────────────────────────────────────────── */ .ac-card__body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .ac-card__head-section {} .ac-card__title { font-size: var(--ac-heading-size); font-weight: 700; color: var(--ac-primary); margin: 0 0 4px; line-height: 1.25; } .ac-card__size { font-size: 13px; color: var(--ac-text-muted); margin: 0; } .ac-card__site { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ac-text-muted); margin: 0 0 6px; line-height: 1.2; } .ac-card__site-icon { flex-shrink: 0; opacity: .75; } .ac-style--dark .ac-card__site { color: #94a3b8; } /* ─── Features list ──────────────────────────────────────────── */ .ac-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; } .ac-card__features li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ac-text-muted); } .ac-feat-icon { flex-shrink: 0; stroke: var(--ac-primary); } /* ─── Card Footer ────────────────────────────────────────────── */ .ac-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ac-border); flex-wrap: wrap; } .ac-style--dark .ac-card__foot { border-color: #334155; } /* ─── Price ──────────────────────────────────────────────────── */ .ac-price { display: flex; align-items: baseline; gap: 2px; } .ac-price__amount { font-size: 22px; font-weight: 800; color: var(--ac-accent); line-height: 1; } .ac-price__period { font-size: 13px; color: var(--ac-text-muted); font-weight: 500; } /* Promotional price: discounted first-period figure on top, the ongoing price stated plainly beneath it. */ .ac-price--promo { flex-direction: column; align-items: flex-start; gap: 1px; } .ac-price--promo .ac-price__lead { display: flex; align-items: baseline; gap: 4px; } .ac-price__then { font-size: 12px; color: var(--ac-text-muted); font-weight: 500; } .ac-style--dark .ac-price__then { color: #94a3b8; } /* ─── CTA Buttons ────────────────────────────────────────────── */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--ac-btn-radius); font-size: 14px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: var(--ac-transition); line-height: 1; white-space: nowrap; } .ac-wrap .ac-btn--reserve, .ac-btn--reserve { background: var(--ac-btn-bg); color: var(--ac-btn-text); border: 2px solid var(--ac-btn-bg); } .ac-wrap .ac-btn--reserve:hover, .ac-btn--reserve:hover { filter: brightness(0.88); color: var(--ac-btn-text); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .ac-btn--enquire { background: transparent; color: var(--ac-text-muted); border: 1.5px solid var(--ac-border); } .ac-btn--enquire:hover { border-color: var(--ac-primary); color: var(--ac-primary); } /* Sold-out "Join Waitlist" button — styled identically to Reserve */ /* Now (solid flat button, same padding / radius / weight) but in */ /* a warm orange tone so it's distinguishable at a glance. Reuses */ /* .ac-btn--enquire for the click handler. */ .ac-wrap .ac-btn--waitlist, .ac-btn--waitlist { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #ea580c !important; color: #fff !important; border: 2px solid #ea580c !important; font-weight: 700 !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important; } .ac-wrap .ac-btn--waitlist:hover, .ac-btn--waitlist:hover { background: #ea580c !important; border-color: #ea580c !important; color: #fff !important; filter: brightness(0.92) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25) !important; } .ac-wrap .ac-btn--waitlist:active, .ac-btn--waitlist:active { transform: translateY(0) !important; box-shadow: none !important; filter: brightness(0.88) !important; } .ac-btn--waitlist .ac-btn__icon { flex-shrink: 0; opacity: 0.95; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .ac-btn--waitlist, .ac-wrap .ac-btn--waitlist, .ac-btn--waitlist:hover, .ac-wrap .ac-btn--waitlist:hover { transform: none !important; transition: none !important; } } /* Purely presentational "Sold Out" chip — non-interactive. */ .ac-wrap .ac-btn--sold-out, .ac-btn--sold-out { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #f1f5f9 !important; color: #64748b !important; border: 1.5px solid #e2e8f0 !important; cursor: not-allowed !important; pointer-events: none !important; font-weight: 600 !important; } .ac-btn--full { width: 100%; } /* ═══════════════════════════════════════════════════════════════ COMPACT LAYOUT ═══════════════════════════════════════════════════════════════ */ .ac-layout-compact .ac-card { flex-direction: row; align-items: stretch; overflow: visible; } .ac-layout-compact .ac-card__media { width: 38%; flex-shrink: 0; border-radius: var(--ac-radius) 0 0 var(--ac-radius); aspect-ratio: unset; min-height: 200px; } .ac-layout-compact .ac-card__body { flex: 1; min-width: 0; } .ac-layout-compact .ac-card:hover .ac-card__media img { transform: scale(1.03); } @media (max-width: 600px) { .ac-layout-compact .ac-card { flex-direction: column; } .ac-layout-compact .ac-card__media { width: 100%; min-height: unset; aspect-ratio: 16/9; border-radius: var(--ac-radius) var(--ac-radius) 0 0; } } /* ═══════════════════════════════════════════════════════════════ LIST LAYOUT ═══════════════════════════════════════════════════════════════ */ .ac-layout-list .ac-card { flex-direction: row; align-items: center; padding: 0; overflow: hidden; } .ac-layout-list .ac-card__media { width: 140px; min-height: 90px; flex-shrink: 0; aspect-ratio: unset; border-radius: 0; } .ac-layout-list .ac-card__body { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; } .ac-layout-list .ac-card__head-section { flex: 1; min-width: 180px; } .ac-layout-list .ac-card__features { flex-direction: row; flex-wrap: wrap; flex: none; } .ac-layout-list .ac-card__foot { border-top: none; padding-top: 0; margin-top: 0; flex-shrink: 0; } .ac-layout-list .ac-dim-badge { bottom: auto; top: 8px; left: 8px; } @media (max-width: 640px) { .ac-layout-list .ac-card { flex-direction: column; } .ac-layout-list .ac-card__media { width: 100%; min-height: unset; aspect-ratio: 16/9; } .ac-layout-list .ac-card__body { flex-direction: column; align-items: flex-start; } .ac-layout-list .ac-card__foot { border-top: 1px solid var(--ac-border); padding-top: 12px; } } /* ═══════════════════════════════════════════════════════════════ SINGLE UNIT ═══════════════════════════════════════════════════════════════ */ .ac-card--single { overflow: visible; } .ac-single__inner { display: flex; gap: 32px; align-items: flex-start; } .ac-single__media { flex: 0 0 45%; position: relative; border-radius: var(--ac-radius); overflow: hidden; } .ac-single__media img { width: 100%; border-radius: var(--ac-radius); display: block; } .ac-single__body { flex: 1; } .ac-single__body .ac-card__features { max-width: none; } .ac-card--single .ac-status-badge { position: static; display: inline-block; margin-bottom: 10px; } @media (max-width: 720px) { .ac-single__inner { flex-direction: column; } .ac-single__media { flex: none; width: 100%; } } /* ─── Promotion badge ────────────────────────────────────────── */ .ac-promo-badge { display: inline-block; margin-top: 8px; padding: 4px 10px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.3; } .ac-style--dark .ac-promo-badge { background: #451a03; color: #fde68a; border-color: #78350f; } /* ─── Availability chip ──────────────────────────────────────── */ .ac-avail-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #15803d; background: #dcfce7; border-radius: 20px; padding: 3px 9px; white-space: nowrap; } .ac-avail-chip svg { opacity: 0.8; } .ac-style--dark .ac-avail-chip { background: #14532d; color: #86efac; } .ac-cols-4 .ac-avail-chip { font-size: 11px; padding: 2px 7px; } /* ─── Price strip (show_only_price mode) ──────────────────────── */ .ac-price-strip { display: inline-flex; align-items: baseline; gap: 2px; background: var(--ac-primary); color: #fff; padding: 6px 16px; border-radius: var(--ac-btn-radius); font-size: 20px; font-weight: 800; } .ac-price-strip__period { font-size: 13px; font-weight: 400; opacity: .8; } /* ─── Inline shortcodes ──────────────────────────────────────── */ .ac-count { font-size: 14px; color: var(--ac-text); } .ac-count strong { color: var(--ac-primary); font-size: 1.2em; } .ac-count--zero { color: var(--ac-text-muted); } .ac-price-from { font-size: 14px; color: var(--ac-text-muted); } .ac-price-from strong { color: var(--ac-primary); font-size: 1.3em; } .ac-price-from__period { font-size: .8em; } /* ─── Enquiry Modal ──────────────────────────────────────────── */ #ac-enquiry-modal { position: fixed; inset: 0; z-index: 99999; } .ac-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); } .ac-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: calc(var(--ac-radius) + 4px); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; z-index: 100000; box-shadow: 0 24px 80px rgba(0,0,0,.25); padding: 28px 30px; } .ac-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .ac-modal__head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--ac-text); } .ac-modal__head p { margin: 0; font-size: 13px; color: var(--ac-text-muted); } .ac-modal-close { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--ac-text-muted); padding: 4px; border-radius: 6px; transition: var(--ac-transition); display: flex; } .ac-modal-close:hover { background: #f1f5f9; color: var(--ac-text); } /* Harden the close button so host themes (e.g. an orange `button` style) can't turn the little × into a big coloured block button. ID-scoped + !important so it always wins over theme button rules. */ #ac-enquiry-modal .ac-modal-close { flex: 0 0 auto !important; width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; padding: 6px !important; margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 8px !important; cursor: pointer !important; color: var(--ac-text-muted, #6b7280) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-size: 0 !important; text-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } #ac-enquiry-modal .ac-modal-close:hover { background: #f1f5f9 !important; color: var(--ac-text, #1a1a2e) !important; } #ac-enquiry-modal .ac-modal-close svg { width: 20px !important; height: 20px !important; display: block !important; flex: none !important; } .ac-modal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .ac-modal__field { display: flex; flex-direction: column; gap: 5px; } .ac-modal__field--full { grid-column: 1 / -1; } .ac-modal__field label { font-size: 12px; font-weight: 700; color: var(--ac-text); } /* Secondary billing period, e.g. a weekly figure under the monthly price. Deliberately quiet: it is supporting information, not a competing price. */ .ac-price__alt { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ac-muted, #6b7280); line-height: 1.3; } .ac-price__alt-period { margin-left: 1px; } .ac-modal__field input, .ac-modal__field select, .ac-modal__field textarea { padding: 9px 12px; border: 1px solid var(--ac-border); border-radius: 7px; font-size: 13px; color: var(--ac-text); background: #fafafa; width: 100%; box-sizing: border-box; transition: border-color .15s; } /* Match the height of the text inputs — host themes often size selects differently, so pin the box model rather than inheriting theirs. */ .ac-modal__field select { -webkit-appearance: none; appearance: none; height: auto; /* Deliberately no line-height here. Setting one (it used to be 1.4) makes the select a couple of pixels taller or shorter than the text inputs beside it, in whichever direction the surrounding theme happens to differ. Leaving it alone lets the select size the same way the inputs do. A theme that sets an explicit line-height on its inputs should match it here via Custom CSS. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='1,1 6,6 11,1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .ac-modal__field input:focus, .ac-modal__field select:focus, .ac-modal__field textarea:focus { outline: none; border-color: var(--ac-primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,102,255,.1); } .ac-modal__field textarea { resize: vertical; min-height: 90px; } .ac-req { color: #dc2626; } .ac-modal-response { padding: 10px 14px; border-radius: 7px; font-size: 13px; margin-bottom: 14px; } .ac-modal-response--ok { background: #dcfce7; color: #15803d; } .ac-modal-response--fail { background: #fee2e2; color: #dc2626; } @media (max-width: 480px) { .ac-modal { padding: 22px 18px; max-width: calc(100% - 24px); } .ac-modal__fields { grid-template-columns: 1fr; } } /* ─── Card hidden (filter) ───────────────────────────────────── */ .ac-card--hidden { display: none !important; } /* ─── Admin-only hint (visible to logged-in admins only) ───── */ /* Renders in place of the Reserve button when no booking URL */ /* is configured. Helps diagnose missing-button reports without */ /* having to open browser dev tools or check the admin manually. */ .ac-admin-hint { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px dashed #f59e0b; border-radius: var(--ac-btn-radius, 8px); text-decoration: none; line-height: 1.3; cursor: help; transition: background .15s, border-color .15s; } .ac-admin-hint:hover { background: #fde68a; border-color: #d97706; text-decoration: none; color: #78350f; } .ac-admin-hint__cta { font-weight: 700; color: #b45309; white-space: nowrap; } /* ─── Urgency badge ────────────────────────────────────────── */ /* "Only X left" pill. Renders an attention-grabbing red/amber */ /* gradient with a soft pulsing dot, inherits border-radius */ /* from the plugin's design tokens so it feels on-brand. */ /* A CTA must never be clipped by the edge of its card, whatever the look or how little room the price column leaves. */ .ac-wrap .ac-btn { max-width: 100%; } /* Classic keeps its own inline footer markup, where the badge and the button are siblings of the price block. The row already wraps; this stops the button itself being compressed to an unreadable width first. */ .ac-wrap .ac-card__foot > .ac-btn { flex: 0 0 auto; } .ac-wrap .ac-card__foot > .ac-urgency-badge, .ac-wrap .ac-card__foot > .ac-avail-chip { flex: 0 0 auto; } .ac-urgency-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%); border-radius: 999px; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25); white-space: nowrap; vertical-align: middle; margin-bottom: 4px; } .ac-urgency-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; animation: sxPulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes sxPulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } } /* When count gets really tight (1 or 2), dial up the urgency — */ /* pure red, slightly bigger, faster pulse. */ .ac-urgency-badge[data-count="1"], .ac-urgency-badge[data-count="2"] { background: #dc2626; box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4); } .ac-urgency-badge[data-count="1"] .ac-urgency-badge__dot, .ac-urgency-badge[data-count="2"] .ac-urgency-badge__dot { animation-duration: 1s; } /* Respect users who've asked not to see motion (accessibility). */ @media (prefers-reduced-motion: reduce) { .ac-urgency-badge__dot { animation: none; opacity: 1; } } /* Position inside single-unit card so it sits next to the */ /* status badge without crowding the title. */ .ac-card--single .ac-urgency-badge { margin-left: 8px; } /* ─── Multi-site selector tabs ─────────────────────────────── */ /* Minimal text-based filter tabs above the unit grid. No pills, */ /* no card container — just clean labels with a subtle underline */ /* on the active one and a thin baseline across the whole row. */ /* */ /* NOTE: Selectors are scoped under .ac-wrap and some visual */ /* resets use !important to defeat aggressive WordPress-theme */ /* button styling (Elementor / Astra / Divi / etc. all ship */ /* global button styles with higher specificity than a plain */ /* class selector). We only use !important on the properties */ /* themes commonly override; behaviour and layout stay free for */ /* child-theme overrides. */ .ac-wrap .ac-site-tabs { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 0 24px !important; padding: 0 !important; border-bottom: 1px solid #e5e7eb !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -ms-overflow-style: none; list-style: none !important; } .ac-wrap .ac-site-tabs::-webkit-scrollbar { display: none; } /* Scroll affordance: when the location tabs overflow, fade the right edge and show a chevron so users know there are more locations. */ .ac-wrap .ac-site-tabs-wrap { position: relative !important; margin: 0 0 24px !important; } .ac-wrap .ac-site-tabs-wrap .ac-site-tabs { margin: 0 !important; } .ac-wrap .ac-site-tabs-wrap::after { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 1px !important; width: 56px !important; pointer-events: none !important; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.96)) !important; opacity: 0 !important; transition: opacity .15s ease !important; } .ac-wrap .ac-site-tabs-wrap.ac-site-tabs--scrollable:not(.ac-site-tabs--end)::after { opacity: 1 !important; } .ac-wrap .ac-site-tabs__more { position: absolute !important; top: 0 !important; bottom: 1px !important; right: 0 !important; display: none !important; align-items: center !important; justify-content: center !important; width: 34px !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; color: #0f172a !important; cursor: pointer !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; } .ac-wrap .ac-site-tabs-wrap.ac-site-tabs--scrollable:not(.ac-site-tabs--end) .ac-site-tabs__more { display: inline-flex !important; } .ac-style--dark .ac-site-tabs-wrap::after { background: linear-gradient(to right, rgba(15,23,42,0), rgba(15,23,42,0.96)) !important; } .ac-style--dark .ac-site-tabs__more { color: #e2e8f0 !important; } /* Hard-reset the button to a clean slate — themes apply heavy */ /* defaults to