/* =========================================================
   Paycall.me – Public Creator Profile

   Conversion-first hero: the rate card is the anchor, identity
   supports it, imagery backs it up. Layout is pure CSS, so the
   prerendered HTML already has the right layout before React
   hydrates (no mobile/desktop flash).
   ========================================================= */

.pcp {
  --pcp-surface: #ffffff;
  --pcp-surface-2: #fafafc;
  --pcp-border: #ececf1;
  --pcp-radius: 20px;
  --pcp-radius-sm: 12px;
  --pcp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);

  display: block;
  /* The app header is position:fixed (116px on desktop, 69px below 992px)
     while .content only pads 40px, so the card needs its own clearance or
     its top edge disappears behind the header. */
  margin-top: 32px;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------
   Hero card
   --------------------------------------------------------- */
.pcp-hero {
  background: var(--pcp-surface);
  border: 1px solid var(--pcp-border);
  border-radius: var(--pcp-radius);
  box-shadow: var(--pcp-shadow);
  padding: 28px;
}

/* The text column is capped at a readable measure so a short bio does not sit
   in a 700px void, while the offer card keeps a fixed, generous width. */
.pcp-hero-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 360px;
  grid-template-areas:
    "avatar head     offer"
    "avatar details  offer"
    "gallery gallery offer";
  grid-template-rows: auto auto 1fr;
  column-gap: 28px;
  row-gap: 16px;
  align-items: start;
}

.pcp-avatar { grid-area: avatar; }
.pcp-head { grid-area: head; max-width: 62ch; }
.pcp-details { grid-area: details; max-width: 62ch; }
.pcp-offer { grid-area: offer; }
.pcp-gallery { grid-area: gallery; }

/* ---------------------------------------------------------
   Avatar
   --------------------------------------------------------- */
.pcp-avatar {
  position: relative;
  width: 216px;
  height: 216px;
  border-radius: var(--pcp-radius);
  overflow: hidden;
  background: var(--pcp-surface-2);
  flex: none;
}

.pcp-avatar img,
.pcp-avatar .optimized-image,
.pcp-avatar .optimized-image-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pcp-avatar-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  z-index: 1;
}

.pcp-avatar-zoom:focus-visible {
  outline: 2px solid var(--pc-primary);
  outline-offset: -3px;
}

/* Favourite and share live on the picture as utility icons. In the detail
   column they had the same tinted-pill shape as the topic tags and the
   verification chips, so an action looked like a label. */
.pcp-avatar-actions {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcp-avatar-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2430;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: transform 0.15s ease, color 0.15s ease;
}

.pcp-avatar-btn:hover { transform: scale(1.08); color: var(--pc-primary); }
.pcp-avatar-btn[aria-pressed="true"] { color: var(--pc-primary); }
.pcp-avatar-btn:disabled { opacity: 0.6; cursor: default; }
.pcp-avatar-btn:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

/* On your own profile, sharing the link is the action the business runs on,
   so it gets a real button next to the name instead of a quiet chip at the
   bottom of the column. */
.pcp-share-own {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pc-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--pc-primary-rgb), 0.3);
  transition: background 0.18s ease;
}

.pcp-share-own:hover { background: var(--pc-primary-hover); }
.pcp-share-own:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }

/* ---------------------------------------------------------
   Head — name, badges, status, tagline
   --------------------------------------------------------- */
.pcp-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.pcp-name {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--pc-ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.pcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  user-select: none;
}

.pcp-badge i { font-size: 10px; }
.pcp-badge--creator { background: var(--pc-gradient); }
.pcp-badge--select { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }

.pcp-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.pcp-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #6b6b76;
  background: #f4f4f7;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  text-decoration: none;
}

a.pcp-status:hover { background: #ececf1; color: #4b4b56; }

.pcp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: #c2c2cc;
}

.pcp-status-dot--online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.pcp-status-dot--unclaimed { background: var(--pc-warning); }

.pcp-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-ink);
}

.pcp-rating i { color: #f59e0b; font-size: 12px; }
.pcp-rating-count { color: var(--pc-muted); font-weight: 500; }

.pcp-tagline {
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Details — tags, meta, countries, verification, socials
   --------------------------------------------------------- */
.pcp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.pcp-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-primary);
  background: var(--pc-tint);
  border: 1px solid var(--pc-tint-border);
  border-radius: 999px;
  padding: 4px 11px;
}

