/* ═══════════════════════════════════════════════════════════
   Profile Redesign — Creator Page
   Fonts: Outfit (Latin), Cairo (Arabic/RTL)
   ═══════════════════════════════════════════════════════════ */

:root {
  --pr-purple: #6D4AE8;
  --pr-purple-dark: #5A3DD1;
  --pr-purple-light: #9c6aff;
  --pr-purple-subtle: #EDEBFD;
  --pr-purple-ghost: #F8F7FF;
  --pr-navy: #272567;
  --pr-text: #0F0F24;
  --pr-text-2: #5A5A72;
  --pr-text-3: #9898AE;
  --pr-border: #E4E4EF;
  --pr-border-light: #F0F0F5;
  --pr-bg: #FAFAFA;
  --pr-white: #FFFFFF;
  --pr-green: #27ae60;
  --pr-orange: #f39c12;
  --pr-red: #e74c3c;
  --pr-radius: 12px;
  --pr-radius-lg: 16px;
  --pr-radius-xl: 20px;
  --pr-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --pr-avatar-mobile: 5.25rem;
  --pr-hero-gap: 0.85rem;
}

/* ── Full-width layout (no right sidebar) ── */
.pr-page { max-width: 58rem; margin: 0 auto; padding: 0 2rem; font-family: 'Outfit',system-ui,-apple-system,sans-serif; }
.pr-page a, .pr-page a:hover { text-decoration: none; }

@media (max-width: 767.98px) {
  .pr-page { padding: 0; }
}

/* ── Cover Photo ── */
.pr-cover {
  position: relative;
  width: 100%;
  height: 13rem;
  background: linear-gradient(135deg, #1a0533, #2d1b69, #6C5CE7, #9c6aff);
  background-size: cover;
  background-position: center;
  border-radius: 0 0 var(--pr-radius-xl) var(--pr-radius-xl);
}

@media (max-width: 767.98px) {
  .pr-cover { height: 9rem; border-radius: 0; overflow: visible; }
}

.pr-cover-upload {
  position: absolute; bottom: 0.85rem; right: 0.85rem;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.65rem;
  color: white;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: var(--pr-transition);
  letter-spacing: 0.01em;
  z-index: 3;
}
.pr-cover-upload:hover {
  background: rgba(0,0,0,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  color: white;
}
.pr-cover-upload svg { width: 1rem; height: 1rem; }

/* Cover CTAs container (Tip + Book a Call) */
.pr-cover-ctas {
  position: absolute; bottom: 0.85rem; right: 0.85rem;
  display: flex; gap: 0.5rem; z-index: 3;
}
.pr-cover-ctas .pr-cover-upload {
  position: static;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
}
.pr-cover-ctas .pr-cover-upload:hover { background: rgba(0,0,0,0.6); }

/* Three-dot menu on cover */
.pr-cover-more {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 4;
}
.pr-cover-more .dropdown { position: static; }
.pr-cover-more .dropdown-menu {
  position: absolute !important; top: calc(0.85rem + 1.75rem + 0.25rem) !important;
  right: 0.85rem !important; left: auto !important;
  transform: none !important; margin: 0;
}
@media (max-width: 767.98px) {
  .pr-cover-more { top: 0.6rem; right: 0.6rem; }
  .pr-cover-more .dropdown-menu {
    top: calc(0.6rem + 1.75rem + 0.25rem) !important;
    right: 0.6rem !important;
  }
}
.pr-cover-more-btn {
  width: 1.75rem; height: 1.75rem; padding: 0;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: none; border-radius: 50%;
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--pr-transition);
}
.pr-cover-more-btn:hover { background: rgba(0,0,0,0.5); }
.pr-cover-more-btn svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 767.98px) {
  .pr-cover-upload { bottom: 0.6rem; right: 0.6rem; padding: 0.4rem 0.8rem; font-size: 0.78rem; }
  .pr-cover-upload svg { width: 0.9rem; height: 0.9rem; }
  .pr-cover-ctas { bottom: 0.6rem; right: 0.6rem; gap: 0.35rem; }
}

/* ── Hero Body ── */
.pr-hero-body {
  display: flex; align-items: flex-end; gap: 1.25rem;
  padding: 0.75rem 1.75rem 1rem; margin-top: -2.75rem;
  position: relative; z-index: 2;
}

.pr-avatar-wrap { flex-shrink: 0; position: relative; }

.pr-avatar {
  width: 6rem; height: 6rem;
  border-radius: 1.15rem;
  border: 3.5px solid var(--pr-white);
  background: linear-gradient(135deg, var(--pr-purple), var(--pr-purple-light));
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.85rem; font-weight: 700;
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-avatar { position: relative; }
.pr-avatar-edit {
  position: absolute; left: 0.35rem; top: 0.35rem; z-index: 5;
  width: 1.65rem; height: 1.65rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); border-radius: 0.45rem;
  cursor: pointer; transition: background var(--pr-transition);
  margin: 0;
}
.pr-avatar-edit:hover { background: rgba(0,0,0,0.75); }
.pr-avatar-edit svg { display: block; }

/* When live, allow badge to overflow and match border-radius */
.pr-avatar.avatar-live {
  overflow: visible;
  --av-radius: 1.15rem;
}
.pr-avatar.avatar-live img {
  border-radius: 1.15rem;
}

.pr-online-dot {
  position: absolute; bottom: 0.25rem; right: 0.25rem;
  width: 0.9rem; height: 0.9rem;
  background: var(--pr-green);
  border: 3px solid var(--pr-white);
  border-radius: 50%;
}

.pr-hero-info {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.15rem;
}

.pr-hero-name-row { display: flex; align-items: center; gap: 0.4rem; }

.pr-hero-name {
  font-size: 1.25rem; font-weight: 700;
  color: var(--pr-navy); letter-spacing: -0.02em; line-height: 1.2;
  margin: 0;
}

.pr-verified {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-verified svg { width: 1.15em; height: 1.15em; }

.pr-hero-subtitle {
  font-size: 0.9rem; color: var(--pr-text-2); font-weight: 400; margin-top: -0.1rem;
}
.pr-hero-subtitle .dot { margin: 0 0.25rem; color: var(--pr-text-3); }
.pr-subtitle-line2 { display: inline; }

.pr-hero-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding-bottom: 0.15rem; }

