/* Restaurant-time clock, in 3D: a metal bezel, a domed glass face, hands that cast a shadow, and a
   small tilt towards the pointer (clock.js sets --qc-rx / --qc-ry). */
.q-clock { --qc-size: 76px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px; background: linear-gradient(160deg, #fff, #fbf5ec); border: 1px solid #e6dccd; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(28 23 20 / 8%), 0 14px 30px -18px rgb(28 23 20 / 60%); }
.q-clock__body { flex: none; display: block; width: var(--qc-size); height: var(--qc-size); perspective: 420px; }
.q-clock__face {
	display: block; width: 100%; height: 100%; border-radius: 50%;
	transform: rotateX(var(--qc-rx, 0deg)) rotateY(var(--qc-ry, 0deg)); transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .2, 1);
	/* Two shadows: a tight contact shadow and a soft one further down, so it sits above the page. */
	filter: drop-shadow(0 2px 2px rgb(60 25 8 / 35%)) drop-shadow(0 9px 12px rgb(60 25 8 / 28%));
}
.q-clock:hover .q-clock__face { transition-duration: .15s; }
.q-clock__face text { font: 700 9px/1 Georgia, serif; fill: #2a211c; text-anchor: middle; }
.q-clock__face .q-clock__emboss { fill: #fff; opacity: .85; }
.q-clock__major { stroke: #2a211c; stroke-width: 1.7; stroke-linecap: round; }
.q-clock__minor { stroke: #a8957f; stroke-width: .6; }
.q-clock__s line { stroke: #b5562f; stroke-width: 1; stroke-linecap: round; animation: q-clock-hue 6s linear infinite; }
.q-clock__s circle { fill: #b5562f; animation: q-clock-hue-fill 6s linear infinite; }
.q-clock__pin { stroke: rgb(90 36 16 / 60%); stroke-width: .5; }
.q-clock__glass { pointer-events: none; mix-blend-mode: screen; }
@keyframes q-clock-hue { 0%, 100% { stroke: #b5562f; } 33% { stroke: #c9a45c; } 66% { stroke: #5f7055; } }
@keyframes q-clock-hue-fill { 0%, 100% { fill: #b5562f; } 33% { fill: #c9a45c; } 66% { fill: #5f7055; } }
.q-clock__txt { display: grid; gap: 1px; line-height: 1.25; }
.q-clock__txt strong { font: 600 22px/1.1 Georgia, serif; color: #2a211c; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #fff; }
.q-clock__txt span { font-size: 12px; color: #50443c; }
.q-clock__tz { font-size: 11px !important; color: #93421f !important; font-weight: 600; letter-spacing: .02em; }
/* Moon phase: a small moon in the lower half of the face (under the hands) plus a text line. */
.q-clock__moon-dark { fill: #3b3a4a; }
.q-clock__moon-lit { fill: #fbf1d4; filter: drop-shadow(0 0 1.2px rgb(255 236 170 / 90%)); }
.q-clock__moon-rim { fill: none; stroke: rgb(42 33 28 / 35%); stroke-width: .5; }
.q-clock__moontxt { font-size: 11px !important; color: #5a5470 !important; letter-spacing: .01em; }
.q-clock__moontxt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8e0, #d9cfae); box-shadow: 0 0 4px rgb(255 236 170 / 80%); vertical-align: 0; }
@media (prefers-reduced-motion: reduce) {
	.q-clock__s line, .q-clock__s circle { animation: none; }
	.q-clock__face { transform: none !important; transition: none; }
}

/* Manjit's Dashboard header: compact; the date is already in the heading above. */
.q-clock--dash { --qc-size: 58px; padding: 6px 16px 6px 6px; }
.q-clock--dash .q-clock__txt strong { font-size: 20px; }
.q-clock--dash [data-date] { display: none; }

/* Dark panels (dashboard welcome, the account page): frosted glass, a deeper shadow under the clock. */
.q-clock--welcome { --qc-size: 68px; display: flex; width: fit-content; margin-top: 16px; padding: 8px 18px 8px 8px; background: linear-gradient(160deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 5%)); border-color: rgb(255 255 255 / 18%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 12px 28px -18px rgb(0 0 0 / 60%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.q-clock--welcome .q-clock__face, .q-clock--acct .q-clock__face { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 45%)) drop-shadow(0 10px 14px rgb(0 0 0 / 45%)); }
.q-clock--welcome .q-clock__txt strong { color: #fff; font-size: 24px; text-shadow: none; }
.q-clock--acct .q-clock__txt strong { text-shadow: none; }
.q-clock--welcome [data-date] { display: none; }
.q-clock--welcome .q-clock__tz { color: #f3d9a6 !important; }
.q-clock--welcome .q-clock__moontxt { color: #d9d3ee !important; }

/* The order page: a small pill so guests see the restaurant's time while they choose a time. */
.q-order__clock { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.q-clock--order { --qc-size: 46px; gap: 10px; padding: 5px 14px 5px 5px; }
.q-clock--order .q-clock__txt strong { font-size: 17px; }
.q-clock--order [data-date], .q-clock--order .q-clock__moontxt { display: none; }
.q-clock--order .q-clock__tz { font-size: 10.5px !important; }

/* The booking page: the same pill in the page header, under the title, so guests pick a time by the restaurant's clock. */
.q-ph__clock { display: flex; justify-content: center; margin-top: clamp(14px, 2.4vw, 22px); }
.q-clock--hero { --qc-size: 52px; gap: 12px; padding: 6px 16px 6px 6px; text-align: left; }
.q-clock--hero .q-clock__txt strong { font-size: 18px; }
.q-clock--hero [data-date], .q-clock--hero .q-clock__moontxt { display: none; }
.q-clock--hero .q-clock__tz { font-size: 10.5px !important; }