/** * GAS Booking Plugin - Dwellfort-Inspired Design */ /* ========================================================================== CSS Variables ========================================================================== */ :root { --gas-primary: #2563eb; --gas-primary-dark: #1d4ed8; --gas-secondary: #64748b; --gas-text: #1e293b; --gas-text-light: #64748b; --gas-success: #10b981; --gas-error: #ef4444; --gas-border: #e2e8f0; --gas-bg: #f8fafc; --gas-white: #ffffff; --gas-shadow: 0 1px 3px rgba(0,0,0,0.1); --gas-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --gas-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); --gas-radius: 8px; --gas-radius-lg: 12px; } /* ========================================================================== Base Reset & Typography ========================================================================== */ .gas-room-widget { /* 2026-07-22 Steve — was hardcoded to a system stack, overriding whatever the theme set on . Web Builder heading/body font selections never reached the booking widget. `inherit` lets it pick up the theme's --developer-font cascade. */ font-family: inherit; color: var(--gas-text); line-height: 1.6; max-width: 1400px; margin: 0 auto; padding: 0 16px; } .gas-room-widget * { box-sizing: border-box; } /* Loading State */ .gas-room-loading { text-align: center; padding: 80px 20px; } .gas-spinner { width: 40px; height: 40px; border: 3px solid var(--gas-border); border-top-color: var(--gas-primary); border-radius: 50%; margin: 0 auto; animation: gas-spin 1s linear infinite; } @keyframes gas-spin { to { transform: rotate(360deg); } } /* ========================================================================== Image Gallery - Dwellfort Style (1 large + 4 small grid) ========================================================================== */ /* ====================================================================== GALLERY — LOCKED LAYOUT. DO NOT EDIT. This CSS is deliberately rigid with !important on every property. It has been broken and fixed 10+ times by theme interference. DO NOT: - Remove any !important - Change heights (480px desktop, 400px tablet, 300px mobile) - Change grid-template-columns or grid-template-rows - Remove min-width:0 or min-height:0 (prevents grid blowout) - Make any property relative (%, auto, inherit) — use fixed px only If the gallery looks wrong, the bug is in the HTML/JS, not this CSS. ====================================================================== */ .gas-gallery { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 480px !important; gap: 4px !important; height: 480px !important; max-height: 480px !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 32px !important; box-sizing: border-box !important; width: 100% !important; } .gas-gallery-main { width: 100% !important; height: 480px !important; max-height: 480px !important; min-height: 480px !important; object-fit: cover !important; display: block !important; cursor: pointer; min-width: 0 !important; } .gas-gallery-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; gap: 4px !important; height: 480px !important; max-height: 480px !important; min-width: 0 !important; } .gas-gallery-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; cursor: pointer; transition: opacity 0.2s; min-width: 0 !important; min-height: 0 !important; } .gas-gallery-thumb:hover { opacity: 0.85; } .gas-gallery-more { position: relative !important; cursor: pointer; height: 100% !important; min-width: 0 !important; overflow: hidden !important; } .gas-gallery-more img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .gas-gallery-more-overlay, html body .gas-gallery-more-overlay { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; /* Beats theme gradient-text rules that clip color via -webkit-text- fill-color: transparent. Steve 2026-08-22 — Dwellfort. */ -webkit-text-fill-color: #ffffff !important; background-clip: initial !important; -webkit-background-clip: initial !important; font-weight: 600 !important; font-size: 14px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .gas-gallery-placeholder { grid-column: 1 / 3; background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); display: flex; align-items: center; justify-content: center; font-size: 80px; height: 480px !important; } /* Gallery Lightbox */ .gas-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 10000; align-items: center; justify-content: center; cursor: pointer; } .gas-lightbox.active { display: flex; } .gas-lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; cursor: default; } .gas-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; cursor: default; } .gas-lightbox-close { position: absolute; top: 20px; right: 20px; background: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 10001; display: flex; align-items: center; justify-content: center; } .gas-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; color: white; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; z-index: 10002; } .gas-lightbox-nav:hover { background: rgba(0, 0, 0, 0.75); transform: translateY(-50%) scale(1.05); } .gas-lightbox-prev { left: 16px; } .gas-lightbox-next { right: 16px; } .gas-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 14px; } @media (max-width: 768px) { .gas-lightbox-nav { width: 44px; height: 44px; opacity: 1; } } /* ========================================================================== Main Layout - Two Column ========================================================================== */ .gas-room-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; } @media (max-width: 1024px) { .gas-room-layout { grid-template-columns: 1fr; gap: 32px; } .gas-gallery { height: 400px !important; max-height: 400px !important; grid-template-rows: 400px !important; } .gas-gallery-main { height: 400px !important; max-height: 400px !important; min-height: 400px !important; } .gas-gallery-grid { height: 400px !important; max-height: 400px !important; } .gas-room-widget > .gas-gallery, .gas-room-widget > .gas-room-layout, .gas-room-widget .gas-booking-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 640px) { .gas-gallery { grid-template-columns: 1fr !important; grid-template-rows: 300px !important; height: 300px !important; max-height: 300px !important; } .gas-gallery-main { height: 300px !important; max-height: 300px !important; min-height: 300px !important; aspect-ratio: auto !important; } .gas-gallery-grid { display: none !important; } } /* ========================================================================== Room Header ========================================================================== */ .gas-room-header { margin-bottom: 24px; } .gas-room-title { font-size: 28px; font-weight: 700; margin: 0 0 8px 0; color: var(--gas-text); } .gas-room-location { font-size: 15px; color: var(--gas-text-light); margin: 0 0 16px 0; } .gas-room-meta { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0; border-top: 1px solid var(--gas-border); border-bottom: 1px solid var(--gas-border); } .gas-meta-item { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--gas-text); } .gas-meta-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .gas-meta-icon svg { width: 20px; height: 20px; stroke: var(--gas-text-light); fill: none; stroke-width: 2; } /* ========================================================================== Tabs Navigation ========================================================================== */ .gas-tabs { margin-top: 32px; } .gas-tabs-nav { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; } .gas-tab-btn { padding: 10px 20px; background: #f1f5f9; border: none; border-radius: var(--gas-radius); font-size: 14px; font-weight: 500; color: #94a3b8; cursor: pointer; white-space: nowrap; transition: all 0.2s; } .gas-tab-btn:hover { background: #e2e8f0; color: #64748b; } .gas-tab-btn.active { background: var(--gas-primary); color: white; } .gas-tab-content { display: none; } .gas-tab-content.active { display: block; } /* ========================================================================== Description Tab ========================================================================== */ .gas-description { font-size: 15px; line-height: 1.8; color: var(--gas-text); } .gas-description p { margin: 0 0 16px 0; } .gas-description-short { margin-bottom: 16px; } .gas-more-info-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 8px 0; font-size: 15px; font-weight: 600; color: var(--gas-primary); cursor: pointer; transition: color 0.2s; } .gas-more-info-toggle:hover { color: var(--gas-primary-dark); } .gas-more-info-toggle svg { width: 16px; height: 16px; transition: transform 0.2s; } .gas-more-info-toggle.active svg { transform: rotate(180deg); } .gas-description-full { display: none; padding-top: 16px; border-top: 1px solid var(--gas-border); margin-top: 8px; } .gas-description-full.active { display: block; } /* ========================================================================== Features/Amenities Tab ========================================================================== */ .gas-amenities-category { margin-bottom: 32px; } .gas-amenities-category:last-child { margin-bottom: 0; } .gas-amenities-category-title { font-size: 16px; font-weight: 600; margin: 0 0 16px 0; color: var(--gas-text); } .gas-amenities-list { display: flex; flex-wrap: wrap; gap: 12px; } .gas-amenity-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--gas-bg); border: 1px solid var(--gas-border); border-radius: var(--gas-radius); font-size: 14px; color: var(--gas-text); } .gas-amenity-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gas-amenity-icon svg { width: 18px; height: 18px; stroke: var(--gas-text-light); fill: none; stroke-width: 2; } /* ========================================================================== Availability Calendar Tab - 2 Month View ========================================================================== */ .gas-calendar-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 600px; } .gas-calendar { background: var(--gas-white); } .gas-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .gas-calendar-title { font-size: 14px; font-weight: 600; } .gas-calendar-nav { display: flex; gap: 4px; } .gas-calendar-nav button { width: 28px; height: 28px; border: 1px solid var(--gas-border); background: white; border-radius: var(--gas-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; } .gas-calendar-nav button:hover { background: var(--gas-bg); } .gas-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .gas-calendar-day-name { text-align: center; font-size: 10px; font-weight: 500; color: var(--gas-text-light); padding: 4px 0; } .gas-calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: var(--gas-radius); } .gas-calendar-day.available { background: #d1fae5; color: #065f46; } .gas-calendar-day.unavailable { background: #fecaca; color: #991b1b; } .gas-calendar-day.empty { background: transparent; } .gas-calendar-day.past { color: #cbd5e1; background: #f8fafc; } .gas-calendar-legend { display: flex; gap: 16px; margin-top: 16px; grid-column: 1 / 3; } .gas-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gas-text-light); } .gas-legend-dot { width: 12px; height: 12px; border-radius: 3px; } .gas-legend-dot.available { background: #d1fae5; } .gas-legend-dot.unavailable { background: #fecaca; } @media (max-width: 500px) { .gas-calendar-container { grid-template-columns: 1fr; position: relative; } /* Show only one calendar at a time on mobile */ .gas-calendar-container .gas-calendar:last-of-type { display: none; } .gas-calendar-container.show-next .gas-calendar:first-of-type { display: none; } .gas-calendar-container.show-next .gas-calendar:last-of-type { display: block; } /* Mobile calendar navigation */ .gas-calendar-nav { position: absolute; top: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; } .gas-calendar-nav button { pointer-events: auto; width: 36px; height: 36px; font-size: 18px; } .gas-calendar-header { justify-content: center; } .gas-calendar-title { font-size: 16px; } .gas-calendar-legend { grid-column: 1; flex-wrap: wrap; } /* Mobile swipe hint */ .gas-calendar-container::after { content: '← Swipe to change month →'; display: block; text-align: center; font-size: 11px; color: #9ca3af; padding: 8px 0 0; grid-column: 1; } } /* ========================================================================== Terms Tab - Accordion ========================================================================== */ .gas-accordion { border: 1px solid var(--gas-border); border-radius: var(--gas-radius); overflow: hidden; } .gas-accordion-item { border-bottom: 1px solid var(--gas-border); } .gas-accordion-item:last-child { border-bottom: none; } .gas-accordion-header { width: 100%; padding: 16px 20px; background: white; border: none; text-align: left; font-size: 15px; font-weight: 500; color: var(--gas-text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; } .gas-accordion-header:hover { background: var(--gas-bg); } .gas-accordion-icon { font-size: 20px; font-weight: 300; transition: transform 0.2s; } .gas-accordion-item.active .gas-accordion-icon { transform: rotate(45deg); } .gas-accordion-content { display: none; padding: 0 20px 20px; font-size: 14px; line-height: 1.7; color: var(--gas-text); } .gas-accordion-item.active .gas-accordion-content { display: block; } /* Terms List Styling */ .gas-terms-list { list-style: none; padding: 0; margin: 0; } .gas-terms-list li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .gas-terms-list li:last-child { border-bottom: none; } .gas-terms-list strong { color: #374151; } /* ========================================================================== Map Section ========================================================================== */ .gas-map-container { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--gas-border); } .gas-map-title { font-size: 18px; font-weight: 600; margin: 0 0 16px 0; } .gas-map { width: 100%; height: 300px; border-radius: var(--gas-radius); overflow: hidden; border: 1px solid var(--gas-border); z-index: 1; } .gas-map iframe { width: 100%; height: 100%; border: none; } /* Leaflet popup styling */ .gas-map .leaflet-popup-content-wrapper { border-radius: var(--gas-radius); } .gas-map .leaflet-popup-content { margin: 10px 14px; font-size: 14px; } /* ========================================================================== Booking Card (Sticky Sidebar) ========================================================================== */ .gas-booking-card { position: sticky; top: 24px; background: var(--gas-white); border-radius: var(--gas-radius-lg); box-shadow: var(--gas-shadow-lg); border: 1px solid var(--gas-border); overflow: hidden; } .gas-booking-card-header { padding: 20px 24px; border-bottom: 1px solid var(--gas-border); } .gas-price-display { display: flex; align-items: baseline; gap: 4px; } .gas-price-amount { font-size: 24px; font-weight: 700; color: var(--gas-text); } .gas-price-period { font-size: 15px; color: var(--gas-text-light); } .gas-booking-card-body { padding: 20px 24px; } .gas-date-inputs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); overflow: hidden; margin-bottom: 12px; } .gas-date-field { padding: 12px; } .gas-date-field:first-child { border-right: 1px solid var(--gas-border); } .gas-date-field label { display: block; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gas-text); margin-bottom: 4px; } .gas-date-field input { width: 100%; border: none; font-size: 14px; color: var(--gas-text); background: transparent; padding: 0; } .gas-date-field input:focus { outline: none; } .gas-guest-field { border: 1px solid var(--gas-border); border-radius: var(--gas-radius); padding: 12px; margin-bottom: 16px; } .gas-guest-fields { display: flex; gap: 12px; margin-bottom: 16px; } .gas-adults-field, .gas-children-field { flex: 1; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); padding: 12px; } .gas-children-field.hidden { display: none; } .gas-adults-field label, .gas-children-field label { display: block; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gas-text); margin-bottom: 4px; } .gas-child-age-label { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--gas-text-muted); } .gas-adults-field select, .gas-children-field select { width: 100%; border: none; font-size: 14px; color: var(--gas-text); background: transparent; padding: 0; cursor: pointer; } .gas-adults-field select:focus, .gas-children-field select:focus { outline: none; } .gas-guest-field label { display: block; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gas-text); margin-bottom: 4px; } .gas-guest-field select { width: 100%; border: none; font-size: 14px; color: var(--gas-text); background: transparent; padding: 0; cursor: pointer; } .gas-guest-field select:focus { outline: none; } .gas-occupancy-adjustment { display: flex; align-items: center; gap: 6px; } .gas-occupancy-adjustment::before { content: "👥"; } .gas-price-breakdown { background: var(--gas-bg); border-radius: var(--gas-radius); padding: 16px; margin-bottom: 16px; } .gas-price-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; } .gas-price-row:last-child { margin-bottom: 0; padding-top: 8px; border-top: 1px solid var(--gas-border); font-weight: 600; } /* Vertical-align the price column: tabular-num digits + right-align so .00 lines up. */ .gas-price-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; min-width: 6rem; } .gas-book-btn { width: 100%; padding: 14px 24px; background: var(--gas-primary); color: white; border: none; border-radius: var(--gas-radius); font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.2s; } .gas-book-btn:hover:not(:disabled) { background: var(--gas-primary-dark); transform: translateY(-1px); } .gas-book-btn:disabled { background: var(--gas-secondary); cursor: not-allowed; } /* Add to Cart Button */ .gas-add-to-cart-btn { width: 100%; padding: 12px 24px; margin-top: 10px; background: white; color: var(--gas-primary); border: 2px solid var(--gas-primary); border-radius: var(--gas-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; } .gas-add-to-cart-btn:hover:not(:disabled) { background: var(--gas-primary); color: white; } .gas-add-to-cart-btn:disabled { border-color: var(--gas-secondary); color: var(--gas-secondary); cursor: not-allowed; } .gas-cart-status { text-align: center; color: #1e40af; } .gas-view-cart-link { color: var(--gas-primary); font-weight: 600; } /* ========================================================================== Booking Form ========================================================================== */ .gas-booking-form-section { border-top: 1px solid var(--gas-border); padding: 20px 24px; } .gas-form-title { font-size: 16px; font-weight: 600; margin: 0 0 16px 0; } .gas-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .gas-form-field { display: flex; flex-direction: column; } .gas-form-field.full-width { grid-column: 1 / -1; } .gas-form-field label { font-size: 12px; font-weight: 500; color: var(--gas-text); margin-bottom: 4px; } .gas-form-field input, .gas-form-field textarea { padding: 10px 12px; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; } .gas-form-field input:focus, .gas-form-field textarea:focus { outline: none; border-color: var(--gas-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .gas-form-field textarea { resize: vertical; min-height: 80px; } .gas-submit-btn { width: 100%; padding: 14px 24px; background: var(--gas-success); color: white; border: none; border-radius: var(--gas-radius); font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: background 0.2s; } .gas-submit-btn:hover { background: #059669; } /* ========================================================================== Confirmation ========================================================================== */ .gas-booking-confirmation { padding: 32px 24px; text-align: center; } .gas-confirmation-icon { width: 64px; height: 64px; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 32px; } .gas-confirmation-title { font-size: 20px; font-weight: 600; margin: 0 0 8px 0; } .gas-confirmation-text { font-size: 14px; color: var(--gas-text-light); margin: 0 0 16px 0; } .gas-booking-id { background: var(--gas-bg); padding: 12px 16px; border-radius: var(--gas-radius); font-size: 14px; } /* ========================================================================== Error State ========================================================================== */ .gas-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 16px; border-radius: var(--gas-radius); font-size: 14px; } /* ========================================================================== Rooms Grid (Book Now Page) ========================================================================== */ .gas-rooms-container { max-width: 1400px; margin: 0 auto; padding: 0 16px; } .gas-filter-section { background: var(--gas-white); border-radius: var(--gas-radius-lg); box-shadow: var(--gas-shadow); padding: 24px; margin-bottom: 32px; } .gas-filter-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .gas-filter-field { flex: 1; min-width: 150px; } .gas-filter-field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gas-text); margin-bottom: 6px; } .gas-filter-field input, .gas-filter-field select { width: 100%; padding: 12px; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); font-size: 14px; } .gas-filter-btn { padding: 12px 32px; background: var(--gas-primary); color: white; border: none; border-radius: var(--gas-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .gas-filter-btn:hover { background: var(--gas-primary-dark); } .gas-rooms-section { margin-bottom: 40px; } .gas-section-title { font-size: 20px; font-weight: 600; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid var(--gas-primary); } .gas-section-title.unavailable { border-bottom-color: var(--gas-border); } .gas-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; justify-content: center; } /* Mobile: center single card */ @media (max-width: 400px) { .gas-rooms-grid { grid-template-columns: 1fr; max-width: 350px; margin: 0 auto; } } .gas-room-card { background: var(--gas-white); border-radius: var(--gas-radius-lg); box-shadow: var(--gas-shadow); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } /* Pin the price/button row to the bottom of every card so buttons across a row line up no matter how many lines of title/description sit above. */ .gas-room-card .gas-room-details { display: flex; flex-direction: column; flex: 1; } .gas-room-card .gas-room-footer { margin-top: auto; } .gas-room-card:hover { transform: translateY(-4px); box-shadow: var(--gas-shadow-lg); } .gas-room-card.unavailable { opacity: 0.6; } .gas-room-card.unavailable:hover { transform: none; box-shadow: var(--gas-shadow); } .gas-room-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .gas-room-image-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; } .gas-room-info { padding: 20px; } .gas-room-card-title { font-size: 18px; font-weight: 600; margin: 0 0 4px 0; } .gas-room-card-subtitle { font-size: 14px; color: var(--gas-text-light); margin: 0 0 12px 0; } .gas-room-card-meta { display: flex; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--gas-text-light); } .gas-room-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gas-border); } .gas-room-price { font-size: 18px; font-weight: 700; } .gas-room-price span { font-size: 13px; font-weight: 400; color: var(--gas-text-light); } .gas-view-btn { padding: 10px 20px; background: var(--gas-primary); color: white; border: none; border-radius: var(--gas-radius); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s; } .gas-view-btn:hover { background: var(--gas-primary-dark); color: white; } /* ========================================================================== Search Widget ========================================================================== */ /* ========================================================================== Search Widget - Multiple Layouts ========================================================================== */ .gas-search-widget { background: var(--gas-white); border-radius: var(--gas-radius-lg); box-shadow: var(--gas-shadow-lg); padding: 24px; margin: 0 auto; box-sizing: border-box; } .gas-search-widget * { box-sizing: border-box; } /* Fields container */ .gas-search-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } /* Individual field */ .gas-search-field { display: flex; flex-direction: column; } .gas-search-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gas-text); margin-bottom: 6px; } /* Compact mode: labels-as-placeholders. Halves the widget depth. Enabled via the "labels=inside" shortcode attr → adds the .gas-search-labels-inside class on the widget root. Keeps in DOM (screen readers) but visually removes it; placeholders on inputs are swapped by the PHP shortcode for the label text. */ .gas-search-labels-inside .gas-search-field label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .gas-search-field input, .gas-search-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); font-size: 14px; height: 46px; background: var(--gas-white); box-sizing: border-box; max-width: 100%; } .gas-search-field input:focus, .gas-search-field select:focus { outline: none; border-color: var(--gas-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .gas-search-field input::placeholder { color: var(--gas-text-light); } /* Search button */ .gas-search-button { padding: 12px 28px; background: var(--gas-primary); color: white; border: none; border-radius: var(--gas-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 46px; white-space: nowrap; } .gas-search-button:hover { background: var(--gas-primary-dark); transform: translateY(-1px); } /* ====== VERTICAL LAYOUT (Default) ====== */ .gas-search-vertical .gas-search-fields { flex-direction: column; } .gas-search-vertical .gas-search-field { width: 100%; } .gas-search-vertical .gas-search-submit { margin-top: 8px; } .gas-search-vertical .gas-search-submit .gas-search-button { width: auto; } .gas-search-vertical .gas-search-submit.gas-button-full .gas-search-button { width: 100%; } /* ====== HORIZONTAL LAYOUT ====== */ .gas-search-horizontal { max-width: 100%; } .gas-search-horizontal .gas-search-fields { flex-direction: row; flex-wrap: nowrap; } .gas-search-horizontal .gas-search-field { flex: 1 1 auto; min-width: 0; } .gas-search-horizontal .gas-search-location { flex: 1.5 1 auto; } .gas-search-horizontal .gas-search-submit { flex: 0 0 auto; } .gas-search-horizontal .gas-search-submit .gas-search-button { width: auto; } /* ====== INLINE LAYOUT (Compact single row) ====== */ .gas-search-inline { padding: 12px 16px; max-width: 100%; } .gas-search-inline .gas-search-fields { flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: center; } .gas-search-inline .gas-search-field { flex: 1 1 auto; min-width: 0; } .gas-search-inline .gas-search-field label { display: none; } .gas-search-inline .gas-search-field input, .gas-search-inline .gas-search-field select { height: 40px; padding: 8px 12px; font-size: 13px; } .gas-search-inline .gas-search-location { flex: 1.5 1 auto; } .gas-search-inline .gas-search-submit { flex: 0 0 auto; } .gas-search-inline .gas-search-button { height: 40px; padding: 8px 20px; font-size: 13px; } /* ====== RESPONSIVE ====== */ @media (max-width: 900px) { .gas-search-horizontal .gas-search-fields { flex-wrap: wrap; } .gas-search-horizontal .gas-search-field { flex: 1 1 calc(50% - 8px); min-width: 140px; } .gas-search-horizontal .gas-search-location { flex: 1 1 100%; } .gas-search-horizontal .gas-search-submit { flex: 1 1 100%; } .gas-search-horizontal .gas-search-submit .gas-search-button { width: 100%; } } @media (max-width: 768px) { .gas-search-horizontal .gas-search-fields, .gas-search-inline .gas-search-fields { flex-direction: column !important; flex-wrap: wrap !important; } .gas-search-horizontal .gas-search-field, .gas-search-inline .gas-search-field { flex: 1 1 100% !important; width: 100% !important; } .gas-search-inline .gas-search-field label { display: block; } .gas-search-inline { padding: 20px; } .gas-search-inline .gas-search-field input, .gas-search-inline .gas-search-field select, .gas-search-inline .gas-search-button { height: 46px; } /* Force widget to fit mobile viewport */ .gas-search-widget { max-width: calc(100vw - 30px) !important; width: 100% !important; padding: 20px !important; } .gas-search-fields { width: 100% !important; overflow: hidden; } .gas-search-field { width: 100% !important; padding: 0 !important; margin: 0 !important; } .gas-search-field input, .gas-search-field select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border-radius: var(--gas-radius, 8px) !important; } .gas-search-horizontal .gas-search-submit { width: 100%; } .gas-search-horizontal .gas-search-submit .gas-search-button { width: 100%; } } /* ========================================================================== Mobile Responsive ========================================================================== */ @media (max-width: 1024px) { .gas-room-sidebar { order: -1; } .gas-booking-card { position: static; } } @media (max-width: 640px) { .gas-room-title { font-size: 22px; } .gas-date-inputs { grid-template-columns: 1fr; } .gas-date-inputs input { font-size: 16px !important; /* Prevents iOS zoom on focus */ } .gas-date-field:first-child { border-right: none; border-bottom: 1px solid var(--gas-border); } .gas-form-grid { grid-template-columns: 1fr; } .gas-room-meta { gap: 16px; } /* Tabs on mobile — wrap to a second row so 6 tabs (Description / Availability / Features / Map / Reviews / Terms) can't push the parent layout right off-centre. width:100% + max-width:100% clamps the flex container to viewport. Steve 2026-08-22. */ .gas-tabs-nav { gap: 4px; flex-wrap: wrap; width: 100%; max-width: 100%; overflow-x: hidden; } .gas-tab-btn { padding: 10px 12px; font-size: 13px; flex: 0 0 auto; } /* Root-level overflow clamp on the whole room-detail widget. Belt-and- braces defence: no matter what child grows (map tab container, long unit name, added tab, Leaflet reflow, etc.), the widget stays inside the viewport and the layout stays centred. iOS Safari was showing the whole page shifted right on the room page after the Map tab was added — this contains it. Steve 2026-08-22. */ .gas-room-widget { max-width: 100%; overflow-x: hidden; box-sizing: border-box; } .gas-tab-content, #gas-room-detail-map { max-width: 100%; box-sizing: border-box; } } /* ========================================================================== Flatpickr Customization ========================================================================== */ .flatpickr-calendar { border-radius: var(--gas-radius) !important; box-shadow: var(--gas-shadow-lg) !important; border: 1px solid var(--gas-border) !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--gas-primary) !important; border-color: var(--gas-primary) !important; } .flatpickr-day:hover { background: var(--gas-bg) !important; } .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--gas-primary-dark) !important; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gas-primary) !important; } /* Alternative date input style */ .gas-date-field input.flatpickr-input { cursor: pointer; } .gas-date-field input.flatpickr-alt-input { width: 100%; border: none; font-size: 14px; color: var(--gas-text); background: transparent; padding: 0; cursor: pointer; } /* ========================================================================== Rooms Grid Map Markers ========================================================================== */ .gas-map-marker { background: none; border: none; } .gas-marker-pin { width: 30px; height: 40px; background: #667eea; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.3); border: 3px solid white; } .gas-marker-pin::after { content: ''; width: 10px; height: 10px; background: white; position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gas-map-marker:hover .gas-marker-pin { background: #5a6fd6; transform: rotate(-45deg) scale(1.1); } /* Black-pin variant (mapConfig.marker_style = 'black'). Cleaner SVG- backed teardrop with white centre dot + drop shadow. Steve 2026-08-21. */ .gas-map-marker--black .gas-marker-pin { width: 28px; height: 40px; background: transparent url("data:image/svg+xml;utf8,") no-repeat center/contain; border-radius: 0; transform: none; box-shadow: none; border: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); transition: transform 0.15s ease; } .gas-map-marker--black .gas-marker-pin::after { display: none; } .gas-map-marker--black:hover .gas-marker-pin { transform: scale(1.12) translateY(-2px); background-color: transparent; } /* Rooms map popup styling */ .gas-rooms-map .leaflet-popup-content-wrapper { border-radius: var(--gas-radius-lg); box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .gas-rooms-map .leaflet-popup-content { margin: 0; padding: 0; } .gas-rooms-map .leaflet-popup-tip { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .gas-map-popup { padding: 12px; } .gas-map-popup-image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--gas-radius); margin-bottom: 10px; } .gas-map-popup-title { font-weight: 600; font-size: 15px; color: #1e293b; margin-bottom: 4px; line-height: 1.3; } .gas-map-popup-property { font-size: 13px; color: #64748b; margin-bottom: 8px; } .gas-map-popup-price { font-weight: 700; font-size: 18px; color: #1e293b; } .gas-map-popup-price small { font-weight: 400; font-size: 13px; color: #64748b; } .gas-map-popup-link { display: inline-block; margin-top: 10px; background: #667eea; color: white !important; padding: 8px 16px; border-radius: var(--gas-radius); text-decoration: none !important; font-size: 13px; font-weight: 600; transition: background 0.2s; } .gas-map-popup-link:hover { background: #5a6fd6; color: white !important; } /* ========================================================================== Offers Banner ========================================================================== */ .gas-offers-banner { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; border-radius: var(--gas-radius); padding: 16px 20px; margin-bottom: 16px; position: relative; overflow: hidden; } .gas-offers-banner::before { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: rgba(245, 158, 11, 0.2); border-radius: 50%; } .gas-offer-badge { display: inline-block; background: #f59e0b; color: white; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: var(--gas-radius-lg); margin-bottom: 8px; } .gas-offer-name { font-size: 16px; font-weight: 700; color: #92400e; margin-bottom: 4px; } .gas-offer-description { font-size: 13px; color: #a16207; margin-bottom: 10px; line-height: 1.4; } .gas-offers-link { display: inline-block; color: #92400e; font-weight: 600; font-size: 14px; text-decoration: none; transition: color 0.2s; } .gas-offers-link:hover { color: #78350f; text-decoration: underline; } .gas-offer-discount { font-size: 20px; font-weight: 700; color: #b45309; } .gas-offer-teaser { font-size: 15px; font-weight: 600; color: #92400e; margin-bottom: 4px; } .gas-offer-hint { font-size: 12px; color: #a16207; margin-top: 6px; } /* ========================================================================== Upsells Section ========================================================================== */ .gas-upsells-section { border-top: 1px solid var(--gas-border); padding-top: 16px; margin-top: 16px; } .gas-upsells-header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--gas-text); margin-bottom: 12px; } .gas-upsells-icon { font-size: 16px; } .gas-upsells-list { display: flex; flex-direction: column; gap: 10px; } .gas-upsell-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--gas-bg); border-radius: var(--gas-radius); border: 1px solid var(--gas-border); transition: all 0.2s; cursor: pointer; } .gas-upsell-item:hover { border-color: var(--gas-primary); background: rgba(37, 99, 235, 0.05); } .gas-upsell-item.selected { border-color: var(--gas-primary); background: rgba(37, 99, 235, 0.1); } .gas-upsell-checkbox { width: 20px; height: 20px; border: 2px solid var(--gas-border); border-radius: var(--gas-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; margin-top: 2px; } .gas-upsell-item.selected .gas-upsell-checkbox { background: var(--gas-primary); border-color: var(--gas-primary); } .gas-upsell-item.selected .gas-upsell-checkbox::after { content: '✓'; color: white; font-size: 12px; font-weight: bold; } .gas-upsell-info { flex: 1; min-width: 0; } .gas-upsell-name { font-weight: 600; font-size: 14px; color: var(--gas-text); margin-bottom: 2px; } .gas-upsell-description { font-size: 12px; color: var(--gas-muted); line-height: 1.4; } /* Enhance-Your-Stay upsell descriptions clamp to 2 lines by default with a "more" link the JS toggles. Steve 2026-07-11 — the classes were being emitted by renderCheckoutUpsells but had no CSS backing so the clamp never applied. */ .gas-upsell-desc { font-size: 13px; color: var(--gas-muted, #64748b); line-height: 1.45; margin: 4px 0 0; } .gas-upsell-desc-clamp { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 2.9em; } .gas-upsell-desc-more { display: inline-block; margin-top: 6px; padding: 4px 10px; background: #f3f4f6; color: #6d28d9; font-size: 12px; font-weight: 600; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.4; transition: background 0.15s ease; } .gas-upsell-desc-more:hover { background: #ede9fe; border-color: #ddd6fe; } .gas-upsell-price { font-weight: 700; font-size: 14px; color: var(--gas-primary); white-space: nowrap; } .gas-upsell-price small { font-weight: 400; font-size: 11px; color: var(--gas-muted); } .gas-upsell-quantity { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .gas-upsell-qty-btn { width: 24px; height: 24px; border: 1px solid var(--gas-border); background: white; border-radius: var(--gas-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; } .gas-upsell-qty-btn:hover { background: var(--gas-bg); } .gas-upsell-qty-value { font-weight: 600; min-width: 20px; text-align: center; } /* Multi-quantity stepper. Applies to both .gas-upsell-item (room widget) and .gas-upsell-card (checkout) — same UX, same class hooks. Tap container → +1 (cap at max). The "−" corner button decrements one at a time. Visible only on items with max_quantity > 1 (.gas-upsell-qty-aware) AND qty >= 1 (.selected). */ .gas-upsell-qty-aware { position: relative; } .gas-upsell-qty-badge { display: none; align-items: center; background: var(--gas-primary); color: white; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; white-space: nowrap; } .gas-upsell-qty-aware.selected .gas-upsell-qty-badge { display: inline-flex; } .gas-upsell-qty-minus { display: none; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 1px solid var(--gas-border); background: white; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; color: #475569; box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 2; } .gas-upsell-qty-minus:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; } .gas-upsell-qty-aware.selected .gas-upsell-qty-minus { display: inline-flex; } /* When at max, the card itself stops looking "tap to add". Soft visual cue. */ .gas-upsell-qty-max { cursor: default; } /* ========================================================================== Voucher Section ========================================================================== */ .gas-voucher-section { margin-top: 16px; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--gas-border); } .gas-voucher-toggle { font-size: 13px; color: var(--gas-primary); cursor: pointer; text-align: center; } .gas-voucher-toggle:hover { text-decoration: underline; } .gas-voucher-input { display: flex; gap: 8px; margin-top: 10px; } .gas-voucher-code { flex: 1; padding: 10px 12px; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); font-size: 14px; text-transform: uppercase; } .gas-voucher-code:focus { outline: none; border-color: var(--gas-primary); } .gas-voucher-apply { padding: 10px 16px; background: var(--gas-primary); color: white; border: none; border-radius: var(--gas-radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .gas-voucher-apply:hover { filter: brightness(0.9); } .gas-voucher-applied { display: flex; align-items: center; justify-content: space-between; background: #dcfce7; border: 1px solid #86efac; padding: 10px 14px; border-radius: var(--gas-radius); margin-top: 10px; } .gas-voucher-name { font-size: 13px; font-weight: 600; color: #166534; } .gas-voucher-remove { background: none; border: none; color: #166534; cursor: pointer; font-size: 16px; padding: 0 4px; } .gas-voucher-remove:hover { color: #dc2626; } /* Price breakdown updates */ .gas-price-row.gas-offer-row .gas-offer-amount, .gas-price-row.gas-voucher-row .gas-voucher-amount { color: #16a34a; } .gas-price-row.gas-total-row { font-weight: 700; font-size: 16px; border-top: 2px solid var(--gas-border); padding-top: 12px; margin-top: 8px; } /* ========================================================================== Category Headers in Upsells ========================================================================== */ .gas-upsell-category { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gas-muted); margin-top: 12px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--gas-border); } .gas-upsell-category:first-child { margin-top: 0; } /* ========================================================================== Rate Options (Standard vs Offer) ========================================================================== */ .gas-rate-options { margin: 16px 0; border: 1px solid var(--gas-border); border-radius: var(--gas-radius); overflow: hidden; } .gas-rate-options-title { font-size: 13px; font-weight: 600; color: var(--gas-muted); padding: 12px 16px; background: var(--gas-bg); border-bottom: 1px solid var(--gas-border); } .gas-rate-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid var(--gas-border); } .gas-rate-option:last-child { border-bottom: none; } .gas-rate-option:hover { background: rgba(37, 99, 235, 0.03); } .gas-rate-option.selected { background: rgba(37, 99, 235, 0.08); } .gas-rate-radio { width: 20px; height: 20px; border: 2px solid var(--gas-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: all 0.2s; } .gas-rate-option.selected .gas-rate-radio { border-color: var(--gas-primary); } .gas-rate-radio-inner { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: all 0.2s; } .gas-rate-option.selected .gas-rate-radio-inner { background: var(--gas-primary); } .gas-rate-details { flex: 1; min-width: 0; } .gas-rate-name { font-weight: 600; font-size: 14px; color: var(--gas-text); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gas-rate-badge { display: inline-block; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--gas-radius-lg); } .gas-rate-features { display: flex; flex-wrap: wrap; gap: 8px; } .gas-rate-feature { font-size: 12px; color: #16a34a; } .gas-rate-feature.warning { color: #dc2626; } .gas-rate-price { text-align: right; flex-shrink: 0; } .gas-rate-total { font-weight: 700; font-size: 16px; color: var(--gas-text); } .gas-rate-per-night { font-size: 12px; color: var(--gas-muted); } .gas-rate-per-night s { color: #9ca3af; margin-right: 4px; } /* Mobile adjustments for rate options */ @media (max-width: 480px) { .gas-rate-option { flex-wrap: wrap; } .gas-rate-price { width: 100%; text-align: left; margin-top: 8px; padding-left: 32px; } } /* ========================================================================== Unavailable Rooms ========================================================================== */ .gas-room-card.checking { opacity: 1; } .gas-room-card.checking .gas-room-image::after { display: none !important; } .gas-room-card.unavailable { opacity: 0.6; } .gas-room-card.unavailable .gas-room-image { position: relative; } .gas-room-card.unavailable .gas-room-image::after { content: var(--gas-not-available-text, "NOT AVAILABLE"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: white; padding: 8px 16px; border-radius: var(--gas-radius); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .gas-room-card.guest-exceeded { opacity: 0.6; } .gas-not-available, .gas-too-small { color: #ef4444; font-size: 13px; font-weight: 500; } .gas-checking { color: #9ca3af; font-size: 13px; font-style: italic; } .gas-rooms-divider { grid-column: 1 / -1; padding: 20px 0; text-align: center; color: #9ca3af; font-size: 14px; border-top: 1px solid #e5e7eb; margin-top: 20px; } /* Group Booking Checkout */ .gas-group-rooms-list { margin-bottom: 20px; } .gas-group-room-item { transition: background-color 0.2s; } .gas-group-room-item:hover { background-color: #f3f4f6 !important; } /* Country Search */ .gas-country-search-wrap { position: relative; } .gas-country-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 var(--gas-radius) var(--gas-radius); max-height: 220px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .gas-country-option { padding: 10px 14px; cursor: pointer; font-size: 14px; color: #374151; transition: background-color 0.15s; } .gas-country-option:hover { background-color: #f3f4f6; } .gas-country-search { width: 100%; box-sizing: border-box; } /* Availability check spinner */ .gas-loading-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 9999; background: rgba(255, 255, 255, 0.40); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 40px 50px; border-radius: var(--gas-radius-lg); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); animation: gas-spinner-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes gas-spinner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .gas-compass-spin { width: 120px; height: 120px; animation: gas-spin 2.5s ease-in-out infinite; margin-bottom: 20px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); } .gas-spinner-inner { width: 36px; height: 36px; border: 3px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: gas-spin 0.8s linear infinite; margin: 0 auto 8px; } @keyframes gas-spin { to { transform: rotate(360deg); } } .gas-loading-spinner p { margin: 0; color: #475569; font-size: 16px; font-weight: 500; line-height: 1.5; text-shadow: 0 1px 3px rgba(255,255,255,0.9); } /* Circles spinner */ .gas-circles-spin { position: relative; width: 80px; height: 80px; margin: 0 auto 16px; } .gas-circles-spin div { position: absolute; border-radius: 50%; border: 3px solid transparent; border-top-color: #3b82f6; animation: gas-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .gas-circles-spin div:nth-child(1) { width: 80px; height: 80px; border-top-color: #1e40af; } .gas-circles-spin div:nth-child(2) { width: 60px; height: 60px; top: 10px; left: 10px; border-top-color: #3b82f6; animation-delay: -0.15s; } .gas-circles-spin div:nth-child(3) { width: 40px; height: 40px; top: 20px; left: 20px; border-top-color: #93c5fd; animation-delay: -0.3s; } /* Mobile button touch improvements */ button, .gas-view-btn, .gas-search-button, .gas-book-btn, .gas-filter-submit { touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-height: 44px; cursor: pointer; } button:active, .gas-view-btn:active, .gas-search-button:active, .gas-book-btn:active { transform: scale(0.97); opacity: 0.9; } .gas-description-short p, .gas-description-short h2, .gas-description-short h3, .gas-description-short ul, .gas-description-short ol, .gas-description-full p, .gas-description-full h2, .gas-description-full h3, .gas-description-full ul, .gas-description-full ol { margin: 0.5em 0; } /* Description-heading sizing — match .gas-room-title (28px/700) so the lead heading inside a room description visually aligns with the room name above the photos, regardless of which heading level (h1/h2/h3) the imported description used. */ .gas-description-short h1, .gas-description-short h2, .gas-description-short h3, .gas-description-full h1, .gas-description-full h2, .gas-description-full h3 { font-size: 28px; font-weight: 700; line-height: 1.3; } .gas-description-short li, .gas-description-full li { margin: 0; } .gas-description-short *:first-child, .gas-description-full *:first-child { margin-top: 0; } .gas-description-short *:last-child, .gas-description-full *:last-child { margin-bottom: 0; } /* Flatpickr: square day cells (no circles) + match Availability tab colours so the check-in / check-out popup reads as the same widget as the Availability calendar. */ .flatpickr-calendar .flatpickr-day { border-radius: var(--gas-radius, 6px) !important; max-width: none; } .flatpickr-day.gas-fp-unavailable:not(.flatpickr-disabled) { background: #fecaca !important; background-clip: padding-box !important; color: #991b1b !important; } .flatpickr-day.gas-fp-unavailable:not(.flatpickr-disabled):hover { background: #fca5a5 !important; background-clip: padding-box !important; color: #7f1d1d !important; } /* Available days — green wash to match .gas-calendar-day.available. */ .flatpickr-day.gas-fp-available:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):not(.inRange) { background: #d1fae5 !important; background-clip: padding-box !important; color: #065f46 !important; } .flatpickr-day.gas-fp-available:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):not(.inRange):hover { background: #a7f3d0 !important; background-clip: padding-box !important; color: #064e3b !important; } /* ========================================================================== Column-aware overrides for booking widgets When the rooms-grid (e.g. [gas_rooms room_ids="1258"] on an Exclusive Hire / single-room landing page) renders inside a Pro Builder / Gutenberg column, lift the auto-fill grid, drop the rounded corners, and stretch the card to the column's height so it matches whatever image / text content sits in the sibling column. Standalone listing pages keep their original grid + radius + hover lift. Same treatment as gas-bike-storage-widget for visual consistency. ========================================================================== */ .wp-block-column .gas-rooms-container, .wp-block-columns .gas-rooms-container, .pb-layout .gas-rooms-container { max-width: 100%; margin: 0; padding: 0; height: 100%; } .wp-block-column .gas-rooms-grid, .wp-block-columns .gas-rooms-grid, .pb-layout .gas-rooms-grid { grid-template-columns: 1fr; gap: 0; height: 100%; } .wp-block-column .gas-room-card, .wp-block-columns .gas-room-card, .pb-layout .gas-room-card { border-radius: 0; height: 100%; } .wp-block-column .gas-room-card:hover, .wp-block-columns .gas-room-card:hover, .pb-layout .gas-room-card:hover { transform: none; } /* Multisite row layout (gas-hebden / developer-light theme inline styles inject .gas-room-row as a horizontal image+content row instead of the card grid). When the row sits inside a Gutenberg column, the theme's internal max-width / 16px border-radius / padding make it float at half-size with rounded corners — mismatched against the plain text column next to it. Drop the constraints so the row fills its column edge-to-edge with square corners. */ .wp-block-column .gas-rooms-page-wrapper, .wp-block-column .gas-rooms-wrapper, .wp-block-column .gas-rooms-list, .wp-block-column #gas-rooms-container, .wp-block-column .gas-rooms-row-layout { /* !important needed to beat gas-theme-burger style.css:1252 which sets width: calc(100% - 200px) + 100px side margins to keep the /book-now/ widget inside Hebden's site margins. That rule is correct for the standalone listing but breaks the column-embedded use here. */ max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: 100% !important; } .wp-block-column .gas-room-row { width: 100%; max-width: 100%; height: 100%; min-height: 100%; border-radius: 0; margin: 0; /* Stack image on top of details inside a narrow column, instead of the horizontal image-left/content-right row layout that gets cramped at 50% page width. */ flex-direction: column !important; } .wp-block-column .gas-room-row-image { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-height: 240px !important; height: 280px !important; } .wp-block-column .gas-room-row-content { width: 100% !important; flex: 1 1 auto !important; } .wp-block-column .gas-room-row:hover { box-shadow: none; } /* Inline "embedded mode" CSS from the gas-hebden theme template sets .gas-rooms-list { flex: 1 1 65% } + .gas-rooms-map-panel { flex: 0 0 35% } so the row only ever takes 65% of the column, with a sticky map alongside. Inside a Gutenberg 50/50 the column is already narrow — kill the map and let the list claim the full column width so the row fits the box. */ .wp-block-column .gas-rooms-wrapper { flex-direction: column !important; gap: 0 !important; align-items: stretch !important; } .wp-block-column .gas-rooms-list { flex: 1 1 100% !important; width: 100% !important; } .wp-block-column .gas-rooms-map-panel, .wp-block-column .gas-rooms-map { display: none !important; } .wp-block-column .gas-date-filter { display: none !important; }