/* =============================== DESIGN SYSTEM — BASE TEMPLATE Change only these variables per hotel ================================ */ :root { --hotel-bg: #f5f5f7; --hotel-bg-soft: #fbfbfd; --hotel-surface: rgba(255, 255, 255, 0.86); --hotel-surface-solid: #ffffff; --hotel-surface-muted: #f2f2f4; /* Theme roles hydrated by dynamic-worker from Supabase hotels.theme */ --hotel-card: var(--hotel-surface); --hotel-card-text: var(--hotel-text); --hotel-card-muted: var(--hotel-muted); /* Widget/request roles keep the home request widget compatible with light and dark hotel themes */ --hotel-widget-bg: var(--hotel-card); --hotel-widget-text: var(--hotel-card-text); --hotel-widget-muted: var(--hotel-card-muted); --hotel-request-card-bg: var(--hotel-popup-card); --hotel-request-card-text: var(--hotel-widget-text); --hotel-request-card-muted: var(--hotel-widget-muted); --hotel-request-card-border: var(--hotel-border); --hotel-button-bg: var(--hotel-card); --hotel-button-text: var(--hotel-card-text); --hotel-button-active-bg: var(--hotel-primary); --hotel-button-active-text: var(--hotel-primary-text); --hotel-button-split-border: var(--hotel-border); --hotel-status-bg: var(--hotel-accent); --hotel-status-text: var(--hotel-accent-text); --hotel-popup-bg: var(--hotel-surface-solid); --hotel-popup-text: var(--hotel-text); --hotel-popup-muted: var(--hotel-muted); --hotel-popup-card: var(--hotel-surface-muted); --hotel-popup-card-text: var(--hotel-text); --hotel-popup-card-muted: var(--hotel-muted); --hotel-secondary-button-bg: var(--hotel-popup-card); --hotel-secondary-button-text: var(--hotel-popup-card-text); --hotel-title: var(--hotel-text); --hotel-accent-text: var(--hotel-primary-text); --hotel-page-glow: rgba(255,255,255,0.95); --hotel-page-glow-position: top left; /* Optional hotel background image. Defaults keep hotels without image unchanged. */ --hotel-bg-image: none; --hotel-bg-image-opacity: 1; --hotel-bg-image-overlay: rgba(0,0,0,0); --hotel-bg-image-blur: 0px; --hotel-bg-image-position: center center; --hotel-text: #111111; --hotel-muted: #6e6e73; --hotel-muted-2: #8e8e93; --hotel-border: rgba(0, 0, 0, 0.08); --hotel-border-strong: rgba(0, 0, 0, 0.14); --hotel-primary: #111111; --hotel-primary-hover: #000000; --hotel-primary-text: #ffffff; --hotel-accent: #111111; --hotel-radius-sm: 12px; --hotel-radius-md: 18px; --hotel-radius-lg: 24px; --hotel-radius-xl: 32px; --hotel-shadow-xs: 0 3px 12px rgba(0, 0, 0, 0.05); --hotel-shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.08); --hotel-shadow-md: 0 18px 55px rgba(0, 0, 0, 0.12); --hotel-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.18); --hotel-blur: blur(18px); --hotel-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif; --home-btn-tall-height: 72px; --home-btn-short-height: 58px; --home-btn-font-size: 13.4px; --home-btn-line-height: 1.15; --home-btn-font-weight: 750; --home-btn-padding-x: 16px; --home-btn-padding-top: 15px; --home-split-font-size: 13.2px; --home-split-line-height: 1.14; --home-split-font-weight: 750; --home-split-padding-x: 12px; --home-split-padding-top: 15px; --service-btn-height: 72px; --service-btn-font-size: 13px; --service-btn-line-height: 1.08; --service-btn-font-weight: 750; --service-btn-padding-x: 15px; --service-btn-padding-top: 15px; } /* =============================== GLOBAL PAGE ================================ */ html, body { min-height: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; /* Theme gradient + optional hotel background image. If --hotel-bg-image is "none", this renders exactly like the normal theme background. */ background-color: var(--hotel-bg); background-image: linear-gradient(var(--hotel-bg-image-overlay, rgba(0,0,0,0)), var(--hotel-bg-image-overlay, rgba(0,0,0,0))), radial-gradient(circle at var(--hotel-page-glow-position), var(--hotel-page-glow), transparent 35%), linear-gradient(180deg, var(--hotel-bg-soft) 0%, var(--hotel-bg) 100%), var(--hotel-bg-image, none); background-size: cover, auto, auto, cover; background-position: center center, var(--hotel-page-glow-position), center center, var(--hotel-bg-image-position, center center); background-repeat: no-repeat; background-attachment: fixed; color: var(--hotel-text); font-family: var(--hotel-font); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } body { margin: 0; position: relative; background: transparent; } /* === Mobile fix 2LPR — anti-zoom / anti-débordement === */ html { overflow-x: hidden; } body { max-width: 100%; overflow-x: hidden; } /* === end mobile fix === */ * { box-sizing: border-box; } .snap-section { min-height: 100vh; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; width: 100%; overflow-x: hidden; } /* =============================== MAIN APP CONTAINER / SECTIONS ================================ */ .button-services { /* Let the global hotel background/image show through. Hotels without background image still use the normal html/body gradient. */ background: transparent !important; } .container { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .section-home, #section-services, #section-more-services { width: 100%; } .section-home { min-height: 100vh; height: 100vh; width: 100%; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; overflow-x: hidden; padding-left: 12px; padding-right: 12px; } #section-services, #section-more-services { min-height: 100vh; height: 100vh; width: 100%; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; overflow-x: hidden; padding-left: 12px; padding-right: 12px; padding-top: 17vh; } .section-home > *, #section-services > *, #section-more-services > * { width: 100%; max-width: 480px; } .section-home > .container, #section-services > .container, #section-more-services > .container, .container { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; } /* =============================== PAGE TITLES ================================ */ .page-title { font-size: 34px; line-height: 1.05; font-weight: 850; letter-spacing: -0.045em; color: var(--hotel-title); margin: 0 0 8px 0; text-align: center; } .page-subtitle { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--hotel-muted); margin: 0 0 8px 0; text-align: center; } .page-room-label { font-size: 13px; line-height: 1.3; font-weight: 650; color: var(--hotel-title); margin: 0 0 18px 0; text-align: center; } /* =============================== BUTTON BASE STYLE ================================ */ .button-main, [id^="btn-service-"], #btn-view-services, #btn-more-services, #btn-open-wifi, #btn-open-hours, #btn-open-message, #btn-open-hotel-info, #btn-call-reception, #btn-make-room, #btn-dnd { border-radius: var(--hotel-radius-lg); border: 1px solid var(--hotel-border); background: var(--hotel-button-bg, var(--hotel-card)); color: var(--hotel-button-text, var(--hotel-card-text)); box-shadow: var(--hotel-shadow-xs); backdrop-filter: var(--hotel-blur); -webkit-backdrop-filter: var(--hotel-blur); display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; box-sizing: border-box !important; overflow: hidden !important; font-family: var(--hotel-font); letter-spacing: -0.012em; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.16s ease; } .button-main, .button-main *, [id^="btn-service-"], [id^="btn-service-"] *, #btn-view-services, #btn-view-services *, #btn-more-services, #btn-more-services *, #btn-open-wifi, #btn-open-wifi *, #btn-open-hours, #btn-open-hours *, #btn-open-message, #btn-open-message *, #btn-open-hotel-info, #btn-open-hotel-info *, #btn-call-reception, #btn-call-reception *, #btn-make-room, #btn-make-room *, #btn-dnd, #btn-dnd * { color: var(--hotel-button-text, var(--hotel-card-text, #151515)) !important; } .button-main:hover, [id^="btn-service-"]:hover, #btn-view-services:hover, #btn-more-services:hover, #btn-open-wifi:hover, #btn-open-hours:hover, #btn-open-message:hover, #btn-open-hotel-info:hover, #btn-call-reception:hover, #btn-make-room:hover, #btn-dnd:hover { border-color: var(--hotel-border-strong); box-shadow: var(--hotel-shadow-sm); } .button-main:active, [id^="btn-service-"]:active, #btn-view-services:active, #btn-more-services:active, #btn-open-wifi:active, #btn-open-hours:active, #btn-open-message:active, #btn-open-hotel-info:active, #btn-call-reception:active, #btn-make-room:active, #btn-dnd:active { transform: scale(0.985); box-shadow: var(--hotel-shadow-xs); } #btn-make-room.is-active, #btn-dnd.is-active, .button-main.is-active { background: var(--hotel-button-active-bg, var(--hotel-primary)) !important; color: var(--hotel-button-active-text, var(--hotel-primary-text)) !important; border-color: var(--hotel-button-active-bg, var(--hotel-primary)) !important; } #btn-make-room.is-active *, #btn-dnd.is-active *, .button-main.is-active * { color: var(--hotel-button-active-text, var(--hotel-primary-text)) !important; } /* =============================== BUTTON GRID ================================ */ .buttons-wrapper { width: 100%; max-width: 480px; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: stretch !important; } .section-home .buttons-wrapper, #section-services .buttons-wrapper, #section-more-services .buttons-wrapper { width: 100% !important; max-width: 480px; } .my-requests-embed { grid-column: 1 / span 2 !important; width: 100% !important; } /* =============================== HOME BUTTONS ================================ */ .section-home .button-main, .section-home #btn-open-wifi, .section-home #btn-open-hours, .section-home #btn-open-hotel-info, .section-home #btn-view-services, .section-home #btn-open-message, .section-home #btn-call-reception, .section-home #btn-make-room, .section-home #btn-dnd { width: 100% !important; min-width: 0 !important; padding: var(--home-btn-padding-top) var(--home-btn-padding-x) 0 var(--home-btn-padding-x) !important; font-size: var(--home-btn-font-size) !important; line-height: var(--home-btn-line-height) !important; font-weight: var(--home-btn-font-weight) !important; } .section-home #btn-open-wifi, .section-home #btn-open-hours, .section-home .reception-split, .section-home .housekeeping-split, .section-home .reception-split > *, .section-home .housekeeping-split > *, .section-home .reception-split .button-main, .section-home .housekeeping-split .button-main, .section-home .reception-split [id^="btn-"], .section-home .housekeeping-split [id^="btn-"] { min-height: var(--home-btn-tall-height) !important; height: var(--home-btn-tall-height) !important; max-height: var(--home-btn-tall-height) !important; } .section-home #btn-open-hotel-info, .section-home #btn-view-services { min-height: var(--home-btn-short-height) !important; height: var(--home-btn-short-height) !important; max-height: var(--home-btn-short-height) !important; padding-top: 15px !important; } /* =============================== SPLIT BUTTONS ================================ */ .reception-split, .housekeeping-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; width: 100% !important; grid-column: auto !important; align-items: stretch !important; overflow: visible !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } .section-home .reception-split .button-main, .section-home .housekeeping-split .button-main, .section-home .reception-split [id^="btn-"], .section-home .housekeeping-split [id^="btn-"] { width: 100% !important; min-width: 0 !important; height: var(--home-btn-tall-height) !important; min-height: var(--home-btn-tall-height) !important; max-height: var(--home-btn-tall-height) !important; padding: var(--home-split-padding-top) var(--home-split-padding-x) 0 var(--home-split-padding-x) !important; background: var(--hotel-button-bg, var(--hotel-card)) !important; color: var(--hotel-button-text, var(--hotel-card-text)) !important; border: 1px solid var(--hotel-button-split-border, var(--hotel-border)) !important; box-shadow: var(--hotel-shadow-xs) !important; align-items: flex-start !important; justify-content: flex-start !important; overflow: hidden !important; } .section-home #btn-open-message, .section-home #btn-call-reception, .section-home #btn-make-room, .section-home #btn-dnd { font-size: var(--home-split-font-size) !important; line-height: var(--home-split-line-height) !important; font-weight: var(--home-split-font-weight) !important; letter-spacing: -0.018em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .section-home #btn-make-room, .section-home #btn-dnd { padding-left: var(--home-split-padding-x) !important; padding-right: var(--home-split-padding-x) !important; } .reception-split > .button-main:first-child, .reception-split > [id^="btn-"]:first-child, .housekeeping-split > .button-main:first-child, .housekeeping-split > [id^="btn-"]:first-child { border-top-left-radius: var(--hotel-radius-lg) !important; border-bottom-left-radius: var(--hotel-radius-lg) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .reception-split > .button-main:last-child, .reception-split > [id^="btn-"]:last-child, .housekeeping-split > .button-main:last-child, .housekeeping-split > [id^="btn-"]:last-child { border-top-right-radius: var(--hotel-radius-lg) !important; border-bottom-right-radius: var(--hotel-radius-lg) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left-width: 0 !important; border-left-color: var(--hotel-button-split-border, var(--hotel-border)) !important; } .reception-split > *:first-child .button-main, .reception-split > *:first-child [id^="btn-"], .housekeeping-split > *:first-child .button-main, .housekeeping-split > *:first-child [id^="btn-"] { border-top-left-radius: var(--hotel-radius-lg) !important; border-bottom-left-radius: var(--hotel-radius-lg) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .reception-split > *:last-child .button-main, .reception-split > *:last-child [id^="btn-"], .housekeeping-split > *:last-child .button-main, .housekeeping-split > *:last-child [id^="btn-"] { border-top-right-radius: var(--hotel-radius-lg) !important; border-bottom-right-radius: var(--hotel-radius-lg) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left-width: 0 !important; } .reception-split > *:first-child, .housekeeping-split > *:first-child { border-top-left-radius: var(--hotel-radius-lg) !important; border-bottom-left-radius: var(--hotel-radius-lg) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .reception-split > *:last-child, .housekeeping-split > *:last-child { border-top-right-radius: var(--hotel-radius-lg) !important; border-bottom-right-radius: var(--hotel-radius-lg) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } #btn-make-room, #btn-dnd { justify-content: flex-start !important; text-align: left !important; } #btn-call-reception, #btn-open-message, #btn-make-room, #btn-dnd { background: var(--hotel-button-bg, var(--hotel-card)) !important; color: var(--hotel-button-text, var(--hotel-card-text)) !important; border-color: var(--hotel-button-split-border, var(--hotel-border)) !important; } #btn-call-reception *, #btn-open-message *, #btn-make-room *, #btn-dnd *, .reception-split, .reception-split *, .housekeeping-split, .housekeeping-split * { color: var(--hotel-button-text, var(--hotel-card-text, #151515)) !important; } #btn-make-room.is-active, #btn-dnd.is-active { background: var(--hotel-button-active-bg, var(--hotel-primary)) !important; color: var(--hotel-button-active-text, var(--hotel-primary-text)) !important; border-color: var(--hotel-button-active-bg, var(--hotel-primary)) !important; } #btn-make-room.is-active *, #btn-dnd.is-active * { color: var(--hotel-button-active-text, var(--hotel-primary-text)) !important; } #btn-make-room.is-updating, #btn-dnd.is-updating { align-items: center !important; justify-content: center !important; text-align: center !important; font-size: 11.5px !important; line-height: 1.08 !important; font-weight: 650 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; padding: 0 8px !important; } /* =============================== SERVICE SECTIONS BUTTONS ================================ */ #section-services .buttons-wrapper, #section-more-services .buttons-wrapper { grid-template-columns: 1fr 1fr !important; } #section-services [id^="btn-service-"], #section-more-services [id^="btn-service-"], #section-services #btn-more-services, #section-more-services #btn-more-services { min-height: var(--service-btn-height) !important; height: var(--service-btn-height) !important; max-height: var(--service-btn-height) !important; padding: var(--service-btn-padding-top) var(--service-btn-padding-x) 0 var(--service-btn-padding-x) !important; align-items: flex-start !important; justify-content: flex-start !important; font-size: var(--service-btn-font-size) !important; line-height: var(--service-btn-line-height) !important; font-weight: var(--service-btn-font-weight) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-overflow: clip !important; } /* =============================== SERVICE POPUP CONTENT TEMPLATE ================================ */ .service-popup-image { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: var(--hotel-radius-lg); margin-bottom: 22px; box-shadow: var(--hotel-shadow-xs); } .service-popup-image[src=""], .service-popup-image:not([src]) { display: none !important; } .service-popup-title { color: var(--hotel-popup-text); font-family: var(--hotel-font); font-size: 28px; line-height: 1.06; letter-spacing: -0.035em; font-weight: 850; margin: 0 0 16px 0; } .service-popup-price-block { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 11px; border-radius: 999px; background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); border: 1px solid var(--hotel-request-card-border, var(--hotel-border)); margin: 0 0 16px 0; } .service-popup-price-label { color: var(--hotel-popup-card-muted); font-size: 12px; line-height: 1; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .service-popup-price-value { color: var(--hotel-popup-card-text); font-size: 14px; line-height: 1; letter-spacing: -0.01em; font-weight: 850; margin: 0; white-space: nowrap; } .service-popup-description { color: var(--hotel-popup-muted); font-size: 15.5px; line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; margin: 0 0 18px 0; } .service-popup-note { color: var(--hotel-popup-muted); font-size: 12.5px; line-height: 1.42; font-weight: 500; margin: 13px 0 0 0; } /* =============================== NFC SERVICE FORMS ================================ */ .nfc-service-form, .nfc-restaurant-actions, .nfc-late-checkout-options { width: 100%; box-sizing: border-box; } .nfc-service-form { margin-top: 10px; } .nfc-date-row { display: flex; gap: 8px; margin-bottom: 10px; } .nfc-date-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 12px 0 10px 0; } .nfc-service-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin: 12px 0 10px 0; } .nfc-flex-schedule { width: 100%; margin-top: 8px; } .nfc-date-btn, .nfc-later-btn, .nfc-flex-choice, .nfc-submit-btn, .nfc-select, .nfc-input, .nfc-date-picker { width: 100%; box-sizing: border-box; border: 1px solid var(--hotel-border); border-radius: var(--hotel-radius-md); padding: 12px 11px; font-size: 14px; line-height: 1.2; font-family: var(--hotel-font); } .nfc-date-btn, .nfc-later-btn, .nfc-flex-choice { min-height: 44px; background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)); color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)); cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 680; box-shadow: var(--hotel-shadow-xs); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .nfc-date-btn:hover, .nfc-later-btn:hover, .nfc-flex-choice:hover { border-color: var(--hotel-border-strong); box-shadow: var(--hotel-shadow-sm); } .nfc-date-btn.is-selected, .nfc-later-btn.is-selected, .nfc-flex-choice.is-selected { background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); border-color: var(--hotel-accent); box-shadow: none; } .nfc-field-label { display: block; margin: 11px 0 7px 0; font-size: 12px; font-weight: 760; color: var(--hotel-popup-muted); letter-spacing: -0.01em; } .nfc-select, .nfc-input, .nfc-date-picker, .nfc-time-value, .nfc-destination-value, .nfc-note-value, .nfc-guests-value, .nfc-service-form input, .nfc-service-form select { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid var(--hotel-border); border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); font-size: 16px; font-weight: 620; font-family: var(--hotel-font); padding: 0 14px; outline: none; margin-bottom: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .nfc-date-picker { display: none; } .nfc-select:focus, .nfc-input:focus, .nfc-date-picker:focus, .nfc-time-value:focus, .nfc-destination-value:focus, .nfc-note-value:focus, .nfc-guests-value:focus, .nfc-service-form input:focus, .nfc-service-form select:focus { border-color: var(--hotel-accent); box-shadow: 0 0 0 4px rgba(184, 206, 82, 0.14); } .nfc-submit-btn { min-height: 50px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); border-color: var(--hotel-accent); cursor: pointer; font-weight: 760; letter-spacing: -0.01em; margin-top: 9px; border-radius: var(--hotel-radius-md); box-shadow: 0 10px 25px rgba(0,0,0,0.14); transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .nfc-submit-btn:hover { opacity: 0.94; box-shadow: 0 13px 32px rgba(0,0,0,0.18); } .nfc-submit-btn:active, .nfc-date-btn:active, .nfc-later-btn:active, .nfc-flex-choice:active { transform: scale(0.98); } input[type="time"].nfc-time-value, input[type="date"].nfc-date-picker { appearance: auto; -webkit-appearance: auto; } /* =============================== RESTAURANT / EXTERNAL BOOKING ================================ */ .nfc-restaurant-actions { display: flex; flex-direction: column; gap: 12px; } .nfc-external-booking-btn { width: 100%; min-height: 50px; border-radius: var(--hotel-radius-md); background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); text-decoration: none; font-size: 14px; font-weight: 760; letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: 0 10px 25px rgba(0,0,0,0.14); transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } .nfc-external-booking-btn:hover { opacity: 0.94; box-shadow: 0 13px 32px rgba(0,0,0,0.18); } .nfc-external-booking-btn:active { transform: scale(0.98); } /* =============================== MY REQUESTS WIDGET ================================ */ .my-requests-widget { width: 100%; box-sizing: border-box; margin-top: 16px; padding: 15px; border-radius: var(--hotel-radius-lg); background: var(--hotel-widget-bg, var(--hotel-button-bg, var(--hotel-card))); color: var(--hotel-widget-text, var(--hotel-button-text, var(--hotel-card-text))); border: 1px solid var(--hotel-border); box-shadow: var(--hotel-shadow-sm); backdrop-filter: var(--hotel-blur); -webkit-backdrop-filter: var(--hotel-blur); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .my-requests-widget:hover { border-color: var(--hotel-border-strong); box-shadow: var(--hotel-shadow-md); } .my-requests-widget:active { transform: scale(0.99); } .my-requests-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .my-requests-title { font-size: 15px; font-weight: 720; color: var(--hotel-widget-text, var(--hotel-card-text)); letter-spacing: -0.015em; line-height: 1; } .my-requests-count { font-size: 12px; line-height: 1.3; color: var(--hotel-widget-muted, var(--hotel-card-muted)); margin-top: 4px; font-weight: 500; } .my-requests-arrow { font-size: 26px; line-height: 1; color: var(--hotel-widget-muted, var(--hotel-card-muted)); } .my-requests-list { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; } .my-request-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px; border-radius: var(--hotel-radius-md); background: var(--hotel-request-card-bg, var(--hotel-popup-card)); color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))); border: 1px solid var(--hotel-request-card-border, var(--hotel-border)); } .my-request-item *, .my-request-full-item * { color: inherit; } .my-request-main { min-width: 0; } .my-request-name { font-size: 13px; font-weight: 680; color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .my-request-meta { font-size: 11.5px; color: var(--hotel-request-card-muted, var(--hotel-widget-muted, var(--hotel-card-muted))); margin-top: 2px; } .my-request-status { font-size: 11px; font-weight: 680; padding: 5px 8px; border-radius: 999px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); white-space: nowrap; border: 1px solid var(--hotel-border); } .my-request-cancel { border: none; background: transparent; color: var(--hotel-request-card-muted, var(--hotel-widget-muted, var(--hotel-card-muted))); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; flex-shrink: 0; min-width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .my-request-cancel:hover { color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))); background: var(--hotel-request-card-bg, var(--hotel-popup-card)); } /* =============================== MY REQUESTS FULL POPUP ================================ */ .my-requests-full { width: 100%; box-sizing: border-box; max-height: 70vh; overflow-y: auto; padding-right: 4px; } .my-requests-full-title { font-size: 28px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 850; color: var(--hotel-popup-text); margin: 0 0 7px 0; } .my-requests-full-subtitle { font-size: 14px; line-height: 1.45; color: var(--hotel-popup-muted); margin: 0 0 18px 0; } .my-requests-full-section { margin-top: 18px; } .my-requests-full-section-title { font-size: 14px; font-weight: 760; color: var(--hotel-popup-text); margin-bottom: 10px; } .my-requests-full-list { display: flex; flex-direction: column; gap: 10px; } .my-request-empty { font-size: 13px; color: var(--hotel-popup-card-muted); padding: 13px; border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); border: 1px solid var(--hotel-border); } .my-request-full-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 13px; border-radius: var(--hotel-radius-md); background: var(--hotel-request-card-bg, var(--hotel-popup-card)); color: var(--hotel-request-card-text, var(--hotel-popup-text)); border: 1px solid var(--hotel-request-card-border, var(--hotel-border)); } .my-request-full-main { min-width: 0; } .my-request-full-name { font-size: 14px; font-weight: 760; color: var(--hotel-request-card-text, var(--hotel-popup-text)); line-height: 1.25; letter-spacing: -0.01em; } .my-request-full-meta { font-size: 12px; color: var(--hotel-request-card-muted, var(--hotel-popup-muted)); line-height: 1.38; margin-top: 4px; } .my-request-full-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .my-request-full-status { font-size: 11px; font-weight: 680; padding: 5px 8px; border-radius: 999px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); white-space: nowrap; border: 1px solid var(--hotel-border); } .my-request-full-cancel { border: none; background: transparent; color: var(--hotel-request-card-muted, var(--hotel-popup-muted, var(--hotel-muted-2))); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; min-width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .my-request-full-cancel:hover { color: var(--hotel-request-card-text, var(--hotel-popup-text)); background: var(--hotel-request-card-bg, var(--hotel-popup-card)); } .my-request-cancel, .my-request-full-cancel { pointer-events: auto !important; position: relative; z-index: 20; touch-action: manipulation; } /* =============================== MY REQUESTS TABS ================================ */ .my-requests-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px 0; padding: 4px; border-radius: 999px; background: var(--hotel-popup-card); border: 1px solid var(--hotel-border); } .my-requests-tab { width: 100%; border: none; background: transparent; color: var(--hotel-popup-card-muted); border-radius: 999px; padding: 10px 12px; font-size: 13px; font-weight: 680; font-family: var(--hotel-font); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .my-requests-tab span { margin-left: 4px; color: inherit; font-weight: 650; opacity: 0.75; } .my-requests-tab.is-active { background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)); color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)); box-shadow: var(--hotel-shadow-xs); } .my-requests-tab.is-active span { color: inherit; opacity: 0.65; } .my-requests-panel { display: none; } .my-requests-panel.is-active { display: block; } /* =============================== POPUP OVERLAY / POPUP CONTENT ================================ */ .popup-overlay { overflow-y: auto; background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 18px; } .popup-content { position: relative; max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: var(--hotel-radius-xl); background: var(--hotel-popup-bg); color: var(--hotel-popup-text); box-shadow: var(--hotel-shadow-lg); border: 1px solid var(--hotel-border); } #btn-close-popup { position: absolute; top: 14px; right: 14px; z-index: 80; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hotel-border); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); font-size: 18px; font-weight: 760; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease; } #btn-close-popup:hover { background: var(--hotel-card); box-shadow: 0 11px 28px rgba(0,0,0,0.18); } #btn-close-popup:active { transform: scale(0.94); } /* =============================== INFO POPUPS ================================ */ .info-popup { width: 100%; } .info-popup-title { color: var(--hotel-popup-text); font-family: var(--hotel-font); font-size: 28px; line-height: 1.06; letter-spacing: -0.035em; font-weight: 850; margin: 0 0 8px 0; } .info-popup-subtitle { color: var(--hotel-popup-muted); font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; margin: 0 0 20px 0; } .info-card-list { display: flex; flex-direction: column; gap: 10px; width: 100%; } .info-card { width: 100%; border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); border: 1px solid var(--hotel-border); padding: 14px; } .info-card-label { color: var(--hotel-popup-card-muted); font-size: 12px; line-height: 1.2; font-weight: 680; margin: 0 0 5px 0; } .info-card-value { color: var(--hotel-popup-card-text); font-size: 15px; line-height: 1.3; font-weight: 760; letter-spacing: -0.01em; margin: 0; } .info-card-value-large { color: var(--hotel-popup-card-text); font-size: 20px; line-height: 1.15; font-weight: 760; letter-spacing: -0.025em; margin: 0; } .info-copy-btn, .info-action-btn { width: 100%; min-height: 48px; border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-accent); background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); font-family: var(--hotel-font); font-size: 14px; font-weight: 760; letter-spacing: -0.01em; cursor: pointer; margin-top: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.14); transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } .info-copy-btn:hover, .info-action-btn:hover { opacity: 0.94; box-shadow: 0 13px 32px rgba(0,0,0,0.18); } .info-copy-btn:active, .info-action-btn:active { transform: scale(0.98); } .info-hours-list { display: flex; flex-direction: column; gap: 8px; } .info-hours-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); border: 1px solid var(--hotel-border); } .info-hours-name { color: var(--hotel-popup-card-text); font-size: 14px; font-weight: 760; letter-spacing: -0.01em; } .info-hours-time { color: var(--hotel-popup-card-muted); font-size: 14px; font-weight: 620; white-space: nowrap; } .info-section-title { color: var(--hotel-popup-text); font-size: 14px; font-weight: 760; letter-spacing: -0.01em; margin: 20px 0 10px 0; } .info-text { color: var(--hotel-popup-card-muted); font-size: 14.5px; line-height: 1.5; font-weight: 500; margin: 0; } .info-note { color: var(--hotel-popup-muted); font-size: 12.5px; line-height: 1.42; font-weight: 500; margin: 13px 0 0 0; } /* =============================== THEME LOADING / ANTI-FLASH The page stays hidden until dynamic-worker has applied either the cached hotel theme or the live Supabase theme. Fallback stays neutral and is immediately replaced by the hotel theme when available. ================================ */ html:not(.nfc-theme-ready) body { background-color: var(--hotel-bg, #f5f5f7) !important; background-image: linear-gradient(var(--hotel-bg-image-overlay, rgba(0,0,0,0)), var(--hotel-bg-image-overlay, rgba(0,0,0,0))), radial-gradient(circle at var(--hotel-page-glow-position, top right), var(--hotel-page-glow, transparent), transparent 35%), linear-gradient(180deg, var(--hotel-bg-soft, var(--hotel-bg, #f5f5f7)) 0%, var(--hotel-bg, #f5f5f7) 100%), var(--hotel-bg-image, none) !important; background-size: cover, auto, auto, cover !important; background-position: center center, var(--hotel-page-glow-position, top right), center center, var(--hotel-bg-image-position, center center) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; color: var(--hotel-text, #111111) !important; } html:not(.nfc-theme-ready) .section-home, html:not(.nfc-theme-ready) #section-services, html:not(.nfc-theme-ready) #section-more-services, html:not(.nfc-theme-ready) .button-services { opacity: 0 !important; visibility: hidden !important; } html.nfc-theme-ready .section-home, html.nfc-theme-ready #section-services, html.nfc-theme-ready #section-more-services, html.nfc-theme-ready .button-services { opacity: 1; visibility: visible; transition: opacity 0.18s ease; } /* =============================== LOADING SCREEN ================================ */ #loading-screen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--hotel-bg, #f5f5f7) !important; background-image: linear-gradient(var(--hotel-bg-image-overlay, rgba(0,0,0,0)), var(--hotel-bg-image-overlay, rgba(0,0,0,0))), radial-gradient(circle at var(--hotel-page-glow-position, top right), var(--hotel-page-glow, transparent), transparent 34%), linear-gradient(180deg, var(--hotel-bg-soft, var(--hotel-bg, #f5f5f7)) 0%, var(--hotel-bg, #f5f5f7) 100%), var(--hotel-bg-image, none) !important; background-size: cover, auto, auto, cover !important; background-position: center center, var(--hotel-page-glow-position, top right), center center, var(--hotel-bg-image-position, center center) !important; background-repeat: no-repeat !important; color: var(--hotel-text, #111111) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif !important; font-size: 15px !important; font-weight: 680 !important; letter-spacing: -0.01em !important; text-align: center !important; opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0.25s ease; } #loading-screen.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* =============================== RESPONSIVE ================================ */ @media (max-width: 480px) { :root { --home-btn-tall-height: 70px; --home-btn-short-height: 58px; --home-btn-font-size: 13.2px; --home-btn-line-height: 1.15; --home-btn-font-weight: 750; --home-btn-padding-x: 15px; --home-btn-padding-top: 15px; --home-split-font-size: 13px; --home-split-line-height: 1.14; --home-split-font-weight: 750; --home-split-padding-x: 12px; --home-split-padding-top: 15px; --service-btn-height: 60px; --service-btn-font-size: 12.9px; --service-btn-line-height: 1.14; --service-btn-font-weight: 750; --service-btn-padding-x: 14px; --service-btn-padding-top: 15px; } .container { max-width: 100%; padding-left: 10px; padding-right: 10px; } .section-home, #section-services, #section-more-services { padding-left: 8px; padding-right: 8px; } .buttons-wrapper { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } #section-services, #section-more-services { padding-top: 15vh; } .service-popup-image { height: 176px; border-radius: 22px; margin-bottom: 20px; } .service-popup-title { font-size: 26px; margin-bottom: 14px; } .service-popup-price-block { padding: 12px 13px; margin-bottom: 15px; } .service-popup-price-value { font-size: 20px; } .service-popup-description { font-size: 15px; } .popup-overlay { padding: 12px; } .popup-content { max-height: 86vh; border-radius: 28px; } #btn-close-popup { top: 12px; right: 12px; width: 34px; height: 34px; } .nfc-date-options { grid-template-columns: repeat(3, 1fr); gap: 6px; } .nfc-service-choice { grid-template-columns: repeat(2, 1fr); gap: 6px; } .nfc-date-btn, .nfc-later-btn, .nfc-flex-choice { font-size: 12px; min-height: 42px; padding: 10px 6px; border-radius: 16px; } .nfc-submit-btn, .nfc-external-booking-btn { min-height: 48px; font-size: 13px; } .nfc-select, .nfc-input, .nfc-date-picker, .nfc-time-value, .nfc-destination-value, .nfc-note-value, .nfc-guests-value, .nfc-service-form input, .nfc-service-form select { min-height: 46px; font-size: 16px; } .info-popup-title { font-size: 26px; } .info-card, .info-hours-row { padding: 13px; } .info-card-value-large { font-size: 19px; } .popup-overlay, .popup-content, .my-requests-widget, .button-main, [id^="btn-service-"], #btn-view-services, #btn-more-services, #btn-open-wifi, #btn-open-hours, #btn-open-message, #btn-open-hotel-info, #btn-make-room, #btn-dnd { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* =============================== FINAL POLISH — APPLE-LIKE HOME ================================ */ :root { --hotel-surface: rgba(255, 255, 255, 0.74); --hotel-card: var(--hotel-surface); --hotel-border: rgba(0, 0, 0, 0.052); --hotel-border-strong: rgba(0, 0, 0, 0.095); --hotel-shadow-xs: 0 5px 18px rgba(0, 0, 0, 0.026); --hotel-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.038); --hotel-shadow-md: 0 14px 38px rgba(0, 0, 0, 0.065); --home-btn-font-weight: 710; --home-split-font-weight: 710; --service-btn-font-weight: 710; } @media (max-width: 480px) { :root { --home-btn-font-weight: 710; --home-split-font-weight: 710; --service-btn-font-weight: 710; } } .section-home .page-title { font-size: 31px !important; line-height: 1.04 !important; font-weight: 830 !important; letter-spacing: -0.048em !important; transform: translateY(-18px); } .section-home .page-subtitle { font-size: 13.5px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--hotel-muted) !important; transform: translateY(-18px); } /* Room label pill — applies to Home, Services and More Services */ .page-room-label, .room-number-display { display: block !important; width: fit-content !important; min-width: auto !important; max-width: fit-content !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 18px !important; padding: 6px 11px !important; border-radius: 999px !important; background: var(--hotel-card) !important; color: var(--hotel-card-text) !important; border: 1px solid var(--hotel-border) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 680 !important; letter-spacing: -0.01em !important; text-align: center !important; } /* Home header position */ .section-home .page-title, .section-home .page-subtitle, .section-home .page-room-label, .section-home .room-number-display { transform: translateY(-18px); } /* Services headers position */ #section-services .page-title, #section-services .page-subtitle, #section-services .page-room-label, #section-services .room-number-display, #section-more-services .page-title, #section-more-services .page-subtitle, #section-more-services .page-room-label, #section-more-services .room-number-display { transform: translateY(-7px); } .page-title, .page-subtitle, .page-room-label, .room-number-display { will-change: transform; } .section-home .button-main:not(.is-active), .section-home #btn-open-wifi:not(.is-active), .section-home #btn-open-hours:not(.is-active), .section-home #btn-open-hotel-info:not(.is-active), .section-home #btn-view-services:not(.is-active), .section-home #btn-open-message:not(.is-active), .section-home #btn-call-reception:not(.is-active), .section-home #btn-make-room:not(.is-active), .section-home #btn-dnd:not(.is-active), .section-home .reception-split .button-main:not(.is-active), .section-home .housekeeping-split .button-main:not(.is-active), .section-home .reception-split [id^="btn-"]:not(.is-active), .section-home .housekeeping-split [id^="btn-"]:not(.is-active) { background: var(--hotel-button-bg, var(--hotel-card)) !important; color: var(--hotel-button-text, var(--hotel-card-text)) !important; border-color: var(--hotel-border) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.025) !important; } .section-home .button-main:hover, .section-home #btn-open-wifi:hover, .section-home #btn-open-hours:hover, .section-home #btn-open-hotel-info:hover, .section-home #btn-view-services:hover, .section-home #btn-open-message:hover, .section-home #btn-call-reception:hover, .section-home #btn-make-room:hover, .section-home #btn-dnd:hover { border-color: var(--hotel-border-strong) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04) !important; } /* =============================== MESSAGE POPUP ================================ */ .nfc-message-box { width: 100%; box-sizing: border-box; } .nfc-popup-title { font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 8px 0; color: var(--hotel-popup-text, var(--hotel-text, #111)); } .nfc-popup-subtitle { font-size: 14px; line-height: 1.42; font-weight: 500; margin: 0 0 18px 0; color: var(--hotel-popup-muted, var(--hotel-muted, #6e6e73)); } .nfc-message-textarea { width: 100%; min-height: 132px; resize: vertical; box-sizing: border-box; border: 1px solid var(--hotel-border, rgba(0,0,0,0.08)); border-radius: 18px; padding: 14px; margin-bottom: 12px; background: var(--hotel-popup-card); color: var(--hotel-popup-card-text, var(--hotel-popup-text, var(--hotel-text, #111))); font-family: var(--hotel-font, -apple-system, BlinkMacSystemFont, Inter, Arial, sans-serif); font-size: 16px; line-height: 1.4; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .nfc-message-textarea:focus { border-color: var(--hotel-accent); box-shadow: 0 0 0 4px rgba(184,206,82,0.14); } /* =============================== NOTIFICATIONS HOME WIDGET ================================ */ .notifications-widget { width: 100%; margin: 0 0 12px 0; padding: 14px 15px; border-radius: 20px; background: var(--hotel-card); border: 1px solid var(--hotel-border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.025); cursor: pointer; backdrop-filter: none; -webkit-backdrop-filter: none; } .notifications-widget-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .notifications-widget-text { min-width: 0; } .notifications-widget-title { font-size: 15px !important; line-height: 1 !important; font-weight: 720 !important; letter-spacing: -0.015em !important; color: var(--hotel-card-text) !important; white-space: nowrap !important; flex-shrink: 0 !important; } .notifications-widget-preview { margin-top: 4px; font-size: 12px !important; line-height: 1.3 !important; font-weight: 500 !important; color: var(--hotel-card-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 310px; } .notifications-widget-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); font-size: 12px; line-height: 22px; font-weight: 700; text-align: center; flex-shrink: 0; } /* =============================== NOTIFICATIONS POPUP ================================ */ .notifications-popup { width: 100%; box-sizing: border-box; } .notifications-popup-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; } .notifications-popup-kicker { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--hotel-popup-muted); margin-bottom: 4px; } .notifications-popup-title { font-size: 30px; line-height: 1.02; font-weight: 850; letter-spacing: -0.045em; margin: 0; color: var(--hotel-popup-text); } .notifications-popup-unread { flex-shrink: 0; padding: 6px 10px; border-radius: 999px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); font-size: 12px; line-height: 1; font-weight: 700; } .notifications-popup-subtitle { font-size: 14px; line-height: 1.4; font-weight: 500; margin: 0 0 18px 0; color: var(--hotel-popup-muted); } .notifications-full-list { display: flex; flex-direction: column; gap: 10px; } .notification-full-item { position: relative; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--hotel-request-card-bg, var(--hotel-popup-card)); color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))); border: 1px solid var(--hotel-request-card-border, var(--hotel-border)); } .notification-full-item.is-unread { background: var(--hotel-popup-card); border-color: var(--hotel-border-strong); box-shadow: 0 8px 24px rgba(0,0,0,0.055); } .notification-full-item.is-unread::before { content: ""; position: absolute; left: 8px; top: 18px; width: 6px; height: 6px; border-radius: 999px; background: var(--hotel-accent); } .notification-full-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .notification-full-title { font-size: 15px; line-height: 1.22; font-weight: 780; letter-spacing: -0.015em; color: var(--hotel-request-card-text, var(--hotel-popup-card-text)); } .notification-full-status { flex-shrink: 0; font-size: 11px; line-height: 1; font-weight: 700; padding: 5px 8px; border-radius: 999px; background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); } .notification-full-item.is-unread .notification-full-status { background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); } .notification-full-message { margin-top: 7px; font-size: 13px; line-height: 1.42; font-weight: 500; color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)); } .notification-full-date { margin-top: 9px; font-size: 11px; line-height: 1.25; color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)); } .notifications-empty { font-size: 13px; line-height: 1.4; color: var(--hotel-popup-muted); padding: 14px; border-radius: 14px; background: var(--hotel-popup-card); } /* =============================== MY REQUESTS SHOW MORE ================================ */ .my-requests-show-more { width: 100%; margin-top: 8px; padding: 11px 12px; border-radius: 16px; background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)); color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)); font-size: 13px; line-height: 1; font-weight: 740; text-align: center; cursor: pointer; letter-spacing: -0.01em; } .my-requests-show-more:active { transform: scale(0.985); } /* =============================== MY REQUESTS HOME MOBILE POLISH ================================ */ @media screen and (max-width: 767px) { #my-requests-widget { margin-top: 0 !important; padding: 14px 15px !important; border-radius: 20px !important; background: var(--hotel-widget-bg, var(--hotel-button-bg, var(--hotel-card))) !important; color: var(--hotel-widget-text, var(--hotel-button-text, var(--hotel-card-text))) !important; border: 1px solid var(--hotel-border) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.012) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #my-requests-widget .my-requests-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; } #my-requests-widget h2, #my-requests-widget .my-requests-title { font-size: 15px !important; line-height: 1 !important; font-weight: 720 !important; letter-spacing: -0.015em !important; margin: 0 !important; color: var(--hotel-widget-text, var(--hotel-card-text)) !important; } #my-requests-count, #my-requests-widget .my-requests-count { font-size: 12px !important; line-height: 1.3 !important; font-weight: 500 !important; color: var(--hotel-widget-muted, var(--hotel-card-muted)) !important; margin-top: 4px !important; } #my-requests-widget .my-requests-view-all { display: flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 680 !important; color: var(--hotel-widget-muted, var(--hotel-card-muted)) !important; white-space: nowrap !important; padding-top: 0 !important; } #my-requests-widget .my-requests-view-all span { font-size: 20px !important; line-height: 0.8 !important; color: var(--hotel-widget-muted, var(--hotel-card-muted)) !important; } #my-requests-widget .my-requests-list { margin-top: 10px !important; } #my-requests-widget .my-request-item { min-height: auto !important; padding: 11px 13px !important; border-radius: 18px !important; background: var(--hotel-request-card-bg, var(--hotel-popup-card)) !important; color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))) !important; border: 1px solid var(--hotel-request-card-border, var(--hotel-border)) !important; box-shadow: none !important; } #my-requests-widget .my-request-item *, #my-requests-widget .my-request-full-item * { color: inherit !important; } #my-requests-widget .my-request-name { font-size: var(--home-btn-font-size) !important; line-height: var(--home-btn-line-height) !important; font-weight: var(--home-btn-font-weight) !important; letter-spacing: -0.012em !important; color: var(--hotel-request-card-text, var(--hotel-widget-text, var(--hotel-card-text))) !important; max-width: 185px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #my-requests-widget .my-request-meta { font-size: 12px !important; line-height: 1.3 !important; font-weight: 500 !important; margin-top: 4px !important; color: var(--hotel-request-card-muted, var(--hotel-widget-muted, var(--hotel-card-muted))) !important; } #my-requests-widget .my-request-status { font-size: 11px !important; line-height: 1 !important; padding: 6px 10px !important; border-radius: 999px !important; font-weight: 680 !important; background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border: 1px solid var(--hotel-status-bg, var(--hotel-accent)) !important; } #my-requests-widget .my-request-cancel { font-size: 20px !important; opacity: 0.42 !important; } #my-requests-widget .my-requests-show-more { display: none !important; } } #static-services-wrapper, #static-more-services-wrapper { display: none !important; } /* =============================== DYNAMIC SERVICES — SAME DESIGN AS OLD BUTTONS ================================ */ #dynamic-services-grid, #dynamic-more-services-grid { width: 100%; max-width: 480px; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: stretch !important; } #dynamic-services-grid .button-main, #dynamic-more-services-grid .button-main { min-height: var(--service-btn-height) !important; height: var(--service-btn-height) !important; max-height: var(--service-btn-height) !important; padding: var(--service-btn-padding-top) var(--service-btn-padding-x) 0 var(--service-btn-padding-x) !important; align-items: flex-start !important; justify-content: flex-start !important; font-size: var(--service-btn-font-size) !important; line-height: var(--service-btn-line-height) !important; font-weight: var(--service-btn-font-weight) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-overflow: clip !important; } #dynamic-more-services-grid { margin-top: 0 !important; } .dynamic-service-popup { width: 100%; } .dynamic-service-actions { width: 100%; } .dynamic-view-more-btn { cursor: pointer; } .service-popup-opening-hours { margin: -6px 0 13px 0 !important; color: var(--hotel-accent) !important; font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 560 !important; letter-spacing: -0.005em !important; } .service-popup-price-block:empty { display: none !important; } .dynamic-service-popup .nfc-restaurant-actions { margin-top: 12px; } .nfc-restaurant-actions .nfc-service-choice { margin: 0; } .nfc-restaurant-actions .nfc-field-label { margin-top: 0; margin-bottom: 0; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .nfc-restaurant-actions .nfc-field-label:not(:first-child) { margin-top: 18px; } /* =============================== LANGUAGE SWITCHER ================================ */ .language-switcher { position: absolute; top: 18px; right: 18px; z-index: 20; } .section-home { position: relative !important; } .language-switcher-btn { min-width: 44px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hotel-border); background: var(--hotel-card); color: var(--hotel-card-text); font-family: var(--hotel-font); font-size: 12px; line-height: 1; font-weight: 760; letter-spacing: -0.01em; box-shadow: 0 6px 18px rgba(0,0,0,0.035); cursor: pointer; } .language-menu { position: absolute; top: 40px; right: 0; min-width: 132px; padding: 6px; border-radius: 16px; border: 1px solid var(--hotel-border); background: var(--hotel-popup-bg); box-shadow: 0 14px 38px rgba(0,0,0,0.12); z-index: 40; } .language-option { width: 100%; min-height: 36px; padding: 0 10px; border: none; border-radius: 12px; background: transparent; color: var(--hotel-popup-text); font-family: var(--hotel-font); font-size: 13px; font-weight: 680; text-align: left; cursor: pointer; } .language-option:hover, .language-option.is-active { background: var(--hotel-popup-card); } /* =============================== FINAL FIX — TRANSLATIONS / MOBILE / LANGUAGE Add this at the very end before ================================ */ /* Language switcher must stay clickable above every Webflow layer */ #language-switcher, .language-switcher { position: fixed !important; top: 18px !important; right: 18px !important; z-index: 999999 !important; pointer-events: auto !important; } #btn-language-switcher, .language-switcher-btn { pointer-events: auto !important; cursor: pointer !important; position: relative !important; z-index: 1000000 !important; min-width: 44px !important; height: 34px !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid var(--hotel-border) !important; background: var(--hotel-card) !important; color: var(--hotel-card-text) !important; font-family: var(--hotel-font) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 760 !important; letter-spacing: -0.01em !important; box-shadow: 0 8px 22px rgba(0,0,0,0.06) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } #language-menu, .language-menu { pointer-events: auto !important; position: absolute !important; top: 40px !important; right: 0 !important; z-index: 1000000 !important; min-width: 132px !important; padding: 6px !important; border-radius: 16px !important; border: 1px solid var(--hotel-border) !important; background: var(--hotel-popup-bg) !important; box-shadow: 0 14px 38px rgba(0,0,0,0.14) !important; } .language-option { pointer-events: auto !important; cursor: pointer !important; width: 100% !important; min-height: 36px !important; padding: 0 10px !important; border: none !important; border-radius: 12px !important; background: transparent !important; color: var(--hotel-popup-text) !important; font-family: var(--hotel-font) !important; font-size: 13px !important; font-weight: 680 !important; text-align: left !important; } .language-option:hover, .language-option.is-active { background: var(--hotel-popup-card) !important; } /* =============================== THEME CONTRAST PAIRS — GENERIC Every visual surface uses its matching on-surface text variable. Variables are hydrated by dynamic-worker from Supabase hotels.theme. ================================ */ .service-popup-price-block, .info-card, .info-hours-row, .notifications-empty { background: var(--hotel-popup-card) !important; color: var(--hotel-popup-card-text) !important; border-color: var(--hotel-border) !important; } .service-popup-price-block *, .info-card *, .info-hours-row *, .notifications-empty * { color: inherit !important; } .service-popup-price-label, .info-card-label, .info-hours-time { color: var(--hotel-popup-card-muted) !important; } .service-popup-price-value, .info-card-value, .info-card-value-large, .info-hours-name { color: var(--hotel-popup-card-text) !important; } .nfc-select, .nfc-input, .nfc-date-picker, .nfc-time-value, .nfc-destination-value, .nfc-note-value, .nfc-guests-value, .nfc-service-form input, .nfc-service-form select, .nfc-message-textarea { background: var(--hotel-popup-card) !important; color: var(--hotel-popup-card-text) !important; border-color: var(--hotel-border) !important; } .nfc-select::placeholder, .nfc-input::placeholder, .nfc-time-value::placeholder, .nfc-destination-value::placeholder, .nfc-note-value::placeholder, .nfc-guests-value::placeholder, .nfc-service-form input::placeholder, .nfc-message-textarea::placeholder { color: var(--hotel-popup-card-muted) !important; } .nfc-date-btn, .nfc-later-btn, .nfc-flex-choice, .my-requests-show-more { background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)) !important; color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)) !important; border-color: var(--hotel-border) !important; } .nfc-date-btn *, .nfc-later-btn *, .nfc-flex-choice *, .my-requests-show-more * { color: inherit !important; } .nfc-date-btn.is-selected, .nfc-later-btn.is-selected, .nfc-flex-choice.is-selected, .nfc-submit-btn, .nfc-external-booking-btn, .info-copy-btn, .info-action-btn, #copy-wifi-btn, #btn-send-message { background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border-color: var(--hotel-status-bg, var(--hotel-accent)) !important; } .nfc-date-btn.is-selected *, .nfc-later-btn.is-selected *, .nfc-flex-choice.is-selected *, .nfc-submit-btn *, .nfc-external-booking-btn *, .info-copy-btn *, .info-action-btn *, #copy-wifi-btn *, #btn-send-message * { color: inherit !important; } .my-request-item, .my-request-full-item, .notification-full-item { background: var(--hotel-request-card-bg, var(--hotel-popup-card)) !important; color: var(--hotel-request-card-text, var(--hotel-popup-card-text)) !important; border-color: var(--hotel-request-card-border, var(--hotel-border)) !important; } .my-request-item *, .my-request-full-item *, .notification-full-item * { color: inherit; } .my-request-meta, .my-request-full-meta, .notification-full-message, .notification-full-date { color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)) !important; } .my-request-status, .my-request-full-status, .notification-full-status, .notifications-widget-badge, .notifications-popup-unread, #notifications-widget-badge { background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border-color: transparent !important; } .my-request-status *, .my-request-full-status *, .notification-full-status *, .notifications-widget-badge *, .notifications-popup-unread *, #notifications-widget-badge * { color: inherit !important; } .info-popup-title, .nfc-popup-title, .service-popup-title, .my-requests-full-title, .notifications-popup-title { color: var(--hotel-popup-text) !important; } .info-popup-subtitle, .nfc-popup-subtitle, .service-popup-description, .service-popup-note, .my-requests-full-subtitle, .notifications-popup-subtitle, .info-note { color: var(--hotel-popup-muted) !important; } /* Avoid translated home buttons becoming too long */ .section-home .button-main, .section-home #btn-open-wifi, .section-home #btn-open-hours, .section-home #btn-open-hotel-info, .section-home #btn-view-services, .section-home #btn-open-message, .section-home #btn-call-reception, .section-home #btn-make-room, .section-home #btn-dnd, .section-home .reception-split .button-main, .section-home .housekeeping-split .button-main, .section-home .reception-split [id^="btn-"], .section-home .housekeeping-split [id^="btn-"] { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } /* Dynamic service cards: allow controlled 2-line labels */ #dynamic-services-grid .button-main, #dynamic-more-services-grid .button-main, #section-services [id^="btn-service-"], #section-more-services [id^="btn-service-"], #section-services #btn-more-services, #section-more-services #btn-more-services { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; overflow: hidden !important; } /* Popup fields: avoid labels/inputs breaking badly in French */ .nfc-field-label, .service-popup-opening-hours, .service-popup-description, .info-popup-subtitle, .nfc-popup-subtitle, .info-card-label, .info-card-value, .info-text, .info-note { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } /* Late check-out buttons: layout only — colors come from .nfc-submit-btn */ .nfc-late-checkout-btn { min-height: 54px !important; padding: 12px 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } .nfc-late-checkout-btn.is-current-late-checkout { background: var(--hotel-button-active-bg, var(--hotel-primary)) !important; color: var(--hotel-button-active-text, var(--hotel-primary-text)) !important; border-color: var(--hotel-button-active-bg, var(--hotel-primary)) !important; } .nfc-late-checkout-btn.is-late-checkout-unavailable { opacity: 0.45 !important; cursor: not-allowed !important; } .nfc-late-checkout-btn.is-late-checkout-cancelling { opacity: 0.55 !important; } .nfc-late-checkout-main { min-width: 0 !important; font-size: 13.5px !important; line-height: 1.15 !important; font-weight: 760 !important; text-align: left !important; white-space: normal !important; } .nfc-late-checkout-price { flex-shrink: 0 !important; font-size: 13px !important; font-weight: 760 !important; white-space: nowrap !important; } .nfc-late-checkout-current { display: none; font-size: 11px !important; font-weight: 620 !important; opacity: 0.7 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .nfc-late-checkout-btn.is-current-late-checkout .nfc-late-checkout-current { display: block !important; } /* Force action style on available late checkout buttons — overrides any earlier rule */ .nfc-submit-btn.nfc-late-checkout-btn:not(.is-late-checkout-unavailable):not(.is-late-checkout-cancelling) { background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border-color: var(--hotel-accent) !important; } .nfc-submit-btn.nfc-late-checkout-btn:not(.is-late-checkout-unavailable):not(.is-late-checkout-cancelling) * { color: inherit !important; } .nfc-submit-btn.nfc-late-checkout-btn .nfc-late-checkout-price { background: transparent !important; padding: 0 !important; border-radius: 0 !important; border: 0 !important; color: inherit !important; } /* Compact French/mobile layout */ @media screen and (max-width: 480px) { :root { --home-btn-font-size: 12.8px; --home-btn-line-height: 1.12; --home-btn-padding-x: 13px; --home-btn-padding-top: 14px; --home-split-font-size: 12.4px; --home-split-line-height: 1.1; --home-split-padding-x: 9px; --home-split-padding-top: 14px; --service-btn-height: 72px; --service-btn-font-size: 13px; --service-btn-line-height: 1.08; --service-btn-padding-x: 14px; --service-btn-padding-top: 15px; } #language-switcher, .language-switcher { top: 14px !important; right: 14px !important; } #btn-language-switcher, .language-switcher-btn { height: 32px !important; min-width: 42px !important; font-size: 11.5px !important; } #language-menu, .language-menu { top: 38px !important; min-width: 124px !important; } .section-home .buttons-wrapper, #dynamic-services-grid, #dynamic-more-services-grid { gap: 10px !important; } .section-home #btn-open-message, .section-home #btn-call-reception, .section-home #btn-make-room, .section-home #btn-dnd { font-size: 12.2px !important; line-height: 1.1 !important; padding-left: 9px !important; padding-right: 9px !important; } #dynamic-services-grid .button-main, #dynamic-more-services-grid .button-main, #section-services [id^="btn-service-"], #section-more-services [id^="btn-service-"], #section-services #btn-more-services, #section-more-services #btn-more-services { min-height: 72px !important; height: 72px !important; max-height: 72px !important; font-size: 13px !important; line-height: 1.08 !important; padding: 15px 14px 0 14px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } .nfc-date-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .nfc-date-btn, .nfc-later-btn, .nfc-flex-choice { font-size: 11.5px !important; line-height: 1.1 !important; padding-left: 4px !important; padding-right: 4px !important; } .nfc-field-label { font-size: 11.8px !important; line-height: 1.15 !important; } .service-popup-title, .info-popup-title, .nfc-popup-title { font-size: 25px !important; line-height: 1.05 !important; } .service-popup-description, .info-popup-subtitle, .nfc-popup-subtitle { font-size: 14.2px !important; line-height: 1.4 !important; } } /* Very small iPhones */ @media screen and (max-width: 375px) { :root { --home-btn-font-size: 12.2px; --home-split-font-size: 11.8px; --service-btn-height: 72px; --service-btn-font-size: 12.4px; --service-btn-padding-x: 12px; --service-btn-line-height: 1.08; } .section-home .buttons-wrapper, #dynamic-services-grid, #dynamic-more-services-grid { gap: 8px !important; } #dynamic-services-grid .button-main, #dynamic-more-services-grid .button-main { min-height: 72px !important; height: 72px !important; max-height: 72px !important; font-size: 12.4px !important; line-height: 1.08 !important; padding: 15px 12px 0 12px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } } /* =============================== GUEST-UX-1 — SECTION VIDE Classe posée par dynamic-worker sur #section-more-services quand aucun service ne l'alimente : titre, sous-titre et grille disparaissent, et avec eux l'écran entier de vide qu'ils laissaient. La section est en display:flex !important plus haut : le !important est donc nécessaire ici. Règle générique — elle ne nomme aucun hôtel et aucun service. ================================ */ #section-more-services.nfc-section-empty { display: none !important; } /* =============================== GUEST-UX-1 — PETIT-DÉJEUNER : NOTE DE LIVRAISON FACULTATIVE Bascule secondaire + bloc replié (DEC-027). Le champ reste un simple commentaire attaché à la demande : aucune destination, aucun routage. ================================ */ .nfc-bk-note-toggle { width: 100%; min-height: 46px; margin: 4px 0 0 0; padding: 11px 14px; border-radius: var(--hotel-radius-md); border: 1px dashed var(--hotel-border-strong); background: transparent; color: var(--hotel-popup-muted); font-family: var(--hotel-font); font-size: 13.5px; font-weight: 640; text-align: left; cursor: pointer; } .nfc-bk-note-toggle::before { content: "+ "; font-weight: 800; } .nfc-bk-note-toggle[aria-expanded="true"] { border-style: solid; color: var(--hotel-popup-text); } .nfc-bk-note-toggle[aria-expanded="true"]::before { content: "− "; } .nfc-bk-note-toggle:focus-visible, .nfc-bk-note-block .nfc-service-input:focus-visible { outline: 2px solid var(--hotel-accent); outline-offset: 2px; } .nfc-bk-note-block[hidden] { display: none !important; } .nfc-field-help { color: var(--hotel-popup-muted); font-size: 12px; line-height: 1.35; font-weight: 500; margin: 6px 0 0 0; } /* =============================== RS-3 — ROOM SERVICE GUEST Module isolé : TOUT sélecteur de cette section est préfixé .nfc-rs- / #nfc-rs- (aucun style appliqué hors module). Variables thème hydratées par dynamic-worker (contrat inchangé). ================================ */ /* Carte home (dans #dynamic-services-grid, hérite du sizing .button-main) */ #nfc-rs-open-card { position: relative !important; } .nfc-rs-card-label { color: inherit; } .nfc-rs-card-badge { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 760; line-height: 1; background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border: none; } /* Popup */ .nfc-rs-popup { width: 100%; box-sizing: border-box; } .nfc-rs-title { margin-bottom: 10px !important; } .nfc-rs-subtitle { color: var(--hotel-popup-muted) !important; font-size: 14.5px; line-height: 1.4; font-weight: 500; margin: 0 0 14px 0; } /* Barre collante : navigation + catégories. Le conteneur de défilement réel est la popup elle-même (max-height + overflow auto) : position:sticky s'y ancre naturellement. Fond opaque obligatoire, le catalogue défile dessous. */ .nfc-rs-stickybar { position: sticky; /* Une barre collante s'ancre sur la BOÎTE DE CONTENU du conteneur : mesuré, un top nul l'épinglerait SOUS le rembourrage haut de la popup et laisserait défiler le catalogue dans cette bande. dynamic-worker mesure ce rembourrage à l'exécution et le reporte, négatif, dans --nfc-rs-sticky-top : la barre s'épingle alors exactement au bord visible du conteneur. Valeur de repli 0 si la mesure n'a pas encore eu lieu, et 0 suffit si le shell n'a pas de rembourrage. Aucune valeur écrite en dur, aucune dépendance à un shell. Ce décalage agit sur la propriété top SEULE : il ne doit jamais être reporté en marge négative, sinon le fond opaque de la barre remonterait par-dessus le titre du module au repos (régression P1-1 de l'audit, mesurée à 22 px sur 26). */ top: var(--nfc-rs-sticky-top, 0px); z-index: 40; margin: 0 0 12px 0; /* 2 px : le contour de focus des chips (offset 2 px) ne doit pas être rogné. */ padding-top: 2px; background: var(--hotel-popup-bg); } .nfc-rs-stickybar .nfc-rs-nav { margin-bottom: 0; } .nfc-rs-stickybar::after { content: ""; display: block; height: 10px; background: linear-gradient(to bottom, var(--hotel-popup-bg), rgba(0, 0, 0, 0)); } /* Chips de catégories : une seule ligne, défilement horizontal au pouce. Le contenu vient exclusivement des catégories de l'hôtel. */ .nfc-rs-chips { display: flex; flex-wrap: nowrap; gap: 7px; margin: 8px 0 0 0; padding: 1px 0 6px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .nfc-rs-chips::-webkit-scrollbar { display: none; } .nfc-rs-chip { flex: 0 0 auto; min-height: 44px; max-width: 70vw; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hotel-border); background: var(--hotel-popup-card); color: var(--hotel-popup-card-muted); font-family: var(--hotel-font); font-size: 13px; font-weight: 660; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; scroll-snap-align: start; } .nfc-rs-chip.is-active { background: var(--hotel-status-bg, var(--hotel-accent)); color: var(--hotel-status-text, var(--hotel-accent-text)); border-color: transparent; font-weight: 760; } .nfc-rs-chip:focus-visible, .nfc-rs-nav-btn:focus-visible, .nfc-rs-step-btn:focus-visible, .nfc-rs-cta:focus-visible, .nfc-rs-secondary-btn:focus-visible, .nfc-rs-closure-toggle:focus-visible, .nfc-rs-closure-anchor:focus-visible, .nfc-rs-cancel-btn:focus-visible { outline: 2px solid var(--hotel-accent); outline-offset: 2px; } /* Navigation carte / mes commandes */ .nfc-rs-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px 0; padding: 4px; border-radius: 999px; background: var(--hotel-popup-card); border: 1px solid var(--hotel-border); } .nfc-rs-nav-btn { width: 100%; min-height: 44px; border: none; background: transparent; color: var(--hotel-popup-card-muted); border-radius: 999px; padding: 9px 10px; font-size: 13px; font-weight: 680; font-family: var(--hotel-font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .nfc-rs-nav-btn.is-active { background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)); color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)); box-shadow: var(--hotel-shadow-xs); } .nfc-rs-nav-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 760; background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; } /* Bandeaux d'état */ .nfc-rs-banner { border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-border); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); padding: 12px 13px; font-size: 13px; line-height: 1.42; font-weight: 560; margin: 0 0 12px 0; } .nfc-rs-banner-closed, .nfc-rs-banner-error { border-color: var(--hotel-border-strong); } .nfc-rs-banner-error { font-weight: 680; } /* Bandeau de fermeture : résumé compact d'une ligne, détail dépliable, accès direct aux produits encore disponibles (DEC-025). */ .nfc-rs-closure { padding: 11px 12px; } .nfc-rs-closure-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nfc-rs-closure-summary { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .nfc-rs-closure-toggle { flex: 0 0 auto; min-height: 44px; padding: 8px 10px; border: none; background: transparent; color: var(--hotel-popup-card-muted); font-family: var(--hotel-font); font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; } .nfc-rs-closure-detail { margin-top: 8px; font-size: 12.8px; font-weight: 500; line-height: 1.42; overflow-wrap: anywhere; } .nfc-rs-closure-detail[hidden] { display: none !important; } .nfc-rs-closure-anchor { width: 100%; min-height: 44px; margin-top: 9px; padding: 10px 12px; border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-border-strong); background: transparent; color: var(--hotel-popup-card-text); font-family: var(--hotel-font); font-size: 13px; font-weight: 700; cursor: pointer; } /* Catalogue */ .nfc-rs-category { margin: 4px 0 16px 0; } .nfc-rs-category-title { color: var(--hotel-popup-text) !important; font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin: 14px 0 4px 0; } .nfc-rs-category-subtitle { color: var(--hotel-popup-muted) !important; font-size: 13px; line-height: 1.4; font-weight: 500; margin: 0 0 8px 0; } .nfc-rs-item { border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); border: 1px solid var(--hotel-border); padding: 12px 13px; margin: 0 0 10px 0; } /* Produit indisponible : COMPACTÉ, jamais masqué ni déplacé. Aucun contenu n'est retiré (titre, description, prix, motif restent) — seule l'emprise verticale baisse, parce qu'un catalogue en fermeture en aligne des dizaines. Le choix de les afficher ou non appartient à l'hôtel, pas au code. */ .nfc-rs-item.is-unavailable { opacity: 0.62; padding: 9px 13px; margin-bottom: 6px; } .nfc-rs-item.is-unavailable .nfc-rs-item-desc { margin-top: 2px; } .nfc-rs-item.is-unavailable .nfc-rs-item-unavailable { margin-top: 3px; } .nfc-rs-item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .nfc-rs-item-main { min-width: 0; flex: 1 1 auto; } .nfc-rs-item-title { color: var(--hotel-popup-card-text) !important; font-size: 14.5px; line-height: 1.25; font-weight: 760; letter-spacing: -0.01em; overflow-wrap: anywhere; } .nfc-rs-item-desc { color: var(--hotel-popup-card-muted) !important; font-size: 12.5px; line-height: 1.4; font-weight: 500; margin-top: 3px; overflow-wrap: anywhere; } .nfc-rs-item-unavailable { color: var(--hotel-popup-card-muted) !important; font-size: 12px; line-height: 1.35; font-weight: 650; margin-top: 5px; } .nfc-rs-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; } .nfc-rs-item-price { color: var(--hotel-popup-card-text) !important; font-size: 13.5px; font-weight: 800; white-space: nowrap; } /* Variantes */ .nfc-rs-variants { margin-top: 10px; border-top: 1px solid var(--hotel-border); padding-top: 4px; } .nfc-rs-variant-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; } .nfc-rs-variant-row + .nfc-rs-variant-row { border-top: 1px solid var(--hotel-border); } .nfc-rs-variant-label { color: var(--hotel-popup-card-text) !important; font-size: 13.5px; font-weight: 620; min-width: 0; overflow-wrap: anywhere; } .nfc-rs-variant-row .nfc-rs-item-side { flex-direction: row; align-items: center; gap: 10px; } /* Stepper quantité (cibles tactiles >= 44px) */ .nfc-rs-stepper { display: flex; align-items: center; gap: 6px; } .nfc-rs-step-btn { width: 44px; height: 44px; min-width: 44px; border-radius: 999px; border: 1px solid var(--hotel-border); background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)) !important; color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)) !important; font-family: var(--hotel-font); font-size: 20px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; transition: transform 0.14s ease, box-shadow 0.14s ease; } .nfc-rs-step-btn:active { transform: scale(0.94); } .nfc-rs-step-plus { background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border-color: var(--hotel-status-bg, var(--hotel-accent)) !important; } .nfc-rs-step-qty { min-width: 22px; text-align: center; color: var(--hotel-popup-card-text) !important; font-size: 15px; font-weight: 800; } /* Panier */ .nfc-rs-cart-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .nfc-rs-cart-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); color: var(--hotel-popup-card-text); border: 1px solid var(--hotel-border); padding: 11px 13px; } .nfc-rs-cart-line.is-unavailable { opacity: 0.62; } .nfc-rs-cart-line .nfc-rs-item-side { flex-direction: row; align-items: center; gap: 10px; } .nfc-rs-cart-variant { color: var(--hotel-popup-card-muted) !important; font-size: 12px; font-weight: 600; } .nfc-rs-empty { font-size: 13px; color: var(--hotel-popup-card-muted) !important; padding: 13px; border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); border: 1px solid var(--hotel-border); margin-bottom: 12px; } /* Note (textarea mobile) */ .nfc-rs-note-label { display: block; margin: 11px 0 7px 0; font-size: 12px; font-weight: 760; color: var(--hotel-popup-muted) !important; letter-spacing: -0.01em; } .nfc-rs-note { width: 100%; min-height: 74px; box-sizing: border-box; border: 1px solid var(--hotel-border); border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card) !important; color: var(--hotel-popup-card-text) !important; font-size: 16px; font-weight: 560; font-family: var(--hotel-font); padding: 12px 14px; outline: none; resize: vertical; } .nfc-rs-note:focus { border-color: var(--hotel-accent); } .nfc-rs-note::placeholder { color: var(--hotel-popup-card-muted) !important; } .nfc-rs-note-count { color: var(--hotel-popup-muted) !important; font-size: 11px; font-weight: 560; text-align: right; margin: 4px 0 10px 0; } /* Totaux */ .nfc-rs-totals { border-radius: var(--hotel-radius-md); background: var(--hotel-popup-card); border: 1px solid var(--hotel-border); padding: 11px 13px; margin: 8px 0 12px 0; } .nfc-rs-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--hotel-popup-card-muted) !important; font-size: 13px; font-weight: 600; padding: 3px 0; } .nfc-rs-total-row span { color: inherit !important; } .nfc-rs-total-main { color: var(--hotel-popup-card-text) !important; font-size: 15px; font-weight: 800; } .nfc-rs-amounts-note { color: var(--hotel-popup-card-muted) !important; font-size: 11.5px; line-height: 1.4; font-weight: 500; margin-top: 6px; } /* Barre panier compacte : absente quand le panier est vide, collée au bas de la zone de défilement dès le premier article. safe-area-inset-bottom évite de passer sous la barre de navigation du téléphone. */ .nfc-rs-cartbar { position: sticky; bottom: 0; z-index: 35; margin: 14px 0 0 0; padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px)) 0; background: var(--hotel-popup-bg); } .nfc-rs-cartbar-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 0 14px; text-align: left; } .nfc-rs-cartbar-count { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--hotel-accent-text, #fff); color: var(--hotel-status-bg, var(--hotel-accent)); } .nfc-rs-cartbar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nfc-rs-cartbar-total { flex: 0 0 auto; white-space: nowrap; font-weight: 800; } /* CTA sticky (dans la popup scrollable) */ .nfc-rs-sticky { position: sticky; bottom: -2px; background: var(--hotel-popup-bg); padding: 10px 0 4px 0; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .nfc-rs-cta { width: 100%; min-height: 50px; border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-status-bg, var(--hotel-accent)); background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; font-family: var(--hotel-font); font-size: 14.5px; font-weight: 760; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.14); transition: transform 0.15s ease, opacity 0.15s ease; } .nfc-rs-cta:active { transform: scale(0.98); } .nfc-rs-cta.is-disabled, .nfc-rs-cta[disabled] { opacity: 0.45; cursor: not-allowed; } .nfc-rs-secondary-btn { width: 100%; min-height: 46px; border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-border); background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)) !important; color: var(--hotel-secondary-button-text, var(--hotel-popup-card-text)) !important; font-family: var(--hotel-font); font-size: 13.5px; font-weight: 700; cursor: pointer; } /* Reçu + suivi */ .nfc-rs-receipt-check { color: var(--hotel-popup-text) !important; font-size: 16px; font-weight: 800; letter-spacing: -0.015em; margin: 2px 0 12px 0; } .nfc-rs-order-card { border-radius: var(--hotel-radius-md); background: var(--hotel-request-card-bg, var(--hotel-popup-card)); color: var(--hotel-request-card-text, var(--hotel-popup-card-text)); border: 1px solid var(--hotel-request-card-border, var(--hotel-border)); padding: 13px; margin: 0 0 12px 0; } .nfc-rs-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .nfc-rs-order-ref { color: var(--hotel-request-card-text, var(--hotel-popup-card-text)) !important; font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; } .nfc-rs-status { font-size: 11px; font-weight: 720; padding: 5px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; background: var(--hotel-status-bg, var(--hotel-accent)) !important; color: var(--hotel-status-text, var(--hotel-accent-text)) !important; border: 1px solid transparent; } .nfc-rs-status-delivered, .nfc-rs-status-refused, .nfc-rs-status-cancelled { background: var(--hotel-secondary-button-bg, var(--hotel-popup-card)) !important; color: var(--hotel-secondary-button-text, var(--hotel-popup-card-muted)) !important; border-color: var(--hotel-border) !important; } .nfc-rs-order-lines { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; } .nfc-rs-order-line { display: flex; align-items: baseline; gap: 7px; color: var(--hotel-request-card-text, var(--hotel-popup-card-text)) !important; font-size: 13px; line-height: 1.35; font-weight: 600; } .nfc-rs-order-line-qty { flex-shrink: 0; color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)) !important; font-weight: 760; } .nfc-rs-order-line-title { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; color: inherit !important; } .nfc-rs-order-line-total { flex-shrink: 0; white-space: nowrap; color: inherit !important; font-weight: 720; } .nfc-rs-order-note { color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)) !important; font-size: 12.5px; line-height: 1.4; font-weight: 500; margin: 4px 0 8px 0; overflow-wrap: anywhere; } .nfc-rs-order-meta { color: var(--hotel-request-card-muted, var(--hotel-popup-card-muted)) !important; font-size: 11.5px; font-weight: 560; margin-top: 4px; } .nfc-rs-cancel-btn { width: 100%; min-height: 44px; margin-top: 9px; border-radius: var(--hotel-radius-md); border: 1px solid var(--hotel-border-strong); background: transparent !important; color: var(--hotel-request-card-text, var(--hotel-popup-card-text)) !important; font-family: var(--hotel-font); font-size: 13px; font-weight: 700; cursor: pointer; } .nfc-rs-cancel-btn.is-disabled, .nfc-rs-cancel-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* Responsive (mobile étroit) */ @media screen and (max-width: 480px) { /* Cible tactile minimale 44 px, y compris sur mobile étroit : le pas de quantité est la commande la plus utilisée du Room Service. */ .nfc-rs-step-btn { width: 44px; height: 44px; min-width: 44px; } .nfc-rs-item-row, .nfc-rs-cart-line { gap: 9px; } .nfc-rs-item-title { font-size: 14px; } .nfc-rs-nav-btn { font-size: 12.4px; } .nfc-rs-chip { font-size: 12.4px; padding: 10px 12px; max-width: 62vw; } .nfc-rs-cartbar-btn { gap: 8px; padding: 0 11px; } } /* Écran très étroit (320 px) : rien ne doit déborder ni être tronqué. */ @media screen and (max-width: 360px) { .nfc-rs-chip { font-size: 12px; padding: 10px 11px; max-width: 58vw; } .nfc-rs-closure-summary { font-size: 13px; } .nfc-rs-cartbar-label { font-size: 13px; } .nfc-rs-cartbar-btn { gap: 7px; padding: 0 9px; } } /* Défilement animé refusé : les ancrages restent instantanés. */ @media (prefers-reduced-motion: reduce) { .nfc-rs-chips { scroll-behavior: auto; } .nfc-rs-cta, .nfc-rs-step-btn { transition: none !important; } }