/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH VIEW — Friends & Clubs panel
   ═══════════════════════════════════════════════════════════════════════════ */

.sv2-overlay {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: background 0.3s, opacity 0.3s;
}
.sv2-overlay--visible {
  opacity: 1;
  background: rgba(0,0,0,0.75);
  pointer-events: all;
}
.sv2-sheet {
  width: 100%;
  height: 94vh;
  background: var(--app-bg-card);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
.sv2-sheet--open { transform: translateY(0); }

.sv2-handle {
  width: 40px; height: 4px;
  background: var(--app-surface-2);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0; cursor: grab;
}

/* Header */
.sv2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.sv2-back {
  background: var(--app-surface-1);
  border: none; color: var(--app-text-primary);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sv2-title {
  font-size: 1.9rem; font-weight: 800; color: var(--app-text-primary); margin: 0;
}

/* Tabs */
.sv2-tabs {
  display: flex;
  border: 1px solid var(--app-border);
  padding: 0 16px;
  flex-shrink: 0;
}
.sv2-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 0;
  border: none; background: none;
  color: var(--app-text-tertiary);
  font-size: 1.35rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.sv2-tab--active {
  color: var(--color-brand--2, #00c46a);
  border-bottom-color: var(--color-brand--2, #00c46a);
}

/* Content */
.sv2-content {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
}

/* Search bar */
.sv2-search-wrap {
  padding: 14px 16px 8px;
  position: sticky; top: 0;
  background: var(--app-bg-card);
  z-index: 10;
}
.sv2-search-row {
  display: flex; gap: 10px; align-items: center;
}
.sv2-search-box {
  flex: 1;
  display: flex; align-items: center;
  background: var(--app-surface-1);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 14px;
  gap: 10px;
  transition: border-color 0.2s;
}
.sv2-search-box:focus-within { border-color: var(--color-brand--2, #00c46a); }
.sv2-search-icon { color: var(--app-text-muted); flex-shrink: 0; }
.sv2-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--app-text-primary); font-size: 1.35rem; font-family: inherit;
}
.sv2-search-input::placeholder { color: var(--app-text-muted); }

.sv2-create-btn {
  background: var(--color-brand--2, #00c46a);
  border: none; color: var(--app-text-primary);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 1.3rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sv2-create-btn:active { opacity: 0.8; }

.sv2-location-pill {
  margin-top: 8px;
  font-size: 1.15rem;
  color: var(--app-text-tertiary);
}

/* Section title */
.sv2-section-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
  padding: 14px 16px 6px;
}

/* List */
.sv2-list { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }

/* Item */
.sv2-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--app-surface-1);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  transition: background 0.15s;
}
.sv2-item:active { background: var(--app-surface-1); }
.sv2-item__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--app-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--app-text-tertiary); flex-shrink: 0;
  overflow: hidden;
}
.sv2-item__avatar--club {
  border-radius: 14px;
  background: rgba(0,196,106,0.12);
}
.sv2-item__info { flex: 1; min-width: 0; }
.sv2-item__name {
  display: block; font-size: 1.35rem; font-weight: 700; color: var(--app-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv2-item__sub {
  display: block; font-size: 1.1rem; color: var(--app-text-tertiary); margin-top: 2px;
}
.sv2-item__desc {
  display: block; font-size: 1.1rem; color: var(--app-text-muted);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv2-item__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Badges */
.sv2-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 1.2rem; font-weight: 700;
  border: none; cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sv2-badge:active { opacity: 0.75; }
.sv2-badge--green { background: rgba(0,196,106,0.15); color: #00c46a; border: 1.5px solid rgba(0,196,106,0.3); }
.sv2-badge--gray  { background: var(--app-surface-1); color: var(--app-text-tertiary); border: 1.5px solid rgba(255,255,255,0.1); }
.sv2-badge--red   { background: rgba(248,113,113,0.12); color: #f87171; border: 1.5px solid rgba(248,113,113,0.25); }

/* Empty state */
.sv2-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px 16px; text-align: center;
}
.sv2-empty__icon { font-size: 3.5rem; opacity: 0.4; margin-bottom: 12px; }
.sv2-empty__title { font-size: 1.5rem; font-weight: 700; color: var(--app-text-tertiary); margin: 0 0 6px; }
.sv2-empty__sub { font-size: 1.2rem; color: var(--app-text-muted); margin: 0; line-height: 1.5; }

/* Backend note */
.sv2-backend-note {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  font-size: 1.2rem;
  color: var(--app-text-muted);
  line-height: 1.4;
}

/* Invite button */
.sv2-invite-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 16px 16px 0;
  width: calc(100% - 32px);
  padding: 15px;
  background: var(--color-brand--2, #00c46a);
  border: none; color: var(--app-text-primary);
  border-radius: 16px;
  font-size: 1.45rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: opacity 0.2s;
}
.sv2-invite-btn:active { opacity: 0.85; }

/* ── Create Club Modal ── */
.sv2-modal-overlay {
  position: fixed; inset: 0; z-index: 6500;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.sv2-modal-overlay--visible { opacity: 1; pointer-events: all; }
.sv2-modal {
  width: 100%;
  background: var(--app-bg-card);
  border-radius: 24px 24px 0 0;
  padding-bottom: 32px;
  transform: translateY(20px);
  transition: transform 0.25s;
}
.sv2-modal-overlay--visible .sv2-modal { transform: translateY(0); }
.sv2-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 14px;
  border: 1px solid var(--app-border);
}
.sv2-modal__title { font-size: 1.7rem; font-weight: 700; color: var(--app-text-primary); margin: 0; }
.sv2-modal__close {
  background: var(--app-surface-2); border: none; color: #aaa;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sv2-modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.sv2-modal__field { display: flex; flex-direction: column; gap: 6px; }
.sv2-modal__label {
  font-size: 1.1rem; font-weight: 700;
  color: var(--app-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px;
}
.sv2-modal__input {
  background: var(--app-surface-1);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px; color: var(--app-text-primary);
  font-size: 1.35rem; padding: 12px 14px;
  outline: none; font-family: inherit;
  transition: border-color 0.2s;
}
.sv2-modal__input:focus { border-color: var(--color-brand--2, #00c46a); }
.sv2-modal__textarea { resize: none; min-height: 80px; }
.sv2-modal__footer {
  display: flex; gap: 10px;
  padding: 0 20px;
}
.sv2-modal__btn {
  flex: 1; padding: 14px;
  border-radius: 14px; border: none;
  font-size: 1.4rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: opacity 0.2s;
}
.sv2-modal__btn--cancel { background: var(--app-surface-1); color: #aaa; flex: 0 0 auto; padding: 14px 20px; }
.sv2-modal__btn--save   { background: var(--color-brand--2, #00c46a); color: var(--app-text-primary); }


/* ── Club Detail ── */
.sv2-club-detail-overlay {
  position: fixed; inset: 0; z-index: 7000;
  background: var(--app-bg-card);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sv2-club-detail-overlay--visible { opacity: 1; pointer-events: all; }

.sv2-club-detail__banner {
  height: 180px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.sv2-club-detail__back {
  position: absolute; top: 16px; left: 16px;
  background: rgba(0,0,0,0.45); border: none; color: var(--app-text-primary);
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.sv2-club-detail__logo {
  width: 80px; height: 80px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-surface-2);
}
.sv2-club-detail__info { padding: 16px 20px 0; }
.sv2-club-detail__name {
  font-size: 2.2rem; font-weight: 900; color: var(--app-text-primary); margin: 0 0 8px;
}
.sv2-club-detail__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 1.2rem; color: var(--app-text-tertiary);
  margin-bottom: 10px;
}
.sv2-club-detail__desc {
  font-size: 1.3rem; color: rgba(255,255,255,0.6);
  line-height: 1.5; margin: 0 0 16px;
}
.sv2-club-detail__actions { margin-bottom: 20px; }

.sv2-club-action {
  width: 100%;
  padding: 14px;
  border-radius: 16px; border: none;
  font-size: 1.45rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: opacity 0.2s;
}
.sv2-club-action--join  { background: var(--color-brand--2, #00c46a); color: var(--app-text-primary); }
.sv2-club-action--leave { background: rgba(248,113,113,0.15); color: #f87171; border: 1.5px solid rgba(248,113,113,0.3); }
.sv2-club-action--owner { background: var(--app-surface-1); color: var(--app-text-tertiary); cursor: default; }

.sv2-club-detail__section-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--app-text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
  padding: 16px 20px 8px;
  border: 1px solid var(--app-border);
}
.sv2-club-detail__feed { padding: 0 16px 16px; }
.sv2-club-detail__feed-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 0; text-align: center; gap: 6px;
}
.sv2-club-detail__feed-empty span { font-size: 2.5rem; opacity: 0.4; }
.sv2-club-detail__feed-empty p { font-size: 1.3rem; color: var(--app-text-tertiary); margin: 0; }
.sv2-club-detail__feed-sub { font-size: 1.1rem !important; color: var(--app-text-muted) !important; }
.sv2-club-detail__members { padding: 0 0 80px; }


/* ── Club detail — image editing ── */
.sv2-club-detail__edit-banner {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.5); border-radius: 20px;
  padding: 6px 12px; font-size: 1.2rem; cursor: pointer;
  backdrop-filter: blur(4px); color: var(--app-text-primary);
  transition: background 0.2s;
}
.sv2-club-detail__edit-banner:hover { background: rgba(0,0,0,0.7); }
.sv2-club-detail__edit-logo {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--color-brand--2, #00c46a);
  border-radius: 50%; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
}
.sv2-club-detail__logo { position: relative; }

/* ── Club feed items ── */
.sv2-club-feed-item {
  background: var(--app-surface-1);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.sv2-club-feed-item__top {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
.sv2-club-feed-item__author { font-size: 1.2rem; font-weight: 700; color: var(--app-text-primary); }
.sv2-club-feed-item__date   { font-size: 1.1rem; color: var(--app-text-muted); }
.sv2-club-feed-item__title  { font-size: 1.3rem; font-weight: 600; color: var(--app-text-primary); margin-bottom: 4px; }
.sv2-club-feed-item__body   { font-size: 1.2rem; color: var(--app-text-tertiary); margin-bottom: 6px; }
.sv2-club-feed-item__stats  {
  display: flex; gap: 10px;
  font-size: 1.1rem; color: var(--color-brand--2, #00c46a);
  font-weight: 600;
}

/* ── Club detail actions fix ─────────────────────────────────────────────── */
.sv2-club-detail__actions {
  padding: 0 20px 16px;
}
.sv2-club-action {
  font-size: 1.3rem !important;
  padding: 11px 14px !important;
}
/* Share/Delete icon buttons — smaller */
#cdbShare, #cdbDelete {
  padding: 11px 14px !important;
  font-size: 1.4rem !important;
  min-width: 44px;
}

/* ── Club detail action row ─────────────────────────────────────────────── */
.sv2-club-detail__action-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--app-border);
  border: 1px solid var(--app-border);
}
.sv2-club-detail__action-row::-webkit-scrollbar { display: none; }

.sv2-club-detail__action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  background: var(--app-surface-1);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  color: rgba(255,255,255,0.55);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-width: 56px;
}
.sv2-club-detail__action-btn > span:first-child {
  font-size: 1.5rem;
  line-height: 1;
}
.sv2-club-detail__action-btn:active {
  background: var(--app-surface-2);
  transform: scale(0.97);
}
.sv2-club-detail__action-btn--active {
  color: #00c46a;
  background: rgba(0,196,106,0.1);
  border-color: rgba(0,196,106,0.3);
}
/* Delete button red tint */
.sv2-club-detail__action-btn[id="cdbDelete"] {
  color: rgba(248,113,113,0.7);
  border-color: rgba(248,113,113,0.15);
}
.sv2-club-detail__action-btn[id="cdbDelete"]:active {
  background: rgba(248,113,113,0.1);
}

/* ── Add Post button ─────────────────────────────────────────────────────── */
#cdbAddPost {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px) !important;
  margin: 0 16px 4px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: rgba(0,196,106,0.1) !important;
  border: 1.5px solid rgba(0,196,106,0.3) !important;
  color: #00c46a !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, transform 0.1s;
}
#cdbAddPost:active {
  background: rgba(0,196,106,0.18) !important;
  transform: scale(0.98);
}