.pcp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pcp-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--pc-muted);
}

.pcp-meta i { color: var(--pc-primary); font-size: 13px; width: 14px; text-align: center; }

/* Country chips — a flag + name pill each, so several countries wrap like the
   tag row instead of breaking the meta line apart. */
.pcp-places {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.pcp-place {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #4b5563;
  background: #f4f4f7;
  border: 1px solid var(--pcp-border);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  white-space: nowrap;
}

.pcp-place img {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: #fff;
}

.pcp-verify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.pcp-verify-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1f7a3f;
  background: #e9f7ee;
  border: 1px solid #bfe6cc;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  text-decoration: none;
}

a.pcp-verify-chip:hover { background: #ddf2e5; color: #1f7a3f; }
.pcp-verify-chip-check { font-size: 10px; color: #22c55e; }

/* Social media strip (rendered by the shared social-links component) */
.pcp-socials { margin-top: 14px; }

.pcp-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-primary);
  background: var(--pc-tint);
  border: 1px solid var(--pc-tint-border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pcp-ghost-btn:hover { background: var(--pc-tint-2); color: var(--pc-primary); }

.pcp-ghost-btn--muted {
  color: #5b5b66;
  background: #f4f4f7;
  border-color: var(--pcp-border);
}

.pcp-ghost-btn--muted:hover { background: #ececf1; color: #3b3b46; }

/* ---------------------------------------------------------
   Offer card — the anchor of the page
   --------------------------------------------------------- */
.pcp-offer {
  border: 1px solid var(--pcp-border);
  border-radius: 16px;
  background: var(--pcp-surface-2);
  padding: 20px;
  min-width: 0;
  position: sticky;
  top: 90px;
}

.pcp-offer-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-muted);
  margin: 0 0 10px;
}

/* Free offers announce themselves without competing with the primary CTA */
.pcp-offer-flagstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 16px;
  padding: 9px 12px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #854d0e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.pcp-offer-flagstrip:hover { background: #fef3c7; }
.pcp-offer-flagstrip i { color: #d97706; }

.pcp-offer-flagcount {
  margin-left: auto;
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
}

/* Rate list */
.pcp-rates {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border: 1px solid var(--pcp-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.pcp-rate-item + .pcp-rate-item { border-top: 1px solid var(--pcp-border); }

.pcp-rate {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pcp-rate:hover { background: var(--pc-tint); }
.pcp-rate:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: -2px; }

.pcp-rate-icon {
  color: var(--pc-primary);
  font-size: 13px;
  text-align: center;
}

.pcp-rate-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--pc-ink);
}

.pcp-rate-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--pc-primary);
  white-space: nowrap;
  text-align: right;
}

.pcp-rate-unit {
  grid-column: 3;
  font-size: 11px;
  color: var(--pc-muted);
  text-align: right;
  white-space: nowrap;
}

.pcp-rate--disabled { cursor: not-allowed; }
.pcp-rate--disabled .pcp-rate-icon,
.pcp-rate--disabled .pcp-rate-label,
.pcp-rate--disabled .pcp-rate-price { color: #a8a8b4; }
.pcp-rate--disabled:hover { background: transparent; }

/* CTA stack */
.pcp-cta { display: flex; flex-direction: column; gap: 10px; }

.pcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
}

.pcp-btn:focus-visible { outline: 2px solid var(--pc-primary); outline-offset: 2px; }
.pcp-btn:active { transform: translateY(1px); }

/* The one action the page is built around */
.pcp-btn--lg {
  min-height: 54px;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.pcp-btn--primary {
  background: var(--pc-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--pc-primary-rgb), 0.3);
}

.pcp-btn--primary:hover { background: var(--pc-primary-hover); color: #fff; }

.pcp-btn--outline {
  background: #fff;
  color: var(--pc-primary);
  border-color: var(--pc-primary);
}

.pcp-btn--outline:hover { background: var(--pc-tint); color: var(--pc-primary); }

.pcp-btn[aria-disabled="true"],
.pcp-btn:disabled {
  background: #f1f1f5;
  border-color: #e2e2ea;
  color: #a8a8b4;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Tertiary actions read as links, not as more buttons */
.pcp-offer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 14px;
}

.pcp-textlink {
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-muted);
  cursor: pointer;
  text-decoration: none;
}

