.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 770px) {
  .profile-header {
    align-items: center;
  }
}

.profile-image-container {
  position: relative;
  width: 4rem;
  height: 4rem;
}

@media (min-width: 770px) {
  .profile-image-container {
    width: 5rem;
    height: 5rem;
  }
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.upload-btn {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  cursor: pointer;
}

.upload-icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 770px) {
  .upload-icon {
    width: 1rem;
    height: 1rem;
  }
}

.profile-info {
  flex: 1;
}

.username {
  font-size: 0.8125rem;
  color: #434343;
  margin: 0;
}

.bio {
  font-size: 0.8125rem;
  font-weight: 300;
  color: #434343cc;
  margin: 0;
}

.action-icon-btn {
  border: 1.3px solid #f2f2f2;
  padding: 0.375rem 0.5rem;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 0px 3.8px 0px #6d28d91a;
  cursor: pointer;
}

.action-btn {
  border: 1.3px solid #f2f2f2;
  padding: 0.375rem 0.5rem;
  background: white;
  box-shadow: 0px 0px 3.8px 0px #6d28d91a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.icon-sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-xs {
  width: 1rem;
  height: 1rem;
}

.btn-text {
  font-size: 0.875rem;
  font-weight: 300;
}

.stats-container {
  display: flex;
  margin: 1.25rem 0;
  max-width: 25rem;
}

.stat-item {
  flex: 1;
  padding: 0 0.5rem;
  text-align: center;
}

.stat-divider {
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
}

.stat-label {
  color: #15151599;
  font-size: 0.875rem;
  margin: 0;
}

@media (min-width: 770px) {
  .stat-label {
    font-size: 1.125rem;
  }
}

.stat-value {
  color: #151515;
  font-size: 0.875rem;
  margin: 0;
}

@media (min-width: 770px) {
  .stat-value {
    font-size: 1.125rem;
  }
}

.tabs-container {
  background: #7676801f;
  padding: 0.25rem;
  border-radius: 50px;
  display: flex;
  overflow-x: auto;
  width: 100%;
  max-width: calc((100vw - 48px));
  margin-bottom: 1rem;
}

@media (min-width: 770px) {
  .tabs-container {
    width: max-content;
    max-width: calc(((100vw - 250px) * 2 / 3) - 48px);
  }
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 50px;
  color: black;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  white-space: nowrap;
}

@media (min-width: 770px) {
  .tab-btn {
    padding: 0.375rem 3rem;
    flex: none;
  }
}

.tab-btn.active {
  background: white;
  color: var(--primary);
}

.content-area {
  width: 100%;
  max-width: 31.25rem;
}

@media (min-width: 770px) {
  .content-area {
    max-width: 590px;
  }
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.empty-state {
  display: block;
}

.empty-card {
  border-radius: 1rem;
  background: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 770px) {
  .empty-card {
    padding: 2rem 1.25rem;
    gap: 3rem;
  }
}

.empty-title {
  font-weight: bold;
  font-size: 1rem;
  color: #151515;
  margin-bottom: 0.25rem;
}

.empty-description {
  font-size: 0.75rem;
  color: #15151599;
  margin: 0.25rem 0;
}

.create-btn {
  margin-top: 1rem;
  border: 1.3px solid #f2f2f2;
  padding: 0.375rem;
  border-radius: 50px;
  background: white;
  box-shadow: 0px 0px 3.8px 0px #6d28d91a;
  display: inline-flex; /* shrink to content for <a> */
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  text-decoration: none; /* anchor reset */
  color: inherit; /* anchor reset */
  white-space: nowrap; /* keep label on one line */
}

.plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.875rem; /* Font Awesome icon size */
  line-height: 1;
}

.create-text {
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1; /* keeps text vertically centered next to icon */
}

.no-event-img {
  max-width: 100px;
}

.action-card {
  box-shadow: 0px 0px 3.8px 0px #6d28d91a;
  border-radius: 1rem;
  background: white;
  width: 100%;
  padding: 0.25rem;
  margin-bottom: 1rem;
}

.action-item {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 1rem;
  gap: 0.75rem;
  background: transparent;
  border: none;
}

@media (min-width: 770px) {
  .action-item {
    gap: 1.25rem;
  }
}

.action-item.border-top {
  border-top: 1px solid #d7d7d7;
}

[x-cloak] {
  display: none !important;
}

.settings-pw-requirements {
  padding-left: 0.25rem;
  line-height: 1.8;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
}

.settings-pw-req-met {
  color: var(--primary);
}

.settings-pw-req-unmet {
  color: #9ca3af;
}

.action-icon-profile {
  width: 0.875rem;
  height: 0.875rem;
}

.action-icon-lg {
  width: 1.25rem;
  height: 1.25rem;
}

.action-text {
  font-size: 1rem;
  color: #243134;
}

.chevron-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
}

.divider {
  height: 0;
  width: 100%;
  border: 0.5px solid #d7d7d7;
  margin: 1rem 0;
}

.tag-icon {
  width: 0.625rem;
  height: 0.625rem;
}

