/* mobee public theme — company #47 — generated 2026-09-26T12:35:54+02:00 */
html.public-layout-root {
  --pc-page-bg: #f5f4f0;
  --pc-card-bg: #ffffff;
  --pc-accent: #d4a84b;
  --pc-accent-hover: #bb9442;
  --pc-topbar-bg: #0b0b0b;
  --pc-body-text: #171717;
  --pc-on-accent-text: #ffffff;
  --pc-accent-r: 212;
  --pc-accent-g: 168;
  --pc-accent-b: 75;
  --pc-body-text-r: 23;
  --pc-body-text-g: 23;
  --pc-body-text-b: 23;
  --pc-on-accent-r: 255;
  --pc-on-accent-g: 255;
  --pc-on-accent-b: 255;
  --pc-font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --pc-letter-spacing: 0.025em;
}
/*
 * Public pages — Cinepizza (Cinema City Ravenna).
 * Light “film paper” surfaces, black top bar, web gold accent (not neon #F6E401).
 * On-accent text is near-black for readable gold CTAs / stepper.
 * Colors via --pc-* from generated company CSS (on-accent overridden below).
 * @see App\Services\PublicPagesCompanyThemeCssGenerator
 */
html.public-layout-root {
 /* Gold buttons / steps need dark ink — generator defaults to white. */
 --pc-on-accent-text: #111111;
 --pc-on-accent-r: 17;
 --pc-on-accent-g: 17;
 --pc-on-accent-b: 17;
}
html.public-layout-root body.min-h-screen {
 background-color: var(--pc-page-bg);
 color: var(--pc-body-text);
 font-family: var(--pc-font-body, var(--font-sans));
 letter-spacing: var(--pc-letter-spacing, normal);
}
html.public-layout-root body.min-h-screen :where(button, input, select, textarea) {
 font-family: inherit;
 letter-spacing: inherit;
}
html.public-layout-root body > div.min-h-screen,
html.public-layout-root body > div.min-h-dvh {
 background-image:
 radial-gradient(
  ellipse 120% 70% at 50% -20%,
  color-mix(in srgb, var(--pc-accent) 14%, var(--pc-page-bg)) 0%,
  transparent 55%
 ),
 linear-gradient(
  180deg,
  color-mix(in srgb, var(--pc-body-text) 3%, var(--pc-page-bg)) 0%,
  var(--pc-page-bg) 28%
 );
 background-repeat: no-repeat;
}
html.public-layout-root .public-themed-page {
 background-color: var(--pc-page-bg);
 background-image:
 radial-gradient(ellipse 110% 60% at 50% -12%, color-mix(in srgb, var(--pc-accent) 12%, transparent) 0%, transparent 50%),
 radial-gradient(ellipse 50% 40% at 100% 0%, color-mix(in srgb, var(--pc-body-text) 4%, transparent) 0%, transparent 45%);
}
html.public-layout-root .public-themed-card {
 background-color: var(--pc-card-bg);
 border-radius: 1.25rem;
 border: 1px solid color-mix(in srgb, var(--pc-body-text) 10%, transparent);
 box-shadow:
 0 1px 0 color-mix(in srgb, var(--pc-accent) 18%, transparent),
 0 24px 48px -28px color-mix(in srgb, var(--pc-body-text) 22%, transparent),
 0 10px 24px -16px color-mix(in srgb, var(--pc-accent) 18%, transparent);
 overflow: hidden;
}
html.public-layout-root .public-themed-topbar {
 background-color: var(--pc-topbar-bg);
 border-bottom: 1px solid color-mix(in srgb, var(--pc-accent) 35%, transparent);
 box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--pc-body-text) 55%, transparent);
}
/* Black cinema topbar — light brand/back chrome only (not the white language pill). */
html.public-layout-root .public-themed-topbar a.truncate,
html.public-layout-root .public-themed-topbar a.whitespace-nowrap {
 color: #fafafa;
}
html.public-layout-root .public-themed-topbar a.truncate:hover,
html.public-layout-root .public-themed-topbar a.whitespace-nowrap:hover {
 color: #ffffff;
}
html.public-layout-root .public-themed-topbar div.truncate,
html.public-layout-root .public-themed-topbar div.truncate span {
 color: #fafafa;
}
/* Hub landing: keep logo readable without dominating the viewport. */
html.public-layout-root .public-hub-logo {
 display: block;
 width: auto;
 height: auto;
 max-height: 10.5rem;
 max-width: min(16rem, 72vw);
 object-fit: contain;
}
@media (min-width: 640px) {
 html.public-layout-root .public-hub-logo {
  max-height: 12rem;
  max-width: 18rem;
 }
}
html.public-layout-root .public-themed-accent {
 background-color: var(--pc-accent);
 color: var(--pc-on-accent-text);
 box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--pc-accent) 55%, transparent);
 transition:
 background-color 0.2s ease,
 box-shadow 0.2s ease,
 transform 0.2s ease;
}
html.public-layout-root .public-themed-accent:hover:not(:disabled) {
 background-color: var(--pc-accent-hover);
 box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--pc-accent) 50%, transparent);
 transform: translateY(-1px);
}
html.public-layout-root .public-themed-accent:disabled {
 background-color: #e4e4e7;
 color: #737373;
 box-shadow: none;
 transform: none;
 cursor: not-allowed;
}
html.public-layout-root .public-themed-accent-bg {
 background-color: var(--pc-accent);
 transition: background-color 0.2s ease;
}
html.public-layout-root .public-themed-step-done {
 background-color: color-mix(in srgb, var(--pc-accent) 78%, var(--pc-body-text));
 color: #fafafa;
 box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pc-accent) 28%, transparent);
}
html.public-layout-root .public-themed-step-active {
 background-color: var(--pc-accent);
 color: var(--pc-on-accent-text);
 box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-body-text) 18%, transparent);
}
html.public-layout-root .public-themed-link {
 color: color-mix(in srgb, var(--pc-accent) 55%, var(--pc-body-text));
 text-underline-offset: 0.25em;
 text-decoration-thickness: 1px;
}
html.public-layout-root .public-themed-accent-text {
 color: color-mix(in srgb, var(--pc-accent) 45%, var(--pc-body-text));
}
html.public-layout-root .public-themed-input-focus:focus {
 border-color: color-mix(in srgb, var(--pc-accent) 65%, transparent);
 outline: 1px solid color-mix(in srgb, var(--pc-accent) 35%, transparent);
 outline-offset: 1px;
 box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-accent) 16%, transparent);
}
/* Public menu — welcome popup */
html.public-layout-root .public-menu-opening-popup-backdrop {
 background-color: color-mix(in srgb, var(--pc-body-text) 58%, transparent);
}
html.public-layout-root .public-menu-opening-popup {
 color: var(--pc-body-text);
}
html.public-layout-root .public-menu-opening-popup__title {
 color: var(--pc-body-text);
}
html.public-layout-root .public-menu-opening-popup__description {
 color: color-mix(in srgb, var(--pc-body-text) 78%, var(--pc-card-bg));
}
html.public-layout-root .public-menu-opening-popup__close {
 background-color: color-mix(in srgb, var(--pc-body-text) 6%, var(--pc-card-bg));
 color: var(--pc-body-text);
 border: 1px solid color-mix(in srgb, var(--pc-body-text) 12%, transparent);
}
html.public-layout-root .public-menu-opening-popup__close:hover {
 background-color: color-mix(in srgb, var(--pc-body-text) 12%, var(--pc-card-bg));
}
html.public-layout-root .public-menu-opening-popup__image-wrap {
 background-color: color-mix(in srgb, var(--pc-body-text) 4%, var(--pc-card-bg));
}
/* Menu category bands — soft gold wash */
html.public-layout-root .public-menu-subsection-band {
 background-color: color-mix(in srgb, var(--pc-accent) 12%, var(--pc-card-bg));
 color: var(--pc-body-text, #171717);
 transition: background-color 0.2s ease;
}
html.public-layout-root .public-menu-subsection-band:hover {
 background-color: color-mix(in srgb, var(--pc-accent) 18%, var(--pc-card-bg));
}
html.public-layout-root .public-menu-subsection-band.public-menu-subsection-band--open {
 background-color: color-mix(in srgb, var(--pc-accent) 26%, var(--pc-card-bg));
}
html.public-layout-root .public-menu-subsection-band__chevron {
 color: color-mix(in srgb, var(--pc-accent) 40%, var(--pc-body-text));
}
html.public-layout-root .public-menu-subsection-band__label {
 color: inherit;
}
@supports not (background-color: color-mix(in srgb, red 50%, blue)) {
 html.public-layout-root body > div.min-h-screen,
 html.public-layout-root body > div.min-h-dvh {
 background-image: radial-gradient(
  ellipse 120% 80% at 50% -20%,
  rgba(var(--pc-accent-r), var(--pc-accent-g), var(--pc-accent-b), 0.14),
  transparent
 );
 }
 html.public-layout-root .public-themed-topbar {
 background-color: var(--pc-topbar-bg);
 border-bottom: 1px solid rgba(var(--pc-accent-r), var(--pc-accent-g), var(--pc-accent-b), 0.35);
 }
 html.public-layout-root .public-themed-topbar a.truncate,
 html.public-layout-root .public-themed-topbar a.whitespace-nowrap,
 html.public-layout-root .public-themed-topbar div.truncate,
 html.public-layout-root .public-themed-topbar div.truncate span {
 color: #fafafa;
 }
 html.public-layout-root .public-themed-step-done {
 background-color: var(--pc-accent);
 color: #111111;
 }
 html.public-layout-root .public-themed-page {
 background-image: radial-gradient(
  ellipse 120% 80% at 50% -20%,
  rgba(var(--pc-accent-r), var(--pc-accent-g), var(--pc-accent-b), 0.12),
  transparent
 );
 }
 html.public-layout-root .public-themed-card {
 border: 1px solid rgba(var(--pc-body-text-r), var(--pc-body-text-g), var(--pc-body-text-b), 0.1);
 box-shadow: 0 24px 48px -24px rgba(var(--pc-body-text-r), var(--pc-body-text-g), var(--pc-body-text-b), 0.16);
 }
 html.public-layout-root .public-menu-opening-popup-backdrop {
 background-color: rgba(var(--pc-body-text-r), var(--pc-body-text-g), var(--pc-body-text-b), 0.58);
 }
}