/* ── Secondhander – transition loader ──────────────────────────────────────
   The overlay is drawn by html.ub-loading::after, so it can appear before the
   page body exists (no flash between pages). Controlled by js/core/app-loader.js
────────────────────────────────────────────────────────────────────────── */
html.ub-loading::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(250, 250, 250, 0.82);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: progress;
    animation: ub-loader-in 0.15s ease-out both;
}
/* the arrow-and-book logo, turning clockwise */
html.ub-loading::before {
    content: "";
    position: fixed;
    left: 50%; top: 50%;
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
    transform-origin: 50% 50%;
    z-index: 2147483001;
    background: url("../assets/loader/loader.svg") center / contain no-repeat;
    animation: ub-spin 1.1s linear infinite;
    pointer-events: none;
}
html.ub-loading-out::after { animation: ub-loader-out 0.2s ease-in both; pointer-events: none; }
html.ub-loading-out::before { opacity: 0; transition: opacity .2s ease-in; }
@keyframes ub-loader-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ub-loader-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ub-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.ub-loading::before { animation-duration: 3s; } }

/* ── In-page "waiting for data" card (shown instead of an empty state) ───── */
.loading-card {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.loading-card img { width: 44px; height: 44px; display: block; transform-origin: 50% 50%; animation: ub-spin 1.1s linear infinite; }
.loading-card p   { margin: 0; font-size: 0.8rem; color: #666; }

/* home feed: same slot / shape as the empty-state card */
#feedLoading {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(100% - 6px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 5;
}
body:has(#feedLoading[style*="flex"]) .swipe-container { visibility: hidden; }
.main-container-cards:has(#feedLoading[style*="flex"]) .basecard-container { display: none; }

/* lost & found + notifications: sits in the page flow like the empty cards */
.lf-loading, .notif-loading {
    margin: 18px 14px;
    padding: 36px 22px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.notif-loading { margin-top: 40px; }


/* ── No blue tap flash / focus box on phones (looks like a web page, not an app) ── */
*, *::before, *::after, html, body, button, a, input, select, textarea, label, [role="button"], img {
    -webkit-tap-highlight-color: transparent;
}
button, [role="button"], .swipe-btn, nav a, .fchip, .chip { -webkit-user-select: none; user-select: none; }
button, a, [role="button"], label, .card-container, img {
    -webkit-touch-callout: none;
}
button:focus, a:focus, [role="button"]:focus, [tabindex]:focus { outline: none; }
button::-moz-focus-inner { border: 0; }
/* keyboard users still get a clear ring */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid rgba(147, 30, 30, .55); outline-offset: 2px; }
button, [role="button"], .swipe-btn, nav a { -webkit-user-select: none; user-select: none; }

/* ── Feels like an app, not a web page ───────────────────────────────────── */
html, body { overscroll-behavior: none; }                 /* no pull-to-refresh / rubber-band / edge glow */
body { -webkit-touch-callout: none; }                     /* no long-press link/image menus */
img, a { -webkit-user-drag: none; user-drag: none; }
header, nav, .swipe-btn, .fchip, .chip, #cardArea { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; }
@media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none; } }

/* ── Swipe cards with weight ─────────────────────────────────────────────── */
#cardArea { touch-action: none; overscroll-behavior: contain; }
.card-container {
    transform-origin: 50% 88%;          /* held by the lower edge, so it tilts like a real card */
    will-change: transform;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    touch-action: none;
}
.card-container .price-card { box-shadow: none; }
.swipe-stamp {
    position: absolute; top: 18px; padding: 4px 14px; border: 3px solid; border-radius: 10px;
    font-weight: 800; font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0;
    pointer-events: none; z-index: 5; background: rgba(255,255,255,.88);
}
.swipe-stamp.keep { right: 18px; color: #2e9b3a; border-color: #2e9b3a; transform: rotate(10deg); }
.swipe-stamp.pass { left: 18px;  color: #c0392b; border-color: #c0392b; transform: rotate(-10deg); }
@media (prefers-reduced-motion: reduce) { .card-container { transition: none !important; } }

/* ── Bottom navigation: the current page is a soft white pill, other icons are dimmer ── */
nav .navigation a, nav .bottom-nav a, .bottom-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 36px; border-radius: 12px;
    color: #fff; opacity: .72;
    transition: background-color .2s ease, opacity .2s ease, transform .15s ease;
}
nav a[aria-current="page"], .bottom-nav a[aria-current="page"] {
    opacity: 1; background: rgba(255, 255, 255, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
nav a:active, .bottom-nav a:active { transform: scale(.92); }

/* long unbroken text can never stretch a card, tag or sheet sideways */
.card-container, .description-container, .detail-desc, .detail-title, .listing-sheet, .modal, [class*="modal"], [class*="sheet"] { overflow-wrap: anywhere; word-break: break-word; }
.tag-pill, .card-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags-pills { display: flex; flex-wrap: wrap; gap: 4px; }
textarea, input[type="text"] { max-width: 100%; }


/* ── Skeleton placeholders: the same grey shimmer everywhere data loads (feed, notifications, lost & found, my listings) ── */
@keyframes ub-sk { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sk, .sk-line, .sk-img, .sk-dot {
    background: linear-gradient(90deg, #f0f0f0 25%, #e2e2e2 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: ub-sk 1.3s infinite linear;
}
@media (prefers-reduced-motion: reduce) { .sk, .sk-line, .sk-img, .sk-dot { animation: none; } }
.sk-line { height: 12px; border-radius: 6px; margin: 6px 0; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.w80 { width: 80%; }
.sk-img  { width: 100%; border-radius: 12px; }
.sk-dot  { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.sk-row  { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
.sk-row .sk-body { flex: 1; }
.sk-stack { display: none; flex-direction: column; width: 100%; }
.sk-card  { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.07); margin: 10px 12px; padding-bottom: 8px; }
.sk-card .sk-img { height: 150px; border-radius: 0; }
.sk-card .sk-line { margin: 10px 12px 0; }
#feedLoading.sk-feed { justify-content: flex-start; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
#feedLoading.sk-feed .sk-img { flex: 1; min-height: 160px; border-radius: 16px 16px 0 0; }
#feedLoading.sk-feed .sk-text { padding: 12px 14px 16px; }
.lf-loading.sk-stack, .notif-loading.sk-stack, .listings-loading.sk-stack { margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; }