@media (max-width: 767.98px) {
  .pr-hero-body {
    flex-wrap: wrap; gap: 0.5rem 0.85rem;
    padding: 0 1rem; margin-top: -4.75rem;
  }
  .pr-avatar-wrap { transform: translateY(-40px); margin-bottom: 0.25rem; }
  .pr-hero-info { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 0; padding-top: calc(4.75rem + 2px); padding-bottom: 0; }
  .pr-hero-actions { margin-left: calc(-1 * (var(--pr-avatar-mobile) + var(--pr-hero-gap))); padding-bottom: 0; justify-content: center; margin-top: 6px; width: calc(100% + var(--pr-avatar-mobile) + var(--pr-hero-gap)); gap: calc(0.5rem + 5px); }
  .pr-hero-actions .pr-btn { padding-top: calc(0.57rem - 1.5px); padding-bottom: calc(0.57rem - 1.5px); }
  .pr-hero-actions .pr-btn-icon { height: calc(2.35rem - 3px); }
  .pr-avatar { width: var(--pr-avatar-mobile); height: var(--pr-avatar-mobile); font-size: 1.5rem; }
  .pr-hero-name { font-size: 1.05rem; }
  .pr-hero-subtitle { font-size: 0.8rem; margin-top: -0.15rem; }
  .pr-hero-subtitle .dot { display: none; }
  .pr-hero-subtitle .pr-subtitle-line2 { display: block; margin-top: 0.1rem; }
}

/* ── Buttons ── */
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.57rem 1.15rem; border-radius: var(--pr-radius);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: var(--pr-transition);
  border: none; white-space: nowrap;
}
.pr-btn svg { width: 1rem; height: 1rem; }
.pr-btn-primary { background: var(--pr-purple); color: white; }
.pr-btn-primary:hover { background: var(--pr-purple-dark); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(109,74,232,0.35); color: white; }
.pr-btn-outline { background: var(--pr-white); color: var(--pr-text); border: 1.5px solid var(--pr-border); }
.pr-btn-outline:hover { border-color: var(--pr-purple); color: var(--pr-purple); background: var(--pr-purple-ghost); }
.pr-btn-subscribed { background: var(--pr-white); color: var(--pr-green); border: 1.5px solid var(--pr-green); display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.4rem; }
.pr-btn-subscribed .pr-subscribed-check,
.pr-btn-subscribed .pr-subscribed-gear,
.pr-btn-subscribed .pr-subscribed-label,
.pr-btn-subscribed .pr-subscribed-hover-label { grid-row: 1; }
.pr-btn-subscribed .pr-subscribed-check,
.pr-btn-subscribed .pr-subscribed-gear { grid-column: 1; }
.pr-btn-subscribed .pr-subscribed-label,
.pr-btn-subscribed .pr-subscribed-hover-label { grid-column: 2; }
.pr-btn-subscribed .pr-subscribed-gear { visibility: hidden; }
.pr-btn-subscribed .pr-subscribed-hover-label { visibility: hidden; }
.pr-btn-subscribed:hover { background: var(--pr-purple-ghost); border-color: var(--pr-purple); color: var(--pr-purple); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(109,74,232,0.2); }
.pr-btn-subscribed:hover .pr-subscribed-check { visibility: hidden; }
.pr-btn-subscribed:hover .pr-subscribed-label { visibility: hidden; }
.pr-btn-subscribed:hover .pr-subscribed-gear { visibility: visible; }
.pr-btn-subscribed:hover .pr-subscribed-hover-label { visibility: visible; }
.pr-btn-tip {
  background: var(--pr-purple-subtle); color: var(--pr-purple); border: 1.5px solid var(--pr-border);
}
.pr-btn-tip:hover { background: var(--pr-purple); color: white; transform: translateY(-1px); }
.pr-btn-icon {
  width: 2.35rem; height: 2.35rem; padding: 0;
  background: var(--pr-white); border: 1.5px solid var(--pr-border);
  border-radius: var(--pr-radius); color: var(--pr-text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--pr-transition);
}
.pr-btn-icon:hover { border-color: var(--pr-purple); color: var(--pr-purple); background: var(--pr-purple-ghost); }
.pr-btn-icon svg { width: 1rem; height: 1rem; }

/* ── About Row ── */
.pr-about { padding: 0.5rem 1.75rem 0; position: relative; z-index: 2; }

.pr-bio-wrap { position: relative; }

.pr-bio {
  font-size: 1rem; color: var(--pr-text-2); line-height: 1.45;
  overflow: hidden;
}
.pr-bio-wrap:not(.expanded) .pr-bio {
  max-height: 2.9em; /* exactly 2 lines: 2 × 1.45em */
}
.pr-bio p,
.pr-bio span,
.pr-bio a,
.pr-bio strong,
.pr-bio em,
.pr-bio h1, .pr-bio h2, .pr-bio h3, .pr-bio h4, .pr-bio h5, .pr-bio h6 {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

.pr-bio-toggle {
  font-size: 0.78rem; font-weight: 550;
  color: var(--pr-purple); cursor: pointer; border: none; background: none;
  padding: 0;
  line-height: 1.45;
}
.pr-bio-toggle:hover { text-decoration: underline; }

/* Collapsed: "Read more" sits inline at end of last visible line */
.pr-bio-wrap:not(.expanded) .pr-bio-toggle {
  position: absolute; bottom: 0; right: 0;
  background: linear-gradient(to right, transparent, var(--pr-bg) 40%);
  padding-left: 2.5rem;
}

/* Expanded: normal flow after text */
.pr-bio-wrap.expanded .pr-bio-toggle {
  display: inline; margin-left: 0.25rem;
}

.pr-meta-row {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 0.65rem; flex-wrap: wrap;
}

.pr-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pr-tag {
  padding: 0.25rem 0.65rem;
  background: var(--pr-purple-subtle); color: var(--pr-purple);
  font-size: 0.78rem; font-weight: 500; border-radius: 2rem;
  transition: var(--pr-transition); cursor: pointer;
}
.pr-tag:hover { background: var(--pr-purple); color: white; }

.pr-divider { width: 1px; height: 1.15rem; background: var(--pr-border); }

.pr-socials { display: flex; gap: 0.1rem; }
.pr-social-link {
  width: 1.85rem; height: 1.85rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.45rem; color: var(--pr-text-3);
  transition: var(--pr-transition);
}
.pr-social-link:hover { color: var(--pr-purple); background: var(--pr-purple-subtle); }
.pr-social-link svg { width: 0.95rem; height: 0.95rem; }

.pr-stats { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; }
.pr-stat { font-size: 0.82rem; color: var(--pr-text-3); font-weight: 450; }
.pr-stat strong { color: var(--pr-text); font-weight: 600; }

@media (max-width: 767.98px) {
  .pr-about { padding: 0.65rem 1rem 0; }
  .pr-bio { font-size: 0.88rem; }
  .pr-stats { margin-left: 0; width: 100%; margin-top: 0.25rem; }
}

/* ── Featured Offers Row ── */
.pr-offers-row {
  position: relative;
  padding: 1.15rem 0; margin-top: 1rem;
  border-top: 1px solid var(--pr-border-light);
  border-bottom: 1px solid var(--pr-border-light);
}
.pr-offers-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.75rem; margin-bottom: 0.75rem;
}
.pr-offers-title {
  font-size: 1rem; font-weight: 650; color: var(--pr-navy);
  display: flex; align-items: center; gap: 0.4rem;
}
.pr-offers-title svg { width: 1.1rem; height: 1.1rem; color: var(--pr-orange); }
.pr-offers-see-all {
  font-size: 0.82rem; font-weight: 550; color: var(--pr-purple);
  cursor: pointer; border: none; background: none;
  display: flex; align-items: center; gap: 0.25rem;
}
.pr-offers-see-all:hover { text-decoration: underline; }
.pr-offers-see-all svg { width: 0.85rem; height: 0.85rem; }

