/* PetoFast Lost & Found — matches the PetoFast theme, works with any theme */
.pflf { --o: #ff7a1a; --od: #e5620a; --t: #0f8a7e; --red: #e11d48; --ink: #2b2118; --mut: #7a6a5c; --line: #f0e2cf; --cream: #fff8ee; color: var(--ink); font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 0 0 50px; overflow-x: clip; }
.pflf *, .pflf *::before, .pflf *::after { box-sizing: border-box; }
.pflf h1, .pflf h2 { font-family: "Baloo 2", "Nunito", sans-serif; line-height: 1.15; color: var(--ink); }
.lf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; overflow-wrap: anywhere; }
.lf-narrow { max-width: 760px; }
.lf-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px; margin: 16px 0; }
.lf-card h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 12px; }
.lf-card h2 > span:first-child:not([data-lf-where]) { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--o); color: #fff; display: grid; place-items: center; font-size: 15px; }
.lf-center { text-align: center; }
.lf-back { display: inline-block; margin: 16px 0 6px; font-weight: 800; color: var(--mut); text-decoration: none; }
.lf-h1 { font-size: clamp(28px, 5vw, 40px); margin: 4px 0 6px; }
.lf-sub, .lf-hint { color: var(--mut); margin: 0 0 10px; font-size: 15px; }
.lf-hint { font-size: 13.5px; }
.lf-kicker { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 13px; color: var(--od); }
.lf-hp { position: absolute !important; left: -9999px !important; }

