/** * VM Booking Lightbox Block * * @package club-garrigue * @since 1.0.0 */ /* ─── Block wrapper ───────────────────────────────────────────────── */ .vm-booking-lightbox-block { display: flex; justify-content: center; align-items: center; } /* ─── Trigger button ──────────────────────────────────────────────── */ /* Inherits theme button styles from .wp-block-button__link in custom.css. The cursor override handles browsers that don't apply it via the shared rule. */ .vm-booking-trigger { cursor: pointer; } /* ─── Modal overlay ───────────────────────────────────────────────── */ .vm-booking-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .vm-booking-modal[hidden] { display: none; } /* ─── Backdrop ────────────────────────────────────────────────────── */ /* Default: matches off-canvas backdrop — rgba(0, 0, 0, 0.35) */ .vm-booking-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); cursor: pointer; } /* Homepage before header is scrolled: match off-canvas panel opacity */ body.home:not(.vm-header-scrolled) .vm-booking-modal-backdrop { background: rgba(0, 0, 0, 0.5); } /* ─── Content panel ───────────────────────────────────────────────── */ .vm-booking-modal-content { position: relative; z-index: 1; width: clamp(320px, 70vw, 1400px); max-height: 90vh; background: rgba(250, 246, 240, 0.97); /* matches off-canvas panel: #FAF6F0 */ border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; animation: vm-booking-modal-in 0.25s ease; } @keyframes vm-booking-modal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* ─── Close button ────────────────────────────────────────────────── */ .vm-booking-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: rgba(28, 26, 23, 0.08); border-radius: 50%; color: var(--wp--preset--color--ink, #1c1a17); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .vm-booking-modal-close:hover { background: rgba(28, 26, 23, 0.18); transform: rotate(90deg); } .vm-booking-modal-close:focus-visible { outline: 2px solid var(--wp--preset--color--ink, #1c1a17); outline-offset: 2px; } /* ─── Modal title ─────────────────────────────────────────────────── */ .vm-booking-modal-title { font-family: var(--font-serif); margin: 0; padding: 32px 32px 0; font-size: clamp(1.25rem, 2vw, 1.75rem); text-align: center; font-weight: 500; } .vm-booking-modal-title em{ color: var(--wp--preset--color--accent); font-weight: 700; } /* ─── Modal body ──────────────────────────────────────────────────── */ .vm-booking-modal-body { overflow-y: auto; overflow-x: hidden; padding: 52px 32px 32px; -webkit-overflow-scrolling: touch; display: flex; flex-direction: row; gap: 24px; } /* When a title is present it carries its own top padding, so reduce body top */ .vm-booking-modal-title + .vm-booking-modal-body { padding-top: 20px; } @media (max-width: 1190px) { .vm-booking-modal-body { flex-direction: column; } .vm-booking-trigger { /* display: none; */ } } @media (max-width: 640px) { .vm-booking-modal-body { padding: 52px 20px 24px; } .vm-booking-modal-content{ width: 96vw; height: 78vh; } } /* ─── Embed containers ────────────────────────────────────────────── */ .vm-booking-embed { flex: 1 1 0; min-width: 0; /* allows flex children to shrink below their content size */ } .vm-booking-embed iframe { width: 100% !important; min-height: 659px !important; } /* ─── Editor placeholder ──────────────────────────────────────────── */ .vm-booking-lightbox-placeholder { padding: 24px; text-align: center; color: #888; font-style: italic; border: 1px dashed #ccc; border-radius: 4px; } /* ─── Scroll lock (applied to by JS) ───────────────────────── */ html.vm-scroll-locked, html.vm-scroll-locked body { overflow: hidden; } /* ─── Reduced motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .vm-booking-modal-content, .vm-booking-modal-close { animation: none; transition: none; } }