.pr-edit-featured {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.7rem; background: var(--pr-white);
  border: 1.5px solid var(--pr-border); border-radius: 2rem;
  font-size: 0.78rem; font-weight: 550; color: var(--pr-text-2);
  cursor: pointer; transition: var(--pr-transition);
}
.pr-edit-featured:hover { border-color: var(--pr-purple); color: var(--pr-purple); background: var(--pr-purple-ghost); }
.pr-edit-featured svg { width: 0.85rem; height: 0.85rem; }

.pr-offers-scroll {
  display: flex; gap: 0.75rem; padding: 0 1.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pr-offers-scroll::-webkit-scrollbar { display: none; }

.pr-offer-card {
  flex-shrink: 0; width: 16.5rem;
  background: var(--pr-white); border: 1.5px solid var(--pr-border);
  border-radius: var(--pr-radius-lg); overflow: hidden;
  scroll-snap-align: start; transition: var(--pr-transition); cursor: pointer;
}
.pr-offer-card:hover { border-color: var(--pr-purple); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

.pr-offer-img {
  width: 100%; height: 7rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #6C5CE7, #a78bfa);
}
.pr-offer-badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  padding: 0.2rem 0.55rem; background: rgba(255,255,255,0.92);
  border-radius: 2rem; font-size: 0.7rem; font-weight: 600;
  color: var(--pr-navy); backdrop-filter: blur(8px);
}
.pr-offer-spots {
  position: absolute; top: 0.5rem; right: 0.5rem;
  padding: 0.2rem 0.55rem; background: rgba(0,0,0,0.55);
  border-radius: 2rem; font-size: 0.7rem; font-weight: 600;
  color: white; backdrop-filter: blur(4px);
}
.pr-offer-body { padding: 0.75rem 0.85rem; }
.pr-offer-title {
  font-size: 0.92rem; font-weight: 650; color: var(--pr-text); margin-bottom: 0.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-offer-desc {
  font-size: 0.78rem; color: var(--pr-text-3); margin-bottom: 0.55rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-offer-footer { display: flex; align-items: center; justify-content: space-between; }
.pr-offer-price { font-size: 1.1rem; font-weight: 700; color: var(--pr-navy); }
.pr-offer-price .currency { font-size: 0.78rem; font-weight: 500; color: var(--pr-text-3); margin-left: 0.1rem; }
.pr-offer-cta {
  padding: 0.35rem 0.8rem; background: var(--pr-purple); color: white;
  border: none; border-radius: 0.55rem;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: var(--pr-transition);
}
.pr-offer-cta:hover { background: var(--pr-purple-dark); transform: translateY(-1px); }

/* Book a Call special card */
.pr-offer-card.pr-call-card {
  background: linear-gradient(135deg, var(--pr-purple-ghost), #ede9ff);
  border-color: #d8d0ff;
}
.pr-offer-card.pr-call-card .pr-offer-img {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pr-purple), var(--pr-navy));
}
.pr-offer-card.pr-call-card .pr-offer-img svg { width: 2.5rem; height: 2.5rem; color: white; opacity: 0.6; }

@media (max-width: 767.98px) {
  .pr-offers-header, .pr-offers-scroll { padding-left: 1rem; padding-right: 1rem; }
  .pr-offer-card { width: 14.5rem; }
}

/* ── Tab Bar ── */
.pr-tabs-bar {
  position: sticky; top: 0; z-index: 50;
  padding: 6px 1.25rem;
  background: var(--pr-bg);
}
.pr-tabs-inner {
  background: var(--pr-white);
  border: 1px solid var(--pr-border);
  border-radius: 14px;
  padding: 4px 6px;
  display: flex;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pr-tabs-inner::-webkit-scrollbar { display: none; }

.pr-tab {
  flex: 1; min-width: 0;
  padding: 11px 8px 10px;
  border: none; background: transparent;
  border-radius: 10px;
  font-size: 0.93rem; font-weight: 600;
  color: var(--pr-text-3);
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.pr-tab:hover { color: var(--pr-text-2); background: var(--pr-border-light); }
.pr-tab svg { width: 17px; height: 17px; flex-shrink: 0; transition: all .2s; }

.pr-tab-label { font-size: inherit; font-weight: inherit; transition: all .2s; }

.pr-tab-count {
  font-size: 11px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--pr-border-light);
  color: var(--pr-text-3);
  transition: all .2s;
  line-height: 1.4;
}

/* Active state */
.pr-tab.active {
  color: var(--pr-purple);
  background: rgba(109, 74, 232, .07);
}
.pr-tab.active svg { color: var(--pr-purple); }
.pr-tab.active .pr-tab-count {
  background: var(--pr-purple-subtle);
  color: var(--pr-purple);
}

/* Underline indicator */
.pr-tab::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 20%; right: 20%;
  height: 2.5px;
  border-radius: 100px;
  background: var(--pr-purple);
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.pr-tab.active::after { transform: scaleX(1); }

@media (max-width: 767.98px) {
  .pr-tabs-bar { padding: 0 12px; }
  .pr-tabs-inner { border-radius: 12px; padding: 3px 4px; }

  /* Stack: icon on top, label below, count as superscript */
  .pr-tab {
    padding: 8px 4px 7px;
    flex-direction: column; gap: 2px;
  }
  .pr-tab svg { width: 20px; height: 20px; }
  .pr-tab-label { font-size: 10px; font-weight: 600; }
  .pr-tab-count {
    position: absolute; top: 4px; right: calc(50% - 18px);
    font-size: 9px; padding: 0 5px;
    min-width: 14px; height: 14px;
    border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
  }
  .pr-tab::after { left: 25%; right: 25%; bottom: 1px; height: 2px; }
}

@media (max-width: 360px) {
  .pr-tab svg { width: 18px; height: 18px; }
  .pr-tab-label { font-size: 9px; }
  .pr-tab-count { display: none; }
}

/* ── Sub-filter pills ── */
.pr-sub-filters {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.65rem 1.75rem; overflow-x: auto;
  scrollbar-width: none;
}
.pr-sub-filters::-webkit-scrollbar { display: none; }

.pr-sub-pill {
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--pr-border); border-radius: 2rem;
  font-size: 0.78rem; font-weight: 500;
  color: var(--pr-text-2); background: var(--pr-white);
  cursor: pointer; transition: var(--pr-transition);
  white-space: nowrap; flex-shrink: 0;
}
.pr-sub-pill:hover { border-color: var(--pr-purple); color: var(--pr-purple); }
.pr-sub-pill.active { background: var(--pr-purple); border-color: var(--pr-purple); color: white; font-weight: 600; }

.pr-sub-right { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

.pr-sort-pill {
  padding: 0.35rem 1.5rem 0.35rem 0.8rem;
  border: 1.5px solid var(--pr-border); border-radius: 2rem;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 0.78rem; font-weight: 500; line-height: 1.35;
  color: var(--pr-text-2); background: var(--pr-white);
  cursor: pointer; transition: var(--pr-transition);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239898AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center;
  white-space: nowrap; flex-shrink: 0;
  height: auto;
}
.pr-sort-pill:hover { border-color: var(--pr-purple); color: var(--pr-purple); }
.pr-sort-pill:focus { outline: none; border-color: var(--pr-purple); }

@media (max-width: 767.98px) {
  .pr-sub-filters { padding: 0.55rem 1rem; }
  .pr-sub-pill {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem; font-weight: 500;
    line-height: 1.2;
  }
  .pr-sub-pill {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem; font-weight: 500;
    line-height: 1.2;
  }
  .pr-sub-filters .pr-sort-pill {
    font-size: 0.75rem; font-weight: 500;
    line-height: 1.2;
    padding: 0 0.7rem; padding-right: 1.3rem;
    background-position: right 0.35rem center;
    /* Force same height as .pr-sub-pill */
    height: 26px; min-height: 0;
    box-sizing: border-box;
  }
}

/* ── Tab Panels ── */
.pr-tab-panel { display: none; }
.pr-tab-panel.active { display: block; }

/* ── Feed panel ── */
.pr-feed { padding: 1.15rem 1.75rem 3rem; display: flex; flex-direction: column; gap: 1rem; }

@media (max-width: 767.98px) {
  .pr-feed { padding: 0.85rem 1rem 9rem; }
}

/* ── Inline CTA ── */
.pr-inline-cta {
  background: linear-gradient(135deg, var(--pr-purple-ghost), #ede9ff);
  border: 1.5px dashed #cdc4ff; border-radius: var(--pr-radius-lg);
  padding: 1.15rem 1.35rem;
  display: flex; align-items: center; gap: 1rem;
}
.pr-inline-cta-icon {
  width: 3rem; height: 3rem;
  background: var(--pr-purple); border-radius: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-inline-cta-icon svg { width: 1.5rem; height: 1.5rem; color: white; }
.pr-inline-cta-text { flex: 1; }
.pr-inline-cta-text h4 { font-size: 0.95rem; font-weight: 650; color: var(--pr-navy); margin: 0 0 0.1rem; }
.pr-inline-cta-text p { font-size: 0.82rem; color: var(--pr-text-2); margin: 0; }

@media (max-width: 767.98px) {
  .pr-inline-cta { flex-direction: column; text-align: center; }
}

/* ── Courses Grid ── */
.pr-courses-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem; padding: 1.15rem 1.75rem 3rem;
}
.pr-course-card {
  background: var(--pr-white); border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg); overflow: hidden;
  transition: var(--pr-transition); cursor: pointer;
}
.pr-course-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

.pr-course-img { width: 100%; height: 8.5rem; position: relative; background-size: cover; background-position: center; }
.pr-course-img-badge {
  position: absolute; bottom: 0.5rem; left: 0.5rem;
  padding: 0.2rem 0.55rem; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); border-radius: 0.35rem;
  font-size: 0.7rem; font-weight: 600; color: white;
}
.pr-course-body { padding: 0.85rem; }
.pr-course-title {
  font-size: 0.92rem; font-weight: 650; color: var(--pr-text); margin-bottom: 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-course-meta { font-size: 0.78rem; color: var(--pr-text-3); margin-bottom: 0.5rem; }
.pr-course-footer { display: flex; align-items: center; justify-content: space-between; }
.pr-course-price { font-size: 1rem; font-weight: 700; color: var(--pr-navy); }
.pr-course-price .free { color: var(--pr-green); }
.pr-course-rating { display: flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: var(--pr-orange); font-weight: 600; }
.pr-course-rating svg { width: 0.85rem; height: 0.85rem; fill: var(--pr-orange); }

/* Challenge card variant */
.pr-course-card.pr-challenge-card .pr-course-img { background: linear-gradient(135deg, #27AE60, #2ECC71); }
.pr-course-card.pr-challenge-card .pr-course-rating { color: var(--pr-green); }

@media (max-width: 767.98px) {
  .pr-courses-grid { grid-template-columns: 1fr; padding: 0.85rem 1rem 9rem; }
}

/* ── Shop Grid ── */
.pr-shop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem; padding: 1.15rem 1.75rem 3rem;
}
.pr-shop-card {
  background: var(--pr-white); border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg); overflow: hidden;
  transition: var(--pr-transition); cursor: pointer;
}
.pr-shop-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

.pr-shop-img { width: 100%; height: 7rem; position: relative; background-size: cover; background-position: center; }
.pr-shop-type {
  position: absolute; top: 0.5rem; left: 0.5rem;
  padding: 0.18rem 0.5rem; border-radius: 0.35rem;
  font-size: 0.65rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.03em; backdrop-filter: blur(6px);
}
.pr-shop-type.offer { background: rgba(109,74,232,0.85); color: white; }
.pr-shop-type.pack { background: rgba(39,174,96,0.85); color: white; }
.pr-shop-type.product { background: rgba(231,76,60,0.85); color: white; }

.pr-shop-body { padding: 0.7rem 0.8rem; }
.pr-shop-title { font-size: 0.85rem; font-weight: 600; color: var(--pr-text); margin-bottom: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-shop-desc { font-size: 0.72rem; color: var(--pr-text-3); margin-bottom: 0.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-shop-footer { display: flex; align-items: center; justify-content: space-between; }
.pr-shop-price { font-size: 0.95rem; font-weight: 700; color: var(--pr-navy); }
.pr-shop-price span { font-size: 0.72rem; color: var(--pr-text-3); font-weight: 500; }
.pr-shop-cta {
  padding: 0.3rem 0.65rem; background: var(--pr-purple); color: white;
  border: none; border-radius: 0.45rem;
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: var(--pr-transition);
}
.pr-shop-cta:hover { background: var(--pr-purple-dark); }

@media (max-width: 767.98px) {
  .pr-shop-grid { grid-template-columns: repeat(2, 1fr); padding: 0.85rem 1rem 9rem; gap: 0.65rem; }
}

/* ── Community Panel ── */
.pr-community { padding: 0.5rem 0 3rem; }
.pr-community-desc {
  padding: 0.65rem 1.75rem; margin-bottom: 0.25rem;
  font-size: 0.9rem; color: var(--pr-text-2); line-height: 1.55;
}
.pr-community-section { padding: 0 1.75rem; }
.pr-community-section-title {
  font-size: 0.78rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--pr-text-3); padding: 0.85rem 0 0.5rem;
  display: flex; align-items: center; gap: 0.35rem;
}
.pr-community-section-title svg { width: 0.95rem; height: 0.95rem; }

/* Event cards */
.pr-event-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem; background: var(--pr-white);
  border: 1px solid var(--pr-border); border-radius: var(--pr-radius-lg);
  margin-bottom: 0.65rem; transition: var(--pr-transition); cursor: pointer;
}
.pr-event-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-color: var(--pr-purple); color: inherit; }

.pr-event-date {
  width: 3.5rem; height: 3.5rem;
  background: var(--pr-purple-subtle); border-radius: var(--pr-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-event-date-month { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pr-purple); line-height: 1; }
.pr-event-date-day { font-size: 1.25rem; font-weight: 800; color: var(--pr-navy); line-height: 1.2; }

.pr-event-info { flex: 1; min-width: 0; }
.pr-event-title { font-size: 0.92rem; font-weight: 650; color: var(--pr-text); margin-bottom: 0.1rem; }
.pr-event-meta { font-size: 0.78rem; color: var(--pr-text-3); display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.pr-event-meta svg { width: 0.85rem; height: 0.85rem; }

.pr-event-type-badge {
  padding: 0.15rem 0.45rem; border-radius: 0.35rem;
  font-size: 0.65rem; font-weight: 650;
}
.pr-event-type-badge.live { background: #FEE2E2; color: #DC2626; }
.pr-event-type-badge.free { background: #E8F5E9; color: #27AE60; }
.pr-event-type-badge.workshop { background: #DBEAFE; color: #2563EB; }

.pr-event-cta {
  padding: 0.4rem 0.85rem; background: var(--pr-purple); color: white;
  border: none; border-radius: 0.55rem;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: var(--pr-transition); flex-shrink: 0;
}
.pr-event-cta:hover { background: var(--pr-purple-dark); }

@media (max-width: 767.98px) {
  .pr-community-section { padding: 0 1rem; }
  .pr-community { padding: 0.5rem 0 9rem; }
  .pr-event-card { gap: 0.65rem; }
  .pr-event-date { width: 3rem; height: 3rem; }
  .pr-event-date-day { font-size: 1.05rem; }
  .pr-event-cta { padding: 0.35rem 0.65rem; font-size: 0.72rem; }
}

/* Channel cards */
.pr-channels-row { padding: 0 1.75rem; margin-bottom: 0.25rem; }
.pr-channels-scroll {
  display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 0.25rem;
}
.pr-channels-scroll::-webkit-scrollbar { display: none; }

.pr-channel-card {
  flex-shrink: 0; width: 9.5rem; height: 5.5rem;
  border-radius: var(--pr-radius); overflow: hidden;
  position: relative; cursor: pointer; scroll-snap-align: start;
  transition: var(--pr-transition); border: 2px solid transparent;
}
.pr-channel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.pr-channel-card.active { border-color: var(--pr-purple); box-shadow: 0 0 0 2px rgba(109,74,232,0.2); }

.pr-channel-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pr-channel-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15));
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0.5rem 0.6rem;
}
.pr-channel-card-title {
  font-size: 0.78rem; font-weight: 650; color: white; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-channel-card-count { font-size: 0.65rem; color: rgba(255,255,255,0.7); font-weight: 500; margin-top: 0.1rem; }

.pr-channel-all {
  flex-shrink: 0; width: 9.5rem; height: 5.5rem;
  border-radius: var(--pr-radius); border: 1.5px dashed var(--pr-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  cursor: pointer; transition: var(--pr-transition); background: var(--pr-white); scroll-snap-align: start;
}
.pr-channel-all:hover { border-color: var(--pr-purple); background: var(--pr-purple-ghost); }
.pr-channel-all svg { width: 1.15rem; height: 1.15rem; color: var(--pr-text-3); }
.pr-channel-all span { font-size: 0.75rem; font-weight: 550; color: var(--pr-text-3); }
.pr-channel-all.active { border-color: var(--pr-purple); background: var(--pr-purple-subtle); border-style: solid; }
.pr-channel-all.active svg, .pr-channel-all.active span { color: var(--pr-purple); }

@media (max-width: 767.98px) {
  .pr-channels-row { padding: 0 1rem; }
  .pr-channel-card { width: 8rem; height: 4.75rem; }
  .pr-channel-all { width: 8rem; height: 4.75rem; }
}

/* Discussion cards */
.pr-discussion-card {
  padding: 0.85rem; background: var(--pr-white);
  border: 1px solid var(--pr-border); border-radius: var(--pr-radius-lg);
  margin-bottom: 0.65rem; transition: var(--pr-transition); cursor: pointer;
  display: block; color: inherit;
}
.pr-discussion-card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-color: var(--pr-purple); color: inherit; }

.pr-discussion-header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; }
.pr-discussion-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--pr-purple), var(--pr-purple-light));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 0.72rem; flex-shrink: 0;
  overflow: hidden;
}
.pr-discussion-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-discussion-author { font-size: 0.82rem; font-weight: 600; }
.pr-discussion-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  font-size: 0.65rem; font-weight: 600;
  background: var(--pr-purple-subtle); color: var(--pr-purple);
}
.pr-discussion-time { font-size: 0.72rem; color: var(--pr-text-3); margin-left: auto; }
.pr-discussion-title { font-size: 0.92rem; font-weight: 600; color: var(--pr-text); margin-bottom: 0.2rem; }
.pr-discussion-preview {
  font-size: 0.82rem; color: var(--pr-text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-discussion-footer {
  display: flex; align-items: center; gap: 0.85rem; margin-top: 0.55rem;
  padding-top: 0.45rem; border-top: 1px solid var(--pr-border-light);
}
.pr-discussion-stat {
  display: flex; align-items: center; gap: 0.2rem;
  font-size: 0.75rem; color: var(--pr-text-3);
}
.pr-discussion-stat svg { width: 0.85rem; height: 0.85rem; }

/* ── Mobile Subscribe Bar ── */
.pr-subscribe-bar {
  display: none; position: fixed;
  bottom: 3.75rem; left: 0; right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--pr-border);
  padding: 0.55rem 1rem; z-index: 90;
  align-items: center; gap: 0.65rem;
}
.pr-subscribe-bar-avatar {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--pr-purple), var(--pr-purple-light));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 0.8rem; flex-shrink: 0;
  overflow: hidden;
}
.pr-subscribe-bar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-subscribe-bar-name { flex: 1; font-weight: 600; font-size: 0.88rem; }
.pr-subscribe-bar .pr-btn { font-size: 0.82rem; padding: 0.45rem 0.95rem; }