.pcp-textlink:hover { color: var(--pc-primary); text-decoration: underline; }
.pcp-textlink:disabled { color: #b8b8c2; cursor: not-allowed; text-decoration: none; }

.pcp-textlink:focus-visible {
  outline: 2px solid var(--pc-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------
   More-options menu
   --------------------------------------------------------- */
.pcp-more { position: relative; display: inline-block; }

.pcp-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--pcp-border);
  border-radius: var(--pcp-radius-sm);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  z-index: 60;
  padding: 4px;
}

.pcp-more-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  color: #3b3b46;
  cursor: pointer;
  text-align: left;
}

.pcp-more-item:hover { background: var(--pcp-surface-2); }
.pcp-more-item:disabled { opacity: 0.6; cursor: default; }
.pcp-more-item i { width: 15px; font-size: 13px; }
.pcp-more-item--danger { color: var(--pc-danger); }
.pcp-more-item--fav { color: var(--pc-primary); }

/* ---------------------------------------------------------
   Verification gate / nudge
   --------------------------------------------------------- */
.pcp-gate {
  background: var(--pc-tint-soft);
  border: 1px dashed var(--pc-tint-border-2);
  border-radius: var(--pcp-radius-sm);
  padding: 16px;
  text-align: center;
}

.pcp-gate-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--pc-primary);
  margin-bottom: 4px;
}

.pcp-gate-text { font-size: 13px; color: #6b6b76; line-height: 1.5; }

.pcp-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--pc-tint-soft);
  border: 1px solid var(--pc-tint-border);
  color: var(--pc-primary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.pcp-nudge:hover { background: var(--pc-tint-2); color: var(--pc-primary); }

/* ---------------------------------------------------------
   Notice (unclaimed profile)
   --------------------------------------------------------- */
.pcp-notice {
  margin-top: 4px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--pcp-radius-sm);
  padding: 16px;
  color: #854d0e;
  font-size: 14px;
  line-height: 1.6;
}

.pcp-notice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 6px;
}

.pcp-notice-box {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 13px;
}

.pcp-notice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pcp-notice-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--pc-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.pcp-notice-link:hover { color: #fff; opacity: 0.92; }

.pcp-notice-vote {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(180, 83, 9, 0.22);
  text-align: center;
}

.pcp-notice-vote .pcp-btn { max-width: 420px; margin: 0 auto; }

.pcp-notice-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.pcp-notice-count i { color: var(--pc-primary); }

/* ---------------------------------------------------------
   Gallery — visual proof, not a 98px strip

   UserGallery ships its own <style> sized for the old 150px sidebar
   (fixed width, three columns, 3px gaps). Two-class selectors beat it
   regardless of which stylesheet loads last.
   --------------------------------------------------------- */
.pcp-gallery {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--pcp-border);
}

/* Nothing to show: UserGallery renders its own "No Media" placeholder, which
   has no business taking up a whole section on a public profile. */
.pcp-gallery:not(:has(.user-gallery-grid)) { display: none; }

.pcp-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.pcp-gallery-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-ink);
  margin: 0;
}

.pcp-gallery .user-gallery-grid {
  width: auto;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-gap: 10px;
}

.pcp-gallery .gallery-item { border-radius: 10px; }

/* ---------------------------------------------------------
   Sticky mobile action bar

   Guests have no bottom nav, so the bar sits on the screen edge.
   Logged-in phones get .mobile-bottom-nav (60px, body.has-bottom-nav);
   only then does the bar move up so it stacks on that nav.
   --------------------------------------------------------- */
.pcp-bottombar {
  --pcp-bottomnav: 0px;

  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--pcp-bottomnav);
  z-index: 1029;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--pcp-border);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

body.has-bottom-nav .pcp-bottombar {
  --pcp-bottomnav: 60px;
  padding-bottom: 10px;
}

.pcp-bottombar-price { min-width: 0; line-height: 1.15; }

.pcp-bottombar-amount {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--pc-primary);
  white-space: nowrap;
}

.pcp-bottombar-unit {
  display: block;
  font-size: 11px;
  color: var(--pc-muted);
  white-space: nowrap;
}

.pcp-bottombar .pcp-btn { width: auto; flex: 1; min-height: 46px; }

