/* ============================================================ * CCT Guided Booking — module styles * Built on top of UIKit; relies on theme tokens for colors. * ============================================================ */ .cct-gb-root { display: block; } /* ---- Alert legibility ---- * The host theme's uk-alert-* tokens can render dark-on-dark (observed with * uk-alert-primary on YOOtheme). The module's alerts sit on the white modal * surface, so we set explicit, self-contained colors rather than relying on * theme tokens. Scoped to the module root AND the modal wrapper because UIkit * reparents the modal to , detaching it from .cct-gb-root. */ .cct-gb-root .uk-alert, .cct-gb-modal-wrapper .uk-alert { color: #2c3e50; } .cct-gb-root .uk-alert-primary, .cct-gb-modal-wrapper .uk-alert-primary { background: #e8f3fb; color: #1a4d72; } .cct-gb-root .uk-alert-success, .cct-gb-modal-wrapper .uk-alert-success { background: #edfbf3; color: #1a7340; } .cct-gb-root .uk-alert-danger, .cct-gb-modal-wrapper .uk-alert-danger { background: #fdecea; color: #8a2a1c; } .cct-gb-root .uk-alert p, .cct-gb-modal-wrapper .uk-alert p { color: inherit; margin: 0; } /* ---- Modal layout ---- */ .cct-gb-modal-wrapper { background: #fff; border-radius: 10px; padding: 30px; margin-top: 80px; /* max-width is set per-instance via inline style in default.php */ width: 100%; } @media (max-width: 640px) { .cct-gb-modal-wrapper { padding: 20px; margin-top: 40px; border-radius: 0; } } .cct-gb-header { margin-bottom: 20px; } .cct-gb-header-title { margin: 0 0 0 0; padding-right: 40px; } .cct-gb-intro { margin-bottom: 25px; color: #666; } /* ---- Wizard form ---- */ .cct-gb-party-row { gap: 8px; } .cct-gb-party-row input[type="number"] { -moz-appearance: textfield; flex: 1; max-width: 120px; } .cct-gb-party-row input[type="number"]::-webkit-outer-spin-button, .cct-gb-party-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cct-gb-party-minus, .cct-gb-party-plus { min-width: 44px; height: 44px; font-size: 1.2rem; font-weight: 600; } .cct-gb-party-hint { margin-top: 8px; color: #c08a00; } .cct-gb-tour-choices { display: flex; gap: 16px; flex-wrap: wrap; } .cct-gb-tour-choice { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0; } .cct-gb-tour-choice-disabled { opacity: 0.5; cursor: not-allowed; } .cct-gb-tour-choice-disabled input { cursor: not-allowed; } .cct-gb-tour-hint { margin-top: 4px; color: #c08a00; } /* ---- Explainer trigger icon ---- */ .cct-gb-explainer-trigger { background: none; border: none; padding: 0 4px; cursor: pointer; color: #1e87f0; vertical-align: middle; } .cct-gb-explainer-trigger:hover { color: #0f6ecd; } /* ---- Summary on results page ---- */ .cct-gb-summary { background: #f5f5f5; padding: 12px 16px; border-radius: 6px; } .cct-gb-summary-text { flex: 1; color: #333; } .cct-gb-edit-prefs { white-space: nowrap; margin-left: 16px; } /* ---- Tiles ---- */ .cct-gb-tiles { display: flex; flex-direction: column; gap: 12px; } .cct-gb-tile { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; transition: border-color 150ms ease, box-shadow 150ms ease; } .cct-gb-tile[data-bookable="1"] { cursor: pointer; } .cct-gb-tile[data-bookable="1"]:hover { border-color: #1e87f0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .cct-gb-tile-not-bookable { opacity: 0.7; } .cct-gb-tile-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cct-gb-tile-main { flex: 1; min-width: 200px; } .cct-gb-tile-name { margin: 0 0 6px 0; font-size: 1.05rem; } .cct-gb-tile-state { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; } .cct-gb-state-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ccc; } .cct-gb-state-open .cct-gb-state-dot { background: #32d296; } .cct-gb-state-fits .cct-gb-state-dot { background: #1e87f0; } .cct-gb-state-tight .cct-gb-state-dot { background: #faa05a; } .cct-gb-state-eligible .cct-gb-state-dot { background: #999; } .cct-gb-fit-note { margin: 6px 0 0 0; color: #faa05a; } .cct-gb-incentive { margin-top: 8px; display: inline-block; padding: 4px 10px; background: #fff3cd; color: #806000; font-size: 0.85rem; border-radius: 4px; font-weight: 600; } .cct-gb-tile-action { flex-shrink: 0; } /* ---- Lead capture honeypot ---- */ .cct-gb-honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; } /* ---- Checkout (CF widget container) ---- */ .cct-gb-checkout-header { margin-bottom: 16px; } .cct-gb-cf-container { min-height: 400px; } .cct-gb-cf-iframe { width: 100%; height: 75vh; border: 0; background: #fff; } @media (max-width: 640px) { .cct-gb-cf-iframe { height: 65vh; } } .cct-gb-checkout-loading { color: #888; } /* ---- Explainer modal ---- */ .cct-gb-explainer-modal .uk-modal-dialog { max-width: 600px; } /* ---- v0.2.0: day navigation buttons ---- */ .cct-gb-day-nav { margin-bottom: 16px; } /* ---- lead success state ---- * Self-contained colours (light panel, dark text) so it reads correctly on the * white modal regardless of the host theme's heading/text colours. * * The success content is wrapped in .uk-card.uk-card-default, whose theme * tokens render dark-bg + light-text on the host theme — that was the * dark-on-dark source. We override the card surface directly here. */ .cct-gb-lead-success { margin-top: 24px; } .cct-gb-lead-success .uk-card, .cct-gb-lead-success .uk-card-default { background: #edfbf3; color: #1a7340; border: 1px solid #c3ecd5; border-radius: 8px; box-shadow: none; } /* Force the heading and body text to legible colours — don't inherit theme. */ .cct-gb-lead-success h3, .cct-gb-lead-success [data-cct-gb-lead-success-title] { color: #14532d; } .cct-gb-lead-success p, .cct-gb-lead-success .uk-text-lead, .cct-gb-lead-success [data-cct-gb-lead-success-text] { color: #1a7340; } .cct-gb-lead-success-icon { color: #32d296; } /* ---- v0.2.0: inline form errors ---- */ .cct-gb-inline-error { margin: 4px 0 0 0; } /* ---- v0.2.0: debug panel ---- */ .cct-gb-debug { color: #666; } .cct-gb-debug pre { background: #f8f8f8; padding: 8px; font-size: 0.8rem; border-radius: 4px; overflow-x: auto; max-height: 250px; color: #333; } .cct-gb-debug-section { margin-bottom: 8px; } .cct-gb-debug-section summary { cursor: pointer; padding: 4px 0; } .cct-gb-debug-section[open] summary { margin-bottom: 4px; } /* ---- "Preferred type unavailable" notice + action row ---- */ .cct-gb-no-pref { margin-top: 8px; } /* A notice in an alert colour, but lighter than a full alert box — distinct * from body text without the heavy boxed look. Used for the no-preferred-type * message and the lead/group/waitlist intro line. */ .cct-gb-notice { background: #eef5fb; color: #1a4d72; border-left: 3px solid #1e87f0; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; } .cct-gb-no-pref-actions { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 480px) { .cct-gb-no-pref-actions { flex-direction: column; } .cct-gb-no-pref-actions .uk-button { width: 100%; } } /* ---- Partner products fallback ---- */ .cct-gb-partner-products { margin-top: 16px; }