@media (max-width: 767.98px) {
  .pr-subscribe-bar { display: flex; }
}

/* ── Featured Offers Modal ── */
.pr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 1050; display: none;
  align-items: center; justify-content: center; padding: 1.5rem;
}
.pr-modal-overlay.open { display: flex; }

.pr-modal {
  background: var(--pr-white); border-radius: var(--pr-radius-xl);
  width: 100%; max-width: 38rem; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: prModalIn 0.25s ease both;
}
@keyframes prModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pr-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--pr-border);
}
.pr-modal-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--pr-navy); margin: 0; }
.pr-modal-header p { font-size: 0.82rem; color: var(--pr-text-3); margin: 0.1rem 0 0; }

.pr-modal-close {
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
  border: none; background: var(--pr-bg); color: var(--pr-text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--pr-transition); flex-shrink: 0;
}
.pr-modal-close:hover { background: var(--pr-purple-subtle); color: var(--pr-purple); }
.pr-modal-close svg { width: 1.15rem; height: 1.15rem; }

.pr-modal-body { flex: 1; overflow-y: auto; padding: 0.5rem 1.5rem; }

.pr-modal-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--pr-border-light);
  cursor: pointer; transition: var(--pr-transition);
}
.pr-modal-item:last-child { border-bottom: none; }

