/* JodiNo1 styles (Bootstrap 5 + custom) */
:root {
  --brand: #e8335a;
  --brand-2: #ff7a59;
  --brand-dark: #b81f44;
  --ink: #1d1b26;
  --soft: #fff4f6;
}
body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: #fff; }
a { color: var(--brand); }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; }
.bg-soft { background: var(--soft); }
.brand { font-weight: 700; font-size: 1.35rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.brand span { color: var(--brand); }
.btn-brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { color: #fff; filter: brightness(.95); }
.btn-outline-brand { border: 1.5px solid var(--brand); color: var(--brand); font-weight: 500; }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }
.nav-pills .nav-link.active { background: var(--brand); }
.nav-pills .nav-link { color: var(--ink); }

/* ---------- Landing ---------- */
.hero { background: radial-gradient(circle at 85% 20%, #ffe1e8 0, transparent 45%), radial-gradient(circle at 10% 90%, #ffe9df 0, transparent 40%), #fff; padding: 4.5rem 0; }
.hero-phone { width: 280px; border-radius: 36px; padding: 12px; background: #1d1b26; box-shadow: 0 30px 60px rgba(232, 51, 90, .25); transform: rotate(3deg); }
.phone-card { background: #fff; border-radius: 26px; overflow: hidden; }
.phone-photo { height: 300px; background: linear-gradient(160deg, #ffd0db, #ffb199); display: flex; align-items: center; justify-content: center; font-size: 6rem; color: #fff; }
.step-icon { width: 72px; height: 72px; border-radius: 22px; background: var(--soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.feature-card { background: #fff; border-radius: 18px; padding: 1.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); }
.price-card { border: 1px solid #eee; border-radius: 20px; padding: 2rem; background: #fff; display: flex; flex-direction: column; }
.price-card ul { flex: 1; margin: 1rem 0; }
.price-card li { padding: .25rem 0; }
.price-card .bi-check2 { color: var(--brand); }
.price-card .price { font-size: 2rem; font-weight: 700; }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 16px 40px rgba(232, 51, 90, .15); }
.site-footer { background: var(--ink); color: #fff; }
.site-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h6 { font-weight: 600; }
.city-links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.legal h5 { margin-top: 1.5rem; font-weight: 600; }
.auth-card { border-radius: 22px; }
.accordion-button:not(.collapsed) { background: var(--soft); color: var(--brand-dark); }

/* ---------- Round buttons ---------- */
.round-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .15s; cursor: pointer; }
.round-btn:active { transform: scale(.92); }
.round-btn.pass { color: #8a8a99; }
.round-btn.like { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); width: 70px; height: 70px; font-size: 1.8rem; }
.round-btn.super { color: #f5a400; width: 52px; height: 52px; font-size: 1.2rem; }
.round-btn.accept { color: #fff; background: #20c070; }
.round-btn.dark { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: none; }
.modal .round-btn.pass { background: #ff4d4d; color: #fff; }

/* ---------- App shell ---------- */
body.app { background: #fafafb; padding-bottom: 80px; }
.app-top { position: sticky; top: 0; z-index: 1020; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; box-shadow: 0 1px 0 #eee; }
.app-body { max-width: 760px; margin: 0 auto; padding-top: 1rem; }
.coin-pill { background: #fff6dd; color: #8a6200; border-radius: 99px; padding: .2rem .7rem; font-weight: 600; text-decoration: none; font-size: .9rem; }
.app-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: #fff; display: flex; justify-content: space-around; padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 #eee; }
.app-nav a { position: relative; display: flex; flex-direction: column; align-items: center; color: #8a8a99; text-decoration: none; font-size: .7rem; min-width: 56px; }
.app-nav a i { font-size: 1.35rem; }
.app-nav a.active { color: var(--brand); }
.app-nav .dot { position: absolute; top: -2px; right: 10px; background: var(--brand); color: #fff; border-radius: 99px; font-size: .6rem; padding: 0 5px; font-weight: 600; }
.online-dot { display: inline-block; width: 10px; height: 10px; background: #20c070; border-radius: 50%; border: 2px solid #fff; vertical-align: middle; }
.online-dot.pos { position: absolute; bottom: 2px; right: 2px; }
.ring { border: 3px solid var(--brand); object-fit: cover; }
.chip { display: inline-block; background: var(--soft); color: var(--brand-dark); border-radius: 99px; padding: .2rem .75rem; font-size: .8rem; border: 0; }
.chip-btn { cursor: pointer; }
.likes-banner { display: block; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-radius: 14px; padding: .7rem 1rem; text-decoration: none; font-weight: 500; }
.likes-banner:hover { color: #fff; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.min-w-0 { min-width: 0; }

/* ---------- Discover deck ---------- */
.deck { position: relative; height: min(68vh, 560px); margin: 0 auto; max-width: 420px; }
.swipe-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #ddd; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); transition: transform .35s ease, opacity .35s ease; z-index: 2; }
.swipe-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.swipe-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.2rem 1.2rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); pointer-events: none; }
.swipe-card.out-right { transform: translateX(140%) rotate(25deg); opacity: 0; }
.swipe-card.out-left { transform: translateX(-140%) rotate(-25deg); opacity: 0; }
.swipe-card.out-up { transform: translateY(-140%) scale(.9); opacity: 0; }
.deck-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: #fff; border-radius: 22px; border: 2px dashed #f1c6d0; z-index: 1; }
.deck-actions { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin: 1.2rem 0; }
.match-modal { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; border-radius: 24px; }

/* ---------- Tiles ---------- */
.person-tile { position: relative; display: block; aspect-ratio: 3/4; border-radius: 16px; background: #ddd center/cover; overflow: hidden; color: #fff; text-decoration: none; }
.person-tile .tile-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem .7rem .6rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.tile-badge { position: absolute; top: .5rem; left: .5rem; }
.locked-tile { aspect-ratio: 3/4; border-radius: 16px; background: linear-gradient(135deg, #f6d4dc, #ffe2d6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; }
.new-matches { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.new-matches a { width: 72px; flex: 0 0 auto; color: var(--ink); text-decoration: none; }
.new-matches img { object-fit: cover; }
.list-group-item img { object-fit: cover; }

/* ---------- Profile ---------- */
.pv-img { aspect-ratio: 4/5; object-fit: cover; }
.photo-slot { position: relative; aspect-ratio: 3/4; border-radius: 14px; background: #eee center/cover; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-slot.add { border: 2px dashed #e7b2bf; background: var(--soft); color: var(--brand); cursor: pointer; }
.photo-status { position: absolute; top: 6px; left: 6px; font-size: .65rem; }
.photo-main { position: absolute; top: 6px; right: 6px; font-size: .65rem; }
.photo-actions { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 4px; }
.wallet-card { background: linear-gradient(135deg, #2b2440, #1d1b26); color: #fff; border-radius: 20px; padding: 1.5rem; }
.buy-card { position: relative; background: #fff; border: 1.5px solid #eee; border-radius: 16px; padding: 1rem .5rem; text-align: center; }
.buy-card:hover { border-color: var(--brand); }
.buy-card.featured { border-color: var(--brand); }
.buy-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: .65rem; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }

/* ---------- Chat ---------- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 150px); }
.chat-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; border-bottom: 1px solid #eee; }
.chat-head img { object-fit: cover; }
.chat-msgs { flex: 1; overflow-y: auto; padding: .8rem 0; }
.msg { display: flex; flex-direction: column; margin-bottom: .5rem; }
.msg .bubble { max-width: 78%; padding: .5rem .85rem; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; }
.msg .meta { font-size: .65rem; color: #999; margin: .1rem .4rem; }
.msg.mine { align-items: flex-end; }
.msg.mine .bubble { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-bottom-right-radius: 4px; }
.msg.theirs .bubble { background: #fff; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.icebreakers { display: flex; gap: .4rem; overflow-x: auto; padding: .4rem 0; }
.icebreakers .chip { white-space: nowrap; }
.chat-input { display: flex; gap: .5rem; padding-top: .5rem; }
.chat-input .form-control { border-radius: 99px; }
.chat-input .btn { width: 44px; height: 44px; flex: 0 0 44px; }

/* ---------- Video call ---------- */
body.call-page { background: #000; color: #fff; overflow: hidden; }
#remoteVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
#localVideo { position: fixed; top: 80px; right: 14px; width: 110px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .6); z-index: 3; transform: scaleX(-1); background: #333; }
.call-top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: linear-gradient(rgba(0, 0, 0, .6), transparent); z-index: 4; }
.call-top img { object-fit: cover; }
.call-timer { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.call-controls { position: fixed; bottom: calc(40px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 1.2rem; z-index: 4; }
.call-extend { position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .75); padding: .8rem 1rem; border-radius: 16px; text-align: center; z-index: 5; width: min(92vw, 380px); }
.call-note { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; opacity: .55; z-index: 4; padding: 0 1rem; }

/* ---------- Admin ---------- */
body.admin .stat { border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
body.admin .review-card img { aspect-ratio: 3/4; object-fit: cover; }
body.admin .review-card { cursor: pointer; }

@media (max-width: 576px) {
  .hero { padding: 2.5rem 0; }
  .round-btn { width: 54px; height: 54px; }
  .round-btn.like { width: 64px; height: 64px; }
}