.pcp-bottombar-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--pc-primary);
  background: #fff;
  color: var(--pc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.pcp-bottombar-icon:hover { background: var(--pc-tint); color: var(--pc-primary); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

/* Below the three-column threshold the offer card moves under the identity,
   spans the full width and stops sticking. */
@media (max-width: 1199.98px) {
  .pcp-hero-grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar head"
      "offer  offer"
      "details details"
      "gallery gallery";
    column-gap: 24px;
  }

  .pcp-offer {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    column-gap: 22px;
    align-items: start;
  }

  .pcp-offer-title,
  .pcp-offer-flagstrip,
  .pcp-nudge,
  .pcp-gate { grid-column: 1 / -1; }

  .pcp-rates { margin-bottom: 0; }
  .pcp-offer-links { grid-column: 2; margin-top: 12px; }
  .pcp-head, .pcp-details { max-width: none; }
}

@media (max-width: 991.98px) {
  /* Shorter header, but .content pads the same 40px -> more clearance needed */
  .pcp { margin-top: 52px; }
  .pcp-hero { padding: 22px; }
  .pcp-avatar { width: 168px; height: 168px; }
  .pcp-name { font-size: 26px; }
}

/* Phone: left aligned, and the offer card sits right under the name.
   Centred text made longer bios and wrapped chip rows hard to scan. */
@media (max-width: 767.98px) {
  .pcp-hero {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .pcp-hero-grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar head"
      "offer  offer"
      "details details"
      "gallery gallery";
    column-gap: 14px;
    row-gap: 18px;
  }

  .pcp-avatar {
    width: 96px;
    height: 96px;
    border-radius: 14px;
  }

  .pcp-avatar-actions { top: 6px; right: 6px; gap: 5px; }
  .pcp-avatar-btn { width: 28px; height: 28px; font-size: 12px; }

  .pcp-name { font-size: 21px; }
  .pcp-name-row { gap: 6px; margin-bottom: 6px; }
  .pcp-tagline { font-size: 14.5px; margin-top: 10px; }

  .pcp-offer {
    display: block;
    width: 100%;
    padding: 16px;
  }

  .pcp-rates { margin-bottom: 16px; }
  .pcp-rate { padding: 12px 14px; }
  .pcp-rate-label { font-size: 14.5px; }
  .pcp-rate-price { font-size: 16px; }
  .pcp-offer-links { margin-top: 14px; }

  .pcp-gallery { margin-top: 0; padding-top: 16px; }

  .pcp-gallery .user-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    grid-gap: 8px;
  }

  /* Sticky bar appears and reserves space so the footer stays reachable.
     The extra 60px only applies while the logged-in bottom nav is shown;
     this rule replaces body.has-bottom-nav's padding rather than adding to it. */
  .pcp-bottombar { display: flex; }
  body.pcp-bottombar-open { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.has-bottom-nav.pcp-bottombar-open { padding-bottom: calc(60px + 66px + env(safe-area-inset-bottom)); }
}

/* Very small phones (iPhone SE class and below) */
@media (max-width: 359.98px) {
  .pcp-name { font-size: 19px; }
  .pcp-avatar { width: 80px; height: 80px; }
  .pcp-bottombar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .pcp-bottombar-amount { font-size: 15px; }
}

/* Server-rendered profile (replaced when React mounts). Same card as the app,
   plus the bio and social list that only the first HTML contains. */
.pcp-about {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
}

.pcp-about p { margin: 0 0 12px; }

.pcp-socials ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.pcp-socials a {
  color: var(--pc-primary);
  font-weight: 600;
  text-decoration: none;
}

.pcp-connect {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

.pcp-connect h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-ink);
  margin: 0 0 8px;
}

.pcp-connect a { color: var(--pc-primary); font-weight: 600; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pcp-rate, .pcp-btn, .pcp-avatar-btn { transition: none; }
  .pcp-btn:active { transform: none; }
  .pcp-avatar-btn:hover { transform: none; }
}

/* ---------------------------------------------------------
   Optional blocks between hero and tabs (live event, call queue)

   Both components render null when there is nothing to show, but their
   wrapper stays in the tree. Carrying the spacing on the rendered child
   means an empty slot collapses to zero height instead of leaving a gap.
   --------------------------------------------------------- */
.pcp-slot > .row > div > * {
  margin-top: 30px;
  margin-bottom: 30px;
}