/* ==========================================================================
   English site — floating "Book a Unit" button + quick enquiry dialog
   Mirrors the Chinese site's breathing reservation button, rebuilt with
   native CSS (the English site does not load jQuery / magnific-popup).
   ========================================================================== */

/* ---------- floating breathing button ---------- */
.yy-book-fab {
  position: fixed;
  right: 18px;
  bottom: 110px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 236px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #F5853F 0%, #E96E18 100%);
  box-shadow: 0 12px 30px rgba(233, 110, 24, .38), 0 2px 6px rgba(0, 0, 0, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.yy-book-fab:hover, .yy-book-fab:focus-visible {
  transform: translateX(-4px);
  box-shadow: 0 16px 38px rgba(233, 110, 24, .48), 0 2px 8px rgba(0, 0, 0, .1);
  outline: none;
}
.yy-book-fab:focus-visible { box-shadow: 0 0 0 3px rgba(62, 177, 52, .55), 0 16px 38px rgba(233, 110, 24, .4); }

.yy-fab-ic {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
}
.yy-fab-ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yy-fab-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.yy-fab-body strong { font-size: 18.5px; font-weight: 750; letter-spacing: .2px; white-space: nowrap; }
.yy-fab-body small { font-size: 14px; opacity: .94; margin-top: 3px; white-space: nowrap; }
.yy-fab-arrow { margin-left: auto; font-size: 23px; line-height: 1; opacity: .85; }

/* breathing halo */
.yy-fab-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #FFD580;
  border: 2px solid #fff;
  animation: yyFabPulse 2s infinite;
}
@keyframes yyFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 213, 128, .9); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 213, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 213, 128, 0); }
}

/* ---------- quick enquiry dialog ---------- */
.yy-modal[hidden] { display: none !important; }
.yy-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.yy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 28, 17, .62);
  backdrop-filter: blur(3px);
  animation: yyFade .2s ease both;
}
.yy-modal-card {
  position: relative;
  box-sizing: border-box;
  width: min(460px, 100%);
  max-width: calc(100vw - 24px);
  min-width: 0;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 26px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(9, 28, 17, .35);
  animation: yyRise .25s ease both;
}
@keyframes yyFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yyRise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.yy-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--sand-2);
  color: var(--ink);
  font-size: 25.5px;
  line-height: 1;
  cursor: pointer;
}
.yy-modal-close:hover { background: #E1E9D8; }
.yy-modal-close:focus-visible { outline: 3px solid rgba(62, 177, 52, .5); outline-offset: 2px; }

.yy-modal-title { margin: 0 34px 6px 0; font-size: 1.656rem; line-height: 1.25; color: var(--ink); }
.yy-modal-sub { margin: 0 0 16px; font-size: 1.062rem; line-height: 1.55; color: var(--body); }

.yy-qf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; width: 100%; min-width: 0; }
.yy-qf-field { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.yy-qf-field label { font-size: 1rem; font-weight: 650; color: var(--ink); }
.yy-qf-field .req { color: var(--orange); }
.yy-qf-field input, .yy-qf-field select, .yy-qf-field textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1.062rem;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.yy-qf-field input:focus, .yy-qf-field select:focus, .yy-qf-field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 125, 70, .12);
}
.yy-qf-field textarea { min-height: 64px; resize: vertical; }
.yy-qf-submit {
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--green-700);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.062rem;
  cursor: pointer;
  transition: background .18s ease;
}
.yy-qf-submit:hover { background: var(--green-800); }
.yy-qf-submit:disabled { opacity: .65; cursor: default; }
.yy-qf-note { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.yy-qf-msg { margin: 12px 0 0; font-size: 1.062rem; font-weight: 600; }
.yy-qf-msg.is-err { color: #B23B2E; }
.yy-qf-msg.is-ok { color: var(--green-700); }
.yy-qf-done {
  padding: 20px;
  border-radius: 12px;
  background: var(--lime-soft);
  color: var(--ink);
  font-size: 1.062rem;
  line-height: 1.6;
}
.yy-qf-done strong { display: block; margin-bottom: 6px; font-size: 1.156rem; }
.yy-qf-done button {
  margin-top: 14px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--green-700);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

@media (max-width: 820px) {
  .yy-book-fab {
    bottom: 76px;
    left: 12px;
    right: auto;
    width: auto;
    padding: 10px 14px;
    border-radius: 14px;
    gap: 8px;
  }
  .yy-book-fab:hover, .yy-book-fab:focus-visible { transform: translateY(-2px); }
  .yy-fab-ic { flex-basis: 30px; width: 30px; height: 30px; }
  .yy-fab-ic svg { width: 17px; height: 17px; }
  .yy-fab-body strong { font-size: 17px; }
  .yy-fab-body small, .yy-fab-arrow { display: none; }
  .yy-modal { padding: 12px; }
  .yy-modal-card { padding: 22px 20px 20px; max-height: 92dvh; }
  .yy-qf-grid { gap: 9px; }
  .yy-qf-field textarea { min-height: 56px; }
  .yy-modal-sub { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .yy-fab-dot { animation: none; }
  .yy-modal-backdrop, .yy-modal-card { animation: none; }
  .yy-book-fab { transition: none; }
}