.pr-modal-item-thumb {
  width: 2.75rem; height: 2.75rem; border-radius: 0.55rem;
  flex-shrink: 0; background: var(--pr-border-light);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pr-modal-item-thumb svg { width: 1.15rem; height: 1.15rem; color: white; opacity: 0.8; }

.pr-modal-item-info { flex: 1; min-width: 0; }
.pr-modal-item-name { font-size: 0.88rem; font-weight: 600; color: var(--pr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-modal-item-meta { font-size: 0.75rem; color: var(--pr-text-3); display: flex; align-items: center; gap: 0.4rem; }
.pr-modal-item-type {
  padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  font-size: 0.65rem; font-weight: 600;
  background: var(--pr-purple-subtle); color: var(--pr-purple);
}
.pr-modal-item-price { font-size: 0.85rem; font-weight: 600; color: var(--pr-navy); white-space: nowrap; flex-shrink: 0; }

/* Toggle switch */
.pr-toggle { position: relative; width: 2.65rem; height: 1.5rem; flex-shrink: 0; }
.pr-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.pr-toggle-track {
  position: absolute; inset: 0; background: var(--pr-border); border-radius: 1rem;
  cursor: pointer; transition: var(--pr-transition);
}
.pr-toggle-track::after {
  content: ''; position: absolute; top: 0.18rem; left: 0.18rem;
  width: 1.14rem; height: 1.14rem; background: white;
  border-radius: 50%; transition: var(--pr-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pr-toggle input:checked + .pr-toggle-track { background: var(--pr-purple); }
.pr-toggle input:checked + .pr-toggle-track::after { transform: translateX(1.15rem); }

.pr-modal-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--pr-border);
  display: flex; align-items: center; justify-content: space-between;
}
.pr-modal-footer-count { font-size: 0.85rem; color: var(--pr-text-3); }
.pr-modal-footer-count strong { color: var(--pr-purple); font-weight: 600; }
.pr-modal-footer-actions { display: flex; gap: 0.5rem; }

@media (max-width: 767.98px) {
  .pr-modal { max-width: 100%; max-height: 85vh; border-radius: var(--pr-radius-xl) var(--pr-radius-xl) 0 0; margin-top: auto; margin-bottom: 3.75rem; }
  .pr-modal-overlay { align-items: flex-end; padding: 0; }
}

/* ── Empty States ── */
.pr-empty {
  text-align: center; padding: 3rem 1rem;
}
.pr-empty-icon {
  width: 4rem; height: 4rem; margin: 0 auto 0.75rem;
  background: var(--pr-purple-subtle); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pr-empty-icon svg { width: 2rem; height: 2rem; color: var(--pr-purple); opacity: 0.6; }
.pr-empty h3 { font-size: 1.05rem; font-weight: 650; color: var(--pr-navy); margin-bottom: 0.25rem; }
.pr-empty p { font-size: 0.88rem; color: var(--pr-text-3); max-width: 22rem; margin: 0 auto; }

/* ── Animations ── */
@keyframes prFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pr-hero-body { animation: prFadeUp 0.45s ease both; }
.pr-offers-row { animation: prFadeUp 0.45s ease 0.08s both; }
.pr-tabs-bar { animation: prFadeUp 0.45s ease 0.12s both; }

/* ── Owner Manage Button ── */
.pr-manage-icon { display: none; }
.pr-manage-short { display: none; }

@media (max-width: 767.98px) {
  /* Manage button on mobile — show icon + short label */
  .pr-btn.pr-btn-manage {
    padding: calc(0.57rem - 1.5px) 0.85rem;
    background: var(--pr-white); color: var(--pr-text-2);
    border: 1.5px solid var(--pr-border); font-size: 0.82rem;
  }
  .pr-btn.pr-btn-manage:hover { border-color: var(--pr-purple); color: var(--pr-purple); background: var(--pr-purple-ghost); }
  .pr-manage-icon { display: block; width: 0.9rem; height: 0.9rem; }
  .pr-manage-text { display: none; }
  .pr-manage-short { display: inline; }

  /* Bio expandable → includes meta-row on mobile */
  .pr-about--has-bio .pr-meta-row { display: none; }
  .pr-about--has-bio .pr-bio-wrap.expanded ~ .pr-meta-row {
    display: flex; flex-wrap: wrap;
  }
}

/* ── RTL Support ── */
:where([dir="rtl"]) .pr-page,
:where([dir="rtl"]) .pr-about,
:where([dir="rtl"]) .pr-offers-header,
:where([dir="rtl"]) .pr-community-section {
  font-family: 'Cairo', 'Outfit',system-ui,-apple-system,sans-serif;
}
:where([dir="rtl"]) .pr-hero-body { flex-direction: row-reverse; }
:where([dir="rtl"]) .pr-hero-info { flex-direction: row-reverse; }
:where([dir="rtl"]) .pr-stats { margin-left: 0; margin-right: auto; }
:where([dir="rtl"]) .pr-sub-right { margin-left: 0; margin-right: auto; }
:where([dir="rtl"]) .pr-discussion-time { margin-left: 0; margin-right: auto; }
:where([dir="rtl"]) .pr-bio-wrap:not(.expanded) .pr-bio-toggle {
  right: auto; left: 0;
  background: linear-gradient(to left, transparent, var(--pr-bg) 40%);
  padding-left: 0; padding-right: 2.5rem;
}
:where([dir="rtl"]) .pr-bio-wrap.expanded .pr-bio-toggle { margin-left: 0; margin-right: 0.25rem; }
:where([dir="rtl"]) .pr-cover-ctas { right: auto; left: 0.85rem; }
:where([dir="rtl"]) .pr-cover-more { right: auto; left: 0.6rem; }
:where([dir="rtl"]) .pr-avatar-edit { left: auto; right: 0.35rem; }

@media (max-width: 767.98px) {
  :where([dir="rtl"]) .pr-hero-body { flex-direction: row-reverse; }
  :where([dir="rtl"]) .pr-hero-info { flex-direction: column; align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   Community Gateway / Storefront (tab-community)
   Matches community-tab.html template
   ═══════════════════════════════════════════════════════════ */

.cg { padding-bottom: 2rem; }

/* ── Section Label ── */
.cg-section-label {
  font-size: 0.78rem; font-weight: 700; color: var(--pr-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.4rem;
}
.cg-section-label svg { width: 1rem; height: 1rem; }

/* ── Recent Activity Card ── */
.cg-activity-card {
  background: var(--pr-white); border: 1px solid var(--pr-border);
  border-radius: 1rem; overflow: hidden; margin-bottom: 1.5rem;
}
.cg-act-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--pr-border);
  text-decoration: none; color: inherit;
  transition: background 0.12s;
  cursor: pointer;
}
.cg-act-item:last-child { border-bottom: none; }
.cg-act-item:hover { background: var(--pr-bg); text-decoration: none; color: inherit; }
.cg-act-av { width: 2.15rem; height: 2.15rem; border-radius: 0.55rem; overflow: hidden; flex-shrink: 0; }
.cg-act-av img { width: 100%; height: 100%; object-fit: cover; }
.cg-act-ch-icon {
  width: 1.55rem; height: 1.55rem; border-radius: 0.4rem;
  background: var(--pr-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cg-act-ch-icon svg { width: 0.85rem; height: 0.85rem; color: var(--pr-text-3); }
.cg-act-info { flex: 1; min-width: 0; }
.cg-act-text {
  font-size: 0.92rem; color: var(--pr-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cg-act-text strong { color: var(--pr-text); font-weight: 600; }
.cg-act-chan { color: var(--pr-purple); font-weight: 600; }
.cg-act-time { font-size: 0.78rem; color: var(--pr-text-3); flex-shrink: 0; white-space: nowrap; }

/* ── Space Cards ── */
.cg-spaces { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; }

.cg-sc {
  background: var(--pr-white); border: 1px solid var(--pr-border);
  border-radius: 1.15rem; overflow: hidden;
  transition: all 0.2s; cursor: default;
}
.cg-sc:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); border-color: var(--pr-border); }

/* Cover */
.cg-sc-cover { height: 7.15rem; position: relative; overflow: hidden; }
.cg-sc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.cg-sc:hover .cg-sc-cover img { transform: scale(1.03); }
.cg-sc-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 60%); }
.cg-sc-badges { position: absolute; top: 0.7rem; right: 0.7rem; display: flex; gap: 0.3rem; z-index: 1; }
[dir="rtl"] .cg-sc-badges { right: auto; left: 0.7rem; }
.cg-sc-badge {
  padding: 0.2rem 0.65rem; border-radius: 0.4rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cg-sc-badge.premium { background: rgba(109,74,232,0.7); color: #fff; }
.cg-sc-badge.free { background: rgba(255,255,255,0.2); color: #fff; }
.cg-sc-online {
  position: absolute; bottom: 0.7rem; right: 0.85rem; z-index: 1;
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; color: #fff;
}
[dir="rtl"] .cg-sc-online { right: auto; left: 0.85rem; }
.cg-sc-online::before { content: ''; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--pr-green); box-shadow: 0 0 6px rgba(15,153,96,0.5); }

/* Body */
.cg-sc-body { padding: 1.15rem 1.3rem; }
.cg-sc-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.7rem; }
.cg-sc-icon {
  width: 3rem; height: 3rem; border-radius: 0.85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: -2.15rem; border: 3px solid var(--pr-white);
  position: relative; z-index: 2;
}
.cg-sc-icon svg { width: 1.4rem; height: 1.4rem; }
.cg-sc-icon.purple { background: var(--pr-purple); color: #fff; box-shadow: 0 2px 8px rgba(109,74,232,0.25); }
.cg-sc-icon.blue { background: #3B82F6; color: #fff; box-shadow: 0 2px 8px rgba(59,130,246,0.25); }
.cg-sc-icon.green { background: #0F9960; color: #fff; box-shadow: 0 2px 8px rgba(15,153,96,0.25); }
.cg-sc-info { flex: 1; min-width: 0; }
.cg-sc-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.cg-sc-desc {
  font-size: 0.9rem; color: var(--pr-text-3); line-height: 1.4; margin-top: 0.15rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stats */
.cg-sc-stats { display: flex; gap: 1rem; margin-bottom: 0.85rem; }
.cg-sc-stat { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--pr-text-3); }
.cg-sc-stat svg { width: 1rem; height: 1rem; }
.cg-sc-stat strong { color: var(--pr-text-2); }

/* Channel chips */
.cg-sc-channels { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.cg-sc-ch {
  padding: 0.35rem 0.85rem; border-radius: 0.55rem;
  background: var(--pr-bg); font-size: 0.85rem; font-weight: 500;
  color: var(--pr-text-2); display: flex; align-items: center; gap: 0.3rem;
}
.cg-sc-ch svg { width: 0.85rem; height: 0.85rem; color: var(--pr-text-3); }
.cg-sc-ch.active::before { content: ''; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--pr-green); }

/* CTA button */
.cg-sc-cta {
  width: 100%; padding: 0.7rem; border-radius: 0.7rem; border: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.92rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  text-decoration: none;
}
.cg-sc-cta svg { width: 1.05rem; height: 1.05rem; }
.cg-sc-cta.enter { background: var(--pr-purple); color: #fff; box-shadow: 0 2px 10px rgba(109,74,232,0.2); }
.cg-sc-cta.enter:hover { background: #5B38D6; color: #fff; text-decoration: none; }
.cg-sc-cta.locked { background: var(--pr-bg); color: var(--pr-text-3); border: 1.5px solid var(--pr-border); }
.cg-sc-cta.locked:hover { border-color: var(--pr-purple); color: var(--pr-purple); }

/* Locked state */
.cg-sc-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem 1rem; text-align: center;
}
.cg-sc-locked-icon {
  width: 3.4rem; height: 3.4rem; border-radius: 1rem;
  background: var(--pr-bg); border: 1px solid var(--pr-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem;
}
.cg-sc-locked-icon svg { width: 1.55rem; height: 1.55rem; color: var(--pr-text-3); }
.cg-sc-locked-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.cg-sc-locked-text { font-size: 0.9rem; color: var(--pr-text-3); max-width: 18.5rem; line-height: 1.5; }

/* ── Empty ── */
.cg-empty {
  text-align: center; padding: 2.5rem 1rem;
  background: var(--pr-white); border: 1px solid var(--pr-border);
  border-radius: 1rem;
}
.cg-empty svg { width: 2.5rem; height: 2.5rem; color: var(--pr-text-3); opacity: 0.4; margin-bottom: 0.5rem; }
.cg-empty h3 { font-size: 0.95rem; font-weight: 700; color: var(--pr-text-2); margin-bottom: 0.15rem; }
.cg-empty p { font-size: 0.85rem; color: var(--pr-text-3); margin: 0; }

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .cg-sc-stats { flex-wrap: wrap; gap: 0.55rem; }
  .cg-sc-channels { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cg-sc-channels::-webkit-scrollbar { display: none; }
  .cg-sc-ch { flex-shrink: 0; }
}

/* ── RTL ── */
[dir="rtl"] .cg { font-family: 'Cairo', 'Outfit', system-ui, -apple-system, sans-serif; }
[dir="rtl"] .cg-sc-cta svg { transform: scaleX(-1); }

/* ── Upcoming Events ── */
.cg-section-see-all {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pr-accent, #6D4AE8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  text-transform: none;
  letter-spacing: 0;
}
.cg-section-see-all:hover { opacity: 0.8; }
[dir="rtl"] .cg-section-see-all { margin-left: 0; margin-right: auto; }
[dir="rtl"] .cg-section-see-all svg { transform: scaleX(-1); }

.cg-events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.cg-ev-card {
  background: var(--pr-white);
  border: 1px solid var(--pr-border);
  border-radius: 0.85rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.cg-ev-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.cg-ev-cover {
  height: 8.5rem;
  background: linear-gradient(135deg, var(--pr-accent, #6D4AE8)22, var(--pr-accent, #6D4AE8)44);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cg-ev-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.25) 0%, transparent 50%);
}
.cg-ev-type-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.cg-ev-type-badge.online { background: rgba(0,123,255,0.8); }
.cg-ev-type-badge.in_person { background: rgba(40,167,69,0.8); }
.cg-ev-type-badge.hybrid { background: rgba(111,66,193,0.8); }

.cg-ev-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cg-ev-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pr-accent, #6D4AE8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.cg-ev-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pr-text-1, #1a1a26);
  margin-bottom: 0.25rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cg-ev-desc {
  font-size: 0.78rem;
  color: var(--pr-text-3, #6c757d);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cg-ev-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--pr-border, #f0f0f0);
}
.cg-ev-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pr-text-1, #272567);
}
.cg-ev-price.free {
  color: #28a745;
}
.cg-ev-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.45rem;
  font-weight: 600;
  font-size: 0.7rem;
  color: #fff;
  background: var(--pr-accent, #6D4AE8);
}

@media (max-width: 767.98px) {
  .cg-events { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cg-events { grid-template-columns: repeat(2, 1fr); }
}

/* Dark mode — Events */
.dark-mode .cg-ev-card { background: var(--pr-white); border-color: var(--pr-border); }
.dark-mode .cg-ev-title { color: var(--pr-text-1); }
.dark-mode .cg-ev-price { color: var(--pr-text-1); }

/* Reels preview strip (Feed tab — All) */
.pr-reels-preview { width: 100%; }
.pr-reels-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6rem; padding: 0 0.15rem;
}
.pr-reels-preview-title {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: 0.95rem; color: var(--pr-text);
}
.pr-reels-preview-title svg { width: 18px; height: 18px; }
.pr-reels-preview-all {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.85rem; font-weight: 500; color: var(--pr-purple, #6C5CE7);
  text-decoration: none;
}
.pr-reels-preview-all:hover { text-decoration: underline; }
.pr-reels-preview-all svg { width: 14px; height: 14px; }

.pr-reels-preview-track {
  display: flex; gap: 0.6rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.pr-reels-preview-track::-webkit-scrollbar { height: 6px; }
.pr-reels-preview-track::-webkit-scrollbar-thumb { background: var(--pr-border); border-radius: 3px; }

.pr-reel-card {
  position: relative; flex: 0 0 auto;
  width: 130px; height: 200px;
  border-radius: var(--pr-radius);
  overflow: hidden; background: #000;
  scroll-snap-align: start;
  display: block; text-decoration: none;
  transition: transform 0.15s ease;
}
.pr-reel-card:hover { transform: translateY(-2px); text-decoration: none; }
.pr-reel-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pr-reel-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.pr-reel-card-lock {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  border-radius: 50%; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pr-reel-card-lock svg { width: 12px; height: 12px; }
.pr-reel-card-meta {
  position: absolute; bottom: 6px; left: 8px;
  color: #fff; font-size: 0.75rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pr-reel-card-meta svg { width: 12px; height: 12px; }

.dark-mode .pr-reels-preview-title { color: var(--pr-text-1); }
.dark-mode .pr-reels-preview-track::-webkit-scrollbar-thumb { background: var(--pr-border); }