@media (min-width: 770px) {
  .tag-icon {
    width: 1rem;
    height: 1rem;
  }
}

.user-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

@media (min-width: 770px) {
  .user-avatar {
    width: 2rem;
    height: 2rem;
  }
}

.user-name {
  font-size: 0.875rem;
  font-weight: bold;
}

@media (min-width: 770px) {
  .user-name {
    font-size: 1rem;
  }
}

.wishlist-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

@media (min-width: 770px) {
  .wishlist-actions {
    gap: 1rem;
  }
}

.action-icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 770px) {
  .action-icon-md {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.wishlist-likes {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 770px) {
  .wishlist-likes {
    gap: 0.75rem;
  }
}

.likes-avatars {
  display: flex;
  align-items: center;
}

.like-avatar {
  background: white;
  border-radius: 50%;
  padding: 0.125rem;
}

.avatar-sm {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

@media (min-width: 770px) {
  .avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.likes-text {
  font-size: 0.625rem;
  color: #434343;
}

@media (min-width: 770px) {
  .likes-text {
    font-size: 0.75rem;
  }
}

.contribution-card {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.contribution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contribution-name {
  font-size: 0.875rem;
  font-weight: bold;
  color: #242424;
}

@media (min-width: 770px) {
  .contribution-name {
    font-size: 1rem;
  }
}

.view-list-btn {
  background: #6d28d91a;
  border: none;
  padding: 0.5rem 0.625rem;
  border-radius: 0.125rem;
  color: #6d29d9;
  font-size: 0.75rem;
  cursor: pointer;
}

@media (min-width: 770px) {
  .view-list-btn {
    font-size: 0.875rem;
  }
}

.contribution-divider {
  height: 0;
  border: 0.5px solid #d7d7d7;
  margin: 1rem 0;
}

.qr-modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: #fbfbfb;
  z-index: 10;
  flex-direction: column;
  z-index: 101;
}

.qr-modal.show {
  display: flex;
}

.qr-header {
  display: flex;
  align-items: center;
  background: white;
  padding: 1rem;
  border-bottom: 1px solid #d7d7d7;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.back-btn img {
  width: 1.5rem;
  height: 1.5rem;
}

.qr-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #243134;
  margin: 0 auto;
}

.qr-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  max-width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.qr-profile-img {
  position: absolute;
  top: -1.75rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}

@media (min-width: 770px) {
  .qr-profile-img {
    top: -2rem;
    width: 4rem;
    height: 4rem;
  }
}

.qr-content img:not(.qr-profile-img) {
  width: 100%;
  max-width: 15rem;
}

.qr-actions {
  margin-top: auto;
  background: white;
  padding: 1.25rem;
}

@media (min-width: 770px) {
  .qr-actions {
    padding: 1.25rem 2.5rem;
  }
}

.btn-primary {
  background: #6d29d9;
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: center;
}

.btn-secondary {
  background: none;
  color: #6d29d9;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.profile-wishlist-card {
  background: white;
  border-radius: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  width: 100%;
}

.profile-card-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem 1.5rem 0 0;
  aspect-ratio: 531/386;
}

.profile-card-img {
  object-fit: cover;
}

.profile-counter-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
}

.profile-price-badge {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.price-text {
  font-size: 0.875rem;
}

/* ---- Tabs motion ---- */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animate the active tab content when it appears */
.tab-content.active {
  animation: slideInRight 200ms cubic-bezier(0.22, 1, 0.36, 1) both; /* default */
}
.tab-content.active.slide-left {
  animation-name: slideInLeft;
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.tab-content.active.slide-right {
  animation-name: slideInRight;
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

/* Smoothen tab button feedback */
.tab-btn {
  will-change: background-color, color, box-shadow, transform;
}
.tab-btn:active {
  transform: translateY(1px);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .tab-content.active {
    animation: none !important;
  }
  .tab-btn {
    transition: none !important;
  }
}

/* View items button on wishlist card */
.wishlist-view-items-btn {
  background: #6d29d91a;
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  color: var(--primary);
  font-size: 0.8125rem;
  cursor: pointer;
}

/* ── Contributions tab ───────────────────────────────────────── */

/* Sort By pill */
.contributions-sort-pill {
  cursor: pointer;
  font-size: 0.85rem;
}

/* Sort By select (hides native arrow, custom caret via bg-image) */
.contributions-sort-select {
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

/* Filter pill button */
.contributions-filter-btn {
  font-size: 0.85rem;
  cursor: pointer;
}

/* Sliders icon inside Filter button */
.contributions-filter-icon {
  font-size: 0.8rem;
}

/* Active-filter count badge */
.contributions-filter-badge {
  background: var(--primary);
  font-size: 0.65rem;
}

/* Filter dropdown panel */
.contributions-filter-menu {
  min-width: 220px;
}

/* Contribution row thumbnail */
.contribution-img-wrap {
  width: 56px;
  height: 56px;
}

/* Small meta text (wishlist slug, date, status) */
.contribution-meta {
  font-size: 0.78rem;
}

/* Muted icon colour using the app's --muted variable */
.icon-muted {
  color: var(--muted);
}