/* Buttons */
.lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--o); color: #fff !important; font: 800 15px "Nunito", sans-serif; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; }
.lf-btn:hover { background: var(--od); }
.lf-btn:disabled { opacity: .6; cursor: default; }
.lf-btn-lost { background: var(--red); } .lf-btn-lost:hover { background: #be123c; }
.lf-btn-found { background: var(--t); } .lf-btn-found:hover { background: #0b6e65; }
.lf-btn-ghost { background: #fff; color: var(--ink) !important; border: 2px solid var(--line); }
.lf-btn-ghost:hover { background: var(--cream); border-color: var(--o); }
.lf-btn-wa { background: #25d366; } .lf-btn-wa:hover { background: #1fb457; }
.lf-btn-sm { padding: 9px 14px; font-size: 14px; }
.lf-btn-big { width: 100%; padding: 16px; font-size: 17px; }

/* Hub */
.lf-hero { background: linear-gradient(135deg, #fff1df, #ffe1ea); padding: 34px 0 30px; margin-bottom: 8px; }
.lf-hero h1 { font-size: clamp(32px, 6vw, 52px); margin: 12px 0 8px; }
.lf-hero p { max-width: 640px; color: #5c4b3b; font-size: 17px; margin: 0 0 18px; }
.lf-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 18px 0 0; font-weight: 700; color: #5c4b3b; }
.lf-stats b { font: 800 22px "Baloo 2", sans-serif; color: var(--ink); }
.lf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; }
.lf-tabs { display: inline-flex; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 3px; }
.lf-tabs a { padding: 7px 16px; border-radius: 999px; font-weight: 800; text-decoration: none; color: var(--ink); }
.lf-tabs a.is-on { background: var(--ink); color: #fff; }
.lf-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.lf-chips::-webkit-scrollbar { display: none; }
.lf-chips a { flex: none; padding: 7px 12px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink); }
.lf-chips a.is-on { border-color: var(--o); background: #fff1df; }
.lf-city select { padding: 8px 12px; border: 2px solid var(--line); border-radius: 999px; font: 700 14px "Nunito", sans-serif; background: #fff; }
.lf-maptoggle { margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: 800 14px "Nunito", sans-serif; cursor: pointer; }
.lf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lf-rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.lf-rcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(120, 60, 0, .1); color: var(--ink); }
.lf-rphoto { position: relative; display: block; aspect-ratio: 1; background: var(--cream); }
.lf-rphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-noimg { display: grid; place-items: center; height: 100%; font-size: 60px; }
.lf-tag { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 8px; color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .5px; }
.lf-tag-big { position: static; display: inline-block; font-size: 14px; padding: 5px 12px; }
.lf-reward { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 8px; background: #fff4d6; color: #8a5a00; font-weight: 800; font-size: 12px; }
.lf-rbody { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.lf-rbody b { font-size: 15px; line-height: 1.25; }
.lf-rbody small { color: var(--mut); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-pages { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }
.lf-empty span { font-size: 48px; }
.lf-alerts { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; background: linear-gradient(135deg, #effbf9, #fff); }
.lf-how ol { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 0; }
.lf-how li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.lf-how li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--o); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 4px; }
.lf-how li span { color: var(--mut); font-size: 14px; }
.lf-safety { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff4d6; color: #7a4b00; font-size: 14px; font-weight: 600; }

/* Forms */
.lf-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 800; font-size: 14px; margin-bottom: 12px; min-width: 0; }
.lf-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .lf-form select, .lf-form textarea { width: 100%; max-width: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 11px 12px; font: 600 16px "Nunito", sans-serif; color: var(--ink); background: #fff; }
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus { outline: none; border-color: var(--o); }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-label { font-weight: 800; font-size: 14px; margin: 4px 0 6px; }
.lf-phone { display: flex; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.lf-phone:focus-within { border-color: var(--o); }
.lf-phone em { font-style: normal; display: grid; place-items: center; padding: 0 10px; background: var(--cream); color: var(--mut); font-weight: 800; }
.lf-phone input { border: 0 !important; border-radius: 0 !important; }
.lf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.lf-seg label, .lf-pick label { margin: 0; cursor: pointer; }
.lf-seg input, .lf-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lf-seg span { display: block; text-align: center; padding: 14px 10px; border: 2px solid var(--line); border-radius: 14px; font-weight: 800; }
.lf-seg input:checked + span { border-color: var(--o); background: #fff1df; }
.lf-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lf-pick span { display: inline-block; padding: 9px 14px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 14px; background: #fff; }
.lf-pick-sm span { padding: 7px 12px; font-size: 13.5px; }
.lf-pick input:checked + span { border-color: var(--o); background: #fff1df; }
.lf-pick input:focus-visible + span, .lf-seg input:focus-visible + span { outline: 2px solid var(--o); outline-offset: 2px; }
.lf-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-addphoto, .lf-ph { width: 104px; height: 104px; border-radius: 16px; margin: 0 !important; }
.lf-addphoto span { width: 100%; height: 100%; border: 2px dashed #ffc9a0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 26px; background: #fff8f0; cursor: pointer; }
.lf-addphoto b { font-size: 12px; }
.lf-ph { position: relative; overflow: hidden; background: var(--cream); display: grid; place-items: center; }
.lf-ph img { width: 100%; height: 100%; object-fit: cover; }
.lf-ph button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.lf-spin { width: 26px; height: 26px; border: 3px solid #ffd2a8; border-top-color: var(--o); border-radius: 50%; animation: lfspin 1s linear infinite; }
@keyframes lfspin { to { transform: rotate(360deg); } }
.lf-map { height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin: 10px 0; z-index: 0; position: relative; }
.lf-hubmap { height: 420px; }
.lf-pickmap-sm { height: 220px; }
.lf-submit { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 248, 238, 0), var(--cream) 30%); z-index: 5; }
.lf-msg { margin: 8px 0 0; font-weight: 700; font-size: 14px; }
.lf-msg:empty { display: none; }
.lf-msg.is-err { color: #c2410c; } .lf-msg.is-ok { color: var(--t); }
.lf-check { width: 70px; height: 70px; margin: 0 auto 8px; border-radius: 50%; background: var(--t); color: #fff; display: grid; place-items: center; font-size: 36px; font-weight: 900; }
.lf-private { background: var(--cream); border-radius: 14px; padding: 12px; font-size: 14px; word-break: break-all; }
.lf-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Single */
.lf-banner { margin: 10px 0; padding: 12px 16px; border-radius: 14px; background: #fff4d6; font-weight: 700; }
.lf-banner-ok { background: #dcfce7; color: #166534; }
.lf-single-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 10px; align-items: start; }
.lf-gmain { border-radius: 22px; overflow: hidden; background: var(--cream); aspect-ratio: 1; }
.lf-gmain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-noimg-big { display: grid; place-items: center; font-size: 120px; }
.lf-gthumbs { display: flex; gap: 8px; margin-top: 8px; }
.lf-gthumbs button { width: 70px; height: 70px; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: none; }
.lf-gthumbs img { width: 100%; height: 100%; object-fit: cover; }
.lf-info h1 { font-size: clamp(26px, 4vw, 36px); margin: 10px 0 6px; }
.lf-meta { margin: 0 0 4px; color: #5c4b3b; font-weight: 700; }
.lf-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.lf-dl { display: grid; gap: 0; margin: 12px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.lf-dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.lf-dl div:first-child { border-top: 0; }
.lf-dl dt { color: var(--mut); font-weight: 700; margin: 0; }
.lf-dl dd { margin: 0; font-weight: 700; }
.lf-desc { line-height: 1.6; }
.lf-ai { background: #ede9fe; color: #4c1d95; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.lf-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lf-sightings { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.lf-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(43, 33, 24, .5); display: flex; align-items: flex-end; justify-content: center; }
.lf-modal[hidden] { display: none; }
.lf-sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
.lf-sheet h2 { font-size: 22px; margin: 0 40px 10px 0; }
.lf-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--cream); font-size: 16px; cursor: pointer; }
body.lf-noscroll { overflow: hidden; }

/* Manage */
.lf-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lf-match { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; }
.lf-match.is-yes { border-color: #86efac; background: #f0fdf4; }
.lf-match-img { width: 76px; height: 76px; flex: none; border-radius: 12px; overflow: hidden; background: var(--cream); display: grid; place-items: center; font-size: 30px; }
.lf-match-img img { width: 100%; height: 100%; object-fit: cover; }
.lf-match-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lf-match-body small { color: var(--mut); }
.lf-match-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lf-ok { color: #166534; font-weight: 800; }

@media (min-width: 700px) { .lf-modal { align-items: center; } .lf-sheet { border-radius: 24px; } }
@media (max-width: 1024px) { .lf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf-how ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 782px) {
	.lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.lf-single-grid, .lf-alerts { grid-template-columns: 1fr; }
	.lf-row { grid-template-columns: 1fr; gap: 0; }
	.lf-hero-actions .lf-btn { flex: 1 1 100%; }
	.lf-maptoggle { margin-left: 0; }
	.lf-how ol { grid-template-columns: 1fr; }
	.lf-dl div { grid-template-columns: 90px 1fr; }
	.lf-hubmap { height: 340px; }
	body:has(.pf-tabbar) .lf-submit { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .lf-spin { animation: none; } .lf-rcard { transition: none; } }
.pflf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lf-phone em { flex: none; white-space: nowrap; }

/* Phase 3: QR tags, Lost mode, reward & payment warnings */
.lf-linkbtn { border: 0; background: none; padding: 0; color: var(--od); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.lf-red { color: #be123c !important; }
.lf-rewardbox { display: flex; flex-direction: column; gap: 2px; margin: 12px auto; padding: 12px 16px; border-radius: 14px; background: #fff4d6; color: #7a4b00; max-width: 420px; }
.lf-rewardbox b { font-size: 18px; }
.lf-rewardbox small { font-weight: 600; }
.lf-rewardbox-left { margin: 12px 0; text-align: left; }
.lf-tagbig { font-size: 64px; }
.lf-tagcard { padding: 26px 18px; }
.lf-tagcard.is-lost { border: 3px solid var(--red); }
.lf-lostbar { margin: -26px -18px 18px; padding: 12px; background: var(--red); color: #fff; font-weight: 900; border-radius: 19px 19px 0 0; }
.lf-tagphoto { width: 170px; height: 170px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 0 3px #ffd2a8; background: var(--cream); display: grid; place-items: center; font-size: 80px; }
.lf-tagphoto img { width: 100%; height: 100%; object-fit: cover; }
.lf-note { background: #ede9fe; color: #4c1d95; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.lf-scan { margin-top: 14px; text-align: left; }
.lf-more { margin-top: 12px; }
.lf-more summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.lf-petrow.is-lost { border: 2px solid var(--red); }
.lf-pethead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lf-pethead h2 { margin: 0 !important; font-size: 22px; }
.lf-pethead small { color: var(--mut); font-weight: 700; }
.lf-petava { width: 60px; height: 60px; flex: none; border-radius: 50%; overflow: hidden; background: var(--cream); display: grid; place-items: center; font-size: 30px; }
.lf-petava img { width: 100%; height: 100%; object-fit: cover; }
.lf-actions-left { justify-content: flex-start; }
.lf-lostform { margin-top: 14px; padding: 16px; border-radius: 16px; background: #fff1f2; }
.lf-lostform h3 { margin: 0 0 6px; font-family: "Baloo 2", "Nunito", sans-serif; }
.lf-scans { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; font-size: 14px; }
.lf-tagbox { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.lf-petrow .lf-btn-big { white-space: normal; }
.lf-btn-quiet { color: var(--mut) !important; font-weight: 700; }
.lf-btn-quiet:hover { color: #be123c !important; border-color: #fecdd3; }