/* pageSTAY+ brand details, inspired by the original pagesolution P and its glass 24 lens. */
:root {
  --ps-lens-surface: radial-gradient(circle at 29% 17%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,.84) 28%, rgba(229,230,226,.81) 56%, rgba(164,166,161,.68) 100%);
  --ps-lens-edge: rgba(255,255,255,.93);
  --ps-lens-shadow: inset 0 1px 2px rgba(255,255,255,.98), inset 0 -3px 6px rgba(51,54,52,.19), 0 2px 0 rgba(98,97,91,.2), 0 7px 16px rgba(20,20,18,.19);
}

/* Source attributes are also changed in the site markup; content provides a fallback for older pages. */
:is(.brand-icon,.admin-brand img,.admin-entry-brand img) {
  content: url("assets/brand/p-3d.webp");
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 3px 2px rgba(32,26,0,.19));
}
.site-header .brand-icon { width: 34px; height: 42px; }
.brand-footer .brand-icon { width: 39px; height: 47px; }
.admin-brand img { width: 32px; height: 38px; }
.admin-entry-brand img { width: 32px; height: 38px; }

/* The small numbered discs echo the silver lens around the original 24. */
:is(.hs-three b,.process-number,.process-step > span,.service-step > span,.story-no,.dark-story > span) {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid var(--ps-lens-edge);
  border-radius: 50%;
  background: var(--ps-lens-surface);
  box-shadow: var(--ps-lens-shadow);
  color: #272820;
  font: 750 12px/1 Inter,Arial,sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 1px rgba(255,255,255,.8);
  vertical-align: middle;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:is(.hs-three b,.process-number,.process-step > span,.service-step > span,.story-no,.dark-story > span)::before {
  content: "";
  position: absolute;
  inset: 3px 5px auto;
  height: 36%;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  pointer-events: none;
}
:is(.hs-three b,.process-number,.process-step > span,.service-step > span,.story-no,.dark-story > span)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 2px rgba(255,255,255,.86);
  pointer-events: none;
}

.hs-three a { grid-template-columns: 45px minmax(0,1fr); column-gap: 11px; }
.hs-three b { width: 39px; height: 39px; margin-top: 0; align-self: center; grid-row: 1/3; }
.process-number.process-number { width: 58px; height: 58px; font-size: 17px; }
.process-step > span { margin-bottom: 3px; }
.service-step { grid-template-columns: 48px minmax(0,1fr); gap: 16px; }
.service-step > span { width: 43px; height: 43px; }
.story-no,.dark-story > span { width: 42px; height: 42px; }

/* The longer labels keep their complete wording inside a softly lit glass capsule. */
:is(.workflow-card .num,.system-flow .num,.detail-card > span,.booking-benefits article > span,.pp-promise-grid article > span,.cf-step,.admin-entry-options > a > span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: fit-content;
  min-height: 33px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background: var(--ps-lens-surface);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 4px rgba(50,52,50,.12), 0 4px 11px rgba(20,20,18,.11);
  color: #484338;
  font-weight: 750;
  line-height: 1.2;
  text-shadow: 0 1px rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.detail-card > span,.booking-benefits article > span,.pp-promise-grid article > span,.cf-step,.admin-entry-options > a > span { font-size: 10px; }
.workflow-card .num,.system-flow .num { font-size: 11px; }

/* In the five-step booking walkthrough, the number is part of the button text node. */
.bj-steps button { font-size: 0; }
.bj-steps button span { font-size: 12px; }
.bj-steps button::before {
  content: "01";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ps-lens-edge);
  border-radius: 50%;
  background: var(--ps-lens-surface);
  box-shadow: var(--ps-lens-shadow);
  color: #292a24;
  font: 750 10px/1 Inter,Arial,sans-serif;
  text-shadow: 0 1px rgba(255,255,255,.8);
}
.bj-steps button:nth-child(2)::before { content: "02"; }
.bj-steps button:nth-child(3)::before { content: "03"; }
.bj-steps button:nth-child(4)::before { content: "04"; }
.bj-steps button:nth-child(5)::before { content: "05"; }

/* A little curved highlight gives the rounded controls the same glass glint. */
:is(a.btn,button.btn,.header-cta,.admin-button,.bj-controls button) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:is(a.btn,button.btn,.header-cta,.admin-button,.bj-controls button)::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 13px;
  width: 27px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.68);
  border-bottom-color: transparent;
  border-radius: 50%;
  background: linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,0) 65%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.5), 0 0 8px rgba(255,255,255,.13);
  opacity: .7;
  transform: rotate(-22deg);
  pointer-events: none;
  transition: opacity .2s ease,transform .2s ease;
}
:is(a.btn,button.btn,.header-cta,.admin-button,.bj-controls button):hover::after,
:is(a.btn,button.btn,.header-cta,.admin-button,.bj-controls button):focus-visible::after {
  opacity: .93;
  transform: rotate(-16deg) translateY(2px);
}

@media (max-width: 720px) {
  .hs-three a { grid-template-columns: 42px minmax(0,1fr); }
  .process-number.process-number { width: 50px; height: 50px; font-size: 15px; }
  .bj-steps button::before { width: 28px; height: 28px; }
}
@media (max-width: 390px) {
  .hs-three b { width: 35px; height: 35px; }
  .bj-steps button { padding-inline: 3px; }
  .bj-steps button::before { width: 25px; height: 25px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(a.btn,button.btn,.header-cta,.admin-button,.bj-controls button)::after { transition: none; }
}