/* Floating Instagram + Feedback buttons and the quick feedback panel (views/_feedback_dock.php). */

.fb-dock { gap: 10px; font-family: Inter, system-ui, sans-serif; }

/* Feedback: a labelled pill, always visible. */
.fb-dock__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: #851c38; color: #fff; font: 800 14.5px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 10px 24px rgb(133 28 56 / 30%), 0 2px 4px rgb(0 0 0 / 10%); cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.fb-dock__btn:hover { background: #6d1530; transform: translateY(-1px); box-shadow: 0 14px 28px rgb(133 28 56 / 34%), 0 2px 4px rgb(0 0 0 / 10%); }
.fb-dock__btn:active { transform: translateY(0) scale(.98); }
.fb-dock__btn:focus-visible { outline: 3px solid #1d1b18; outline-offset: 3px; }
.fb-dock__btn svg { flex: none; }

/* Instagram: a small round brand button with a hover label. */
.fb-dock__ig { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 2px; border-radius: 50%; color: #fff; text-decoration: none; background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 8px 18px rgb(214 36 159 / 28%); transition: transform .15s ease; }
.fb-dock__ig:hover { transform: translateY(-1px) scale(1.05); }
.fb-dock__ig:focus-visible { outline: 3px solid #1d1b18; outline-offset: 3px; }
.fb-dock__tip { position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 10px; border-radius: 8px; background: #1d1b18; color: #fff; font: 700 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .15s ease, transform .15s ease; }
.fb-dock__ig:hover .fb-dock__tip, .fb-dock__ig:focus-visible .fb-dock__tip { opacity: 1; transform: translate(0, -50%); }

/* The panel: pops up above the button on desktop, a bottom sheet on phones. */
.fb { position: fixed; inset: auto max(16px, env(safe-area-inset-right)) 76px auto; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 100px); margin: 0; padding: 0; overflow-y: auto; border: 1px solid #ece6df; border-radius: 18px; background: #fff; color: #1d1b18; box-shadow: 0 24px 60px rgb(36 19 27 / 28%); font-family: Inter, system-ui, sans-serif; }
.fb[open] { animation: fb-rise .2s cubic-bezier(.23, 1, .32, 1); }
@keyframes fb-rise { from { transform: translateY(8px); opacity: 0; } }
.fb::backdrop { background: rgb(23 16 19 / 25%); }
.fb__form, .fb__thanks { display: grid; gap: 14px; padding: 18px; }
.fb__form[hidden], .fb__thanks[hidden] { display: none; }
.fb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fb h2 { margin: 0; font: 800 18px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #1d1b18; text-transform: none; }
.fb__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f5f2ed; color: #6b6557; font: 500 22px/1 Inter, sans-serif; cursor: pointer; }
.fb__x:hover { background: #ece7df; color: #1d1b18; }
.fb fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.fb__moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fb__mood { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border: 1.5px solid #ece6df; border-radius: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.fb__mood input, .fb__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fb__face { font-size: 26px; line-height: 1; filter: grayscale(.35); transition: filter .12s ease, transform .12s ease; }
.fb__mood-label { font-size: 11.5px; font-weight: 700; color: #6b6557; }
.fb__mood:hover { border-color: #d9cfc4; transform: translateY(-1px); }
.fb__mood:hover .fb__face { filter: none; }
.fb__mood:has(input:checked) { border-color: #851c38; background: #fbf1f4; }
.fb__mood:has(input:checked) .fb__face { filter: none; transform: scale(1.12); }
.fb__mood:has(input:checked) .fb__mood-label { color: #851c38; }
.fb__mood:has(input:focus-visible), .fb__chip:has(input:focus-visible) { outline: 3px solid #1d1b18; outline-offset: 2px; }

.fb__topics legend { margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: #1d1b18; }
.fb__topics small { font-weight: 500; color: #8a8377; }
.fb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb__chip { position: relative; }
.fb__chip span { display: inline-block; padding: 7px 12px; border: 1.5px solid #ece6df; border-radius: 999px; font-size: 13px; font-weight: 700; color: #4a4540; transition: border-color .12s ease, background .12s ease; }
.fb__chip:hover span { border-color: #d9cfc4; }
.fb__chip:has(input:checked) span { border-color: #851c38; background: #851c38; color: #fff; }

.fb__note textarea { display: block; width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1.5px solid #ece6df; border-radius: 12px; background: #fcfbf9; color: #1d1b18; font: 14px/1.45 Inter, system-ui, sans-serif; }
.fb__note textarea:focus { outline: none; border-color: #851c38; background: #fff; box-shadow: 0 0 0 3px rgb(133 28 56 / 12%); }
.fb__status { min-height: 0; margin: -6px 0; font-size: 13px; color: #6b6557; }
.fb__status:empty { display: none; }
.fb__status.is-error { color: #b42332; font-weight: 600; }
.fb__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fb__page { min-width: 0; font-size: 12.5px; color: #8a8377; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb__page b { color: #4a4540; font-weight: 700; }
.fb__send { padding: 11px 22px; border: 0; border-radius: 10px; background: #851c38; color: #fff; font: 800 14px Inter, system-ui, sans-serif; cursor: pointer; transition: background .15s ease; }
.fb__send:hover:not(:disabled) { background: #6d1530; }
.fb__send:disabled { background: #e7e1da; color: #9a9389; cursor: not-allowed; }
.fb__ghost { padding: 11px 18px; border: 1.5px solid #ece6df; border-radius: 10px; background: #fff; color: #1d1b18; font: 700 14px Inter, system-ui, sans-serif; cursor: pointer; }
.fb__ghost:hover { background: #f5f2ed; }
.fb__send:focus-visible, .fb__ghost:focus-visible, .fb__x:focus-visible { outline: 3px solid #1d1b18; outline-offset: 2px; }

.fb__thanks { justify-items: center; padding: 26px 20px 20px; text-align: center; }
.fb__thanks-face { font-size: 38px; line-height: 1; }
.fb__thanks p { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: #6b6557; }
.fb__thanks-btns { display: flex; gap: 8px; }
.fb__ig-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #f0ece5; width: 100%; justify-content: center; font-size: 13px; font-weight: 700; color: #b0247a; text-decoration: none; }
.fb__ig-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.fb-dock { gap: 8px; }
	.fb-dock__btn { height: 40px; padding: 0 14px 0 12px; font-size: 13.5px; }
	.fb-dock__ig { width: 36px; height: 36px; }
	.fb-dock__tip { display: none; }
	.fb { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
	.fb[open] { animation-name: fb-sheet; }
	@keyframes fb-sheet { from { transform: translateY(40px); opacity: 0; } }
	.fb__form, .fb__thanks { padding: 18px 16px 20px; }
	.fb__face { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .fb[open], .fb-dock__btn, .fb-dock__ig { animation: none; transition: none; } }

/* Hidden on the first screen; site-feedback.js removes is-waiting on scroll.
   Uses translate (not transform) so it never clashes with the phone tuck. */
.fb-dock { transition: opacity .25s ease, translate .25s ease, transform .2s ease, visibility .25s; }
.fb-dock.is-waiting { opacity: 0; translate: 0 16px; visibility: hidden; pointer-events: none; }