/* Theme front-end fixes layered on top of the original styles.
   Kept separate so the ported original CSS stays pristine. Loaded last. */

/* Branded text selection */
::selection      { background: var(--marsala, #895961); color: #fff; }
::-moz-selection { background: var(--marsala, #895961); color: #fff; }

/* Keep anchor targets clear of the fixed header */
#app, #contacts, [id] { scroll-margin-top: var(--header-h, 90px); }

/* Required-field marker */
.req { color: var(--marsala, #895961); font-weight: 700; }

/* Never let mobile inputs trigger iOS focus-zoom (needs >= 16px) */
@media (max-width: 768px) {
  .config-field-input,
  .cbm-input,
  .contacts-field-input,
  .wpcf7-form input,
  .wpcf7-form textarea,
  .wpcf7-form select { font-size: 16px; }
}

/* Lock background scroll while a popup/menu is open */
body.no-scroll { overflow: hidden !important; }

/* In-flight submit button state (double-submit guard) */
.btn-next[disabled],
.wpcf7-form.submitting .wpcf7-submit { opacity: 0.6; pointer-events: none; cursor: progress; }

/* CF7 wraps [submit] in <p class="your-submit"> — kill its default browser margin */
.wpcf7-form p.your-submit { margin: 0 0 6px; }

/* CF7 spinner sits inline after the submit button and takes up 24px height even when hidden —
   pull it out of flow so it doesn't push the disclaimer down */
.wpcf7-spinner { position: absolute; margin: 0; }

/* ─── QUOTE FLOATING BUTTON (FAB) ─────────────────────────────────
   Fixed bottom-right on every page. Hidden on the configurator overlay
   (html.config-open) and while any other popup/menu is open.
   The wrapper is the fixed anchor + entrance host; the button clips its own
   label, while the ripple waves live in the (un-clipped) wrapper. */
.qfb-wrap {
  --qfb-size: clamp(56px, 4.06vw, 64px);   /* single source → always a circle */
  position: fixed;
  right: clamp(18px, 1.667vw, 48px);
  bottom: calc(var(--footer-h, 88px) + clamp(16px, 1.25vw, 24px));
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;               /* pill grows leftwards on hover */
  /* entrance: rise + fade in once, after a short beat */
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  animation: qfb-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
@keyframes qfb-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Expanding ripple waves — grow out of the circle and fade (like vibration) */
.qfb-waves {
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--qfb-size);
  height: var(--qfb-size);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;   /* fades out smoothly on hover */
}
.qfb-waves i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--marsala, #895961);
  opacity: 0;
  animation: qfb-wave 2.6s ease-out infinite;
}
.qfb-waves i:nth-child(2) { animation-delay: 0.87s; }
.qfb-waves i:nth-child(3) { animation-delay: 1.74s; }
@keyframes qfb-wave {
  0%   { transform: scale(0.92); opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

.qfb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--qfb-size);
  max-width: var(--qfb-size);
  padding: 0;
  /* Marsala reads clearly on every block (sandstone / porcelain / graphite /
     white) — graphite alone blended into the dark sections. */
  background: var(--marsala, #895961);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(42, 44, 43, 0.32), 0 2px 6px rgba(42, 44, 43, 0.24);
  transition: max-width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.35s ease,
              box-shadow 0.45s ease,
              transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: max-width;
}

/* Icon — fixed square that keeps the circle centred while collapsed */
.qfb-ico {
  flex: 0 0 auto;
  width: var(--qfb-size);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qfb-ico svg {
  display: block;
  transform-origin: 50% 62%;
  animation: qfb-shake 2.6s ease-in-out 1.6s infinite;
}
/* Ringing-handset wiggle — rotates only the icon, never the circle */
@keyframes qfb-shake {
  0%, 55%, 100% { transform: rotate(0); }
  58% { transform: rotate(-15deg); }
  62% { transform: rotate(13deg); }
  66% { transform: rotate(-11deg); }
  70% { transform: rotate(9deg); }
  74% { transform: rotate(-6deg); }
  78% { transform: rotate(4deg); }
  82% { transform: rotate(-2deg); }
  86% { transform: rotate(0); }
}

/* Label — revealed on hover/focus (desktop) by expanding the pill */
.qfb-label {
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(13px, 0.833vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-right: clamp(18px, 1.4vw, 26px);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s ease 0.14s, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}

/* Hover / focus / keyboard → expand to a pill and reveal the label */
@media (hover: hover) and (pointer: fine) {
  .qfb:hover,
  .qfb:focus-visible {
    max-width: 340px;
    background: var(--graphite, #3F4443);
    box-shadow: 0 14px 38px rgba(42, 44, 43, 0.4);
    transform: translateY(-3px);
  }
  .qfb:hover .qfb-label,
  .qfb:focus-visible .qfb-label { opacity: 1; transform: translateX(0); }
  /* smoothly fade the ripples out (not freeze them) while the pill is open */
  .qfb-wrap:hover .qfb-waves,
  .qfb-wrap:focus-within .qfb-waves { opacity: 0; }
  /* steady the handset while the pill is open */
  .qfb-wrap:hover .qfb-ico svg,
  .qfb-wrap:focus-within .qfb-ico svg { animation: none; transform: rotate(0); }
}
.qfb:active { transform: translateY(-1px) scale(0.97); }

/* Hide the FAB on the configurator overlay and while other popups are open */
html.config-open .qfb-wrap,
body.no-scroll .qfb-wrap,
body.qfb-lock .qfb-wrap { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 768px) {
  .qfb-wrap {
    --qfb-size: 58px;
    right: 16px;
    bottom: 16px;
  }
  .qfb-label { display: none; }        /* icon-only on phones */
}
@media (prefers-reduced-motion: reduce) {
  .qfb-wrap { animation: none; opacity: 1; transform: none; }
  .qfb-waves i { animation: none; opacity: 0; }
  .qfb-ico svg { animation: none; }
}

/* ─── QUOTE POPUP (mirrors the callback modal, single phone field) ── */
.qfb-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 940;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.qfb-modal.qfb--open { pointer-events: auto; visibility: visible; }

.qfb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(63, 68, 67, 0.7);
  opacity: 0;
}
.qfb-modal.qfb--open    .qfb-overlay { animation: cbm-fade-in  0.35s ease forwards; }
.qfb-modal.qfb--closing .qfb-overlay { animation: cbm-fade-out 0.3s  ease forwards; }

.qfb-box {
  position: relative;
  z-index: 1;
  width: min(535px, calc(100vw - 40px));
  background: var(--sandstone, #C3AD8B);
  padding: clamp(32px, 2.92vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
  transform: translateY(100%);
}
.qfb-modal.qfb--open    .qfb-box { animation: cbm-box-in  0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.qfb-modal.qfb--closing .qfb-box { animation: cbm-box-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards; }

.qfb-close {
  position: absolute;
  top: 16px;
  right: 15.5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--graphite, #3F4443);
}
.qfb-close svg { display: block; }

.qfb-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.08vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--graphite, #3F4443);
  margin: 0;
  padding-right: 46px;   /* clear the close (✕) button in the top-right corner */
}
.qfb-form { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); }
.qfb-fields { display: flex; flex-direction: column; }
.qfb-submit-wrap { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 768px) {
  .qfb-box { padding: clamp(28px, 8vw, 40px) clamp(20px, 6vw, 32px); }
  .qfb-heading { font-size: clamp(22px, 6.5vw, 30px); }
}
/* ── Повзунки стилю (userSliders з редактора стилів) ────────── */
.style-sliders { margin-top: 12px; display: grid; gap: 10px; }
.style-slider { background: #fff; border: 1px solid #E2E4E3; border-radius: 10px; padding: 10px 14px; }
.style-slider-head { display: flex; justify-content: space-between; font-size: 13px; color: #3F4443; margin-bottom: 6px; }
.style-slider-val { font-weight: 600; }
.style-slider input[type="range"] { width: 100%; accent-color: #895961; }

/* ── Кнопки +/− розмірів: заблоковані на межі діапазону ─────── */
.dim-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ── Стрілки гортання фото у лайтбоксі ──────────────────────── */
.yw-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: none; border-radius: 10px;
  color: #fff; font-size: 46px; line-height: 1; padding: 0 0 6px;
  cursor: pointer; opacity: 0.75; user-select: none; z-index: 2;
  transition: opacity .15s, background .15s;
}
.yw-lb-nav:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.yw-lb-nav--prev { left: 18px; }
.yw-lb-nav--next { right: 18px; }
@media (max-width: 768px) {
  .yw-lb-nav { width: 42px; height: 64px; font-size: 34px; border-radius: 8px; }
  .yw-lb-nav--prev { left: 8px; }
  .yw-lb-nav--next { right: 8px; }
}