/* =====================================================================
   Afriqueer — design tokens & shared auth styles
   Palette: warm espresso-black base, antique gold + deep emerald accents
   Type: Playfair Display (display/headings) + Sen (body/UI)
   ===================================================================== */

:root {
  /* -- color: base -- */
  --color-bg: #14100d;
  --color-bg-panel: #0f0c09;
  --color-surface: #1f1912;
  --color-surface-alt: #2a2118;
  --color-border: #3a2e20;
  --color-border-soft: #291f16;

  /* -- color: text -- */
  --color-text: #f3ead9;
  --color-text-muted: #c7b89b;
  --color-text-faint: #a1937a;

  /* -- color: accents -- */
  --color-gold: #c6a15b;
  --color-gold-bright: #e4c078;
  --color-emerald: #1f6f54;
  --color-emerald-bright: #2f9c74;
  --color-error: #c1543c;
  --color-error-bg: #2a1712;

  /* -- type -- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Sen", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* -- shape / motion -- */
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-panel: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --transition: 160ms ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--color-text);
}

a {
  color: var(--color-gold-bright);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--color-emerald-bright);
}

:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Split layout: dark brand panel + form panel
   --------------------------------------------------------------------- */

.auth-shell {
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
  .auth-brand {
    min-height: auto;
    padding: 24px;
    align-items: center;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .auth-brand__body,
  .auth-brand__foot,
  .auth-brand__art {
    display: none;
  }
}

.auth-brand {
  position: relative;
  background: var(--color-bg-panel);
  color: var(--color-text);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--color-border-soft);
}

.auth-brand__mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
}

.auth-brand__mark span {
  color: var(--color-gold-bright);
}

.auth-brand__body {
  position: relative;
  z-index: 1;
  max-width: 380px;
  margin-top: 40px;
}

.auth-brand__body h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 0.5em;
}

.auth-brand__body p {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0;
}

.auth-brand__foot {
  position: relative;
  z-index: 1;
  color: var(--color-text-faint);
  font-size: 13px;
  margin-top: auto;
  padding-top: 40px;
}

/* decorative linework: quiet arcs, not a copied cultural symbol —
   pure abstract geometry so it reads as ornament, not appropriation */
.auth-brand__art {
  position: absolute;
  inset: -5% -8% -5% auto;
  width: 90%;
  opacity: 0.7;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Form panel
   --------------------------------------------------------------------- */

.auth-form-panel {
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-panel);
}

@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px;
  }
}

.auth-card__eyebrow-free-heading h2 {
  font-size: 30px;
  margin-bottom: 0.25em;
}

.auth-card__lede {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 32px;
  max-width: 38ch;
}

/* ---------------------------------------------------------------------
   Form controls
   --------------------------------------------------------------------- */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-faint);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-gold);
  background: var(--color-surface);
  outline: none;
}

/* Themed "Choose file" button — applies everywhere in the app, not just
   inside .field wrappers, so upload-form / verify-upload-field / create
   post all pick it up without duplicating the rule per page. */
input[type="file"] {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-surface);
  border-color: var(--color-gold);
}

.field-row {
  display: flex;
  gap: 14px;
}

.field-row .field {
  flex: 1;
}

.field-hint {
  font-size: 12.5px;
  color: var(--color-text-faint);
  margin-top: 6px;
}

.password-field {
  position: relative;
}

.password-field .toggle-visibility {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
}

.password-field .toggle-visibility:hover {
  color: var(--color-gold-bright);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.field-check input {
  margin-top: 3px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary {
  background: var(--color-gold);
  color: #1a1408;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-gold-bright);
}

.btn:disabled {
  cursor: not-allowed;
}

.btn-primary:disabled {
  background: var(--color-gold);
  opacity: 0.75;
}

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border: 2px solid rgba(26, 20, 8, 0.3);
  border-top-color: #1a1408;
  border-radius: 50%;
  animation: btn-spinner-spin 0.6s linear infinite;
}

.btn.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes btn-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

/* ---------------------------------------------------------------------
   Alerts / meta
   --------------------------------------------------------------------- */

.alert {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}

.alert-error {
  background: var(--color-error-bg);
  border-color: rgba(193, 84, 60, 0.4);
  color: #f0b6a5;
}

.alert-error ul {
  margin: 0;
  padding-left: 18px;
}

.alert-success {
  background: rgba(31, 111, 84, 0.16);
  border-color: rgba(31, 111, 84, 0.5);
  color: #a9d9c4;
}

/* Post/story draft-restore banner moved to posts.css (views/post/create.php only). */


.draft-banner__btn--discard:hover {
  border-color: var(--color-text-faint);
  color: var(--color-text);
}

.auth-meta {
  margin-top: 28px;
  font-size: 14px;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-meta a.link-muted {
  color: var(--color-text-muted);
}

.auth-meta a.link-muted:hover,
.auth-meta a.link-muted:focus-visible {
  color: var(--color-text);
}

.auth-divider {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: 32px 0;
}

/* =====================================================================
   Authenticated app shell — mobile-app style navigation
   Fixed top bar (avatar -> slide-out drawer) + fixed bottom tab bar,
   matching the pattern of X/Instagram-style mobile apps. Same design
   tokens/fonts as the auth pages for a consistent brand.
   ===================================================================== */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- top bar ---- */

.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 18px;
  background: rgba(15, 12, 9, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
}

/* 3-column grid, not space-between: the avatar button and the search+bell
   icon group are different widths, so space-between visibly pushes the
   brand off-center toward whichever side is narrower. A fixed middle
   column keeps it exactly centered regardless of what's in the side
   columns. */
.app-topbar > .app-avatar-btn {
  justify-self: start;
}

.app-topbar > .app-topbar__brand {
  justify-self: center;
}

.app-topbar > .app-topbar__actions {
  justify-self: end;
}

.app-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-topbar__icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}

.app-topbar__icon-btn:hover,
.app-topbar__icon-btn:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-gold-bright);
}

.app-topbar__icon-btn svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-topbar__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-gold-bright);
  color: #1a1408;
  border: 2px solid var(--color-bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-topbar__brand {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.015em;
  color: var(--color-text);
}

.app-topbar__brand span {
  color: var(--color-gold-bright);
}

.app-avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-gold-bright);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.app-avatar-btn:hover,
.app-avatar-btn:focus-visible {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}

.app-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-gold-bright);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.app-avatar-btn img,
.app-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- content area: padded for fixed top/bottom bars ---- */

.app-main {
  flex: 1;
  padding: 88px 20px 100px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.app-placeholder {
  max-width: 560px;
  margin: 40px auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 48px 40px;
  text-align: center;
}

.app-placeholder h1 {
  font-size: 28px;
  margin-bottom: 0.4em;
}

.app-placeholder p {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0;
}

/* ---- bottom tab bar ---- */

.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(15, 12, 9, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border-soft);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

.app-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  color: var(--color-text-faint);
  transition: color var(--transition);
}

.app-bottom-nav__item svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
}

.app-bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
}

.app-bottom-nav__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  background: var(--color-gold-bright);
  color: #1a1408;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

.app-bottom-nav__item span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.app-bottom-nav__item:hover,
.app-bottom-nav__item:focus-visible {
  color: var(--color-text-muted);
}

.app-bottom-nav__item.is-active {
  color: var(--color-gold-bright);
}

/* ---- slide-out drawer ---- */

.app-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 40;
}

.app-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.app-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(300px, 84vw);
  background: var(--color-bg-panel);
  border-right: 1px solid var(--color-border-soft);
  z-index: 41;
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.app-drawer.is-open {
  transform: translateX(0);
}

.app-drawer__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 22px 20px;
}

.app-drawer__name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.3;
}

.app-drawer__name small {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-text-faint);
  font-weight: 400;
  margin-top: 2px;
}

.app-drawer__divider {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: 4px 0;
}

.app-drawer__items {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}

.app-drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 15px;
  transition: background var(--transition);
}

.app-drawer__item svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-muted);
  flex-shrink: 0;
}

.app-drawer__item:hover,
.app-drawer__item:focus-visible {
  background: var(--color-surface-alt);
}

/* "Likes you" drawer count (see App\Repositories\LikeRepository) - reuses
   .app-topbar__badge's pill look, just inline/flow instead of that one's
   absolute corner positioning, since this sits at the end of a row of
   text rather than pinned to an icon. */
.app-drawer__item-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-gold-bright);
  color: #1a1408;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-drawer__item.is-active {
  background: var(--color-surface-alt);
  color: var(--color-gold-bright);
}

.app-drawer__item.is-active svg {
  stroke: var(--color-gold-bright);
}

.app-drawer__item[aria-disabled="true"] {
  color: var(--color-text-faint);
  cursor: default;
  pointer-events: none;
}

.app-drawer__footer {
  margin-top: auto;
  padding: 12px 22px calc(20px + env(safe-area-inset-bottom, 0px));
}

.app-drawer__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: #e2a999;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.app-drawer__logout svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.app-drawer__logout:hover,
.app-drawer__logout:focus-visible {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

/* =====================================================================
   Profile pages — own (edit) and public (view) variants share most of
   this. Social-media-style header (avatar + name + stats + actions),
   photo/video grid gallery, upload controls, follow/bookmark states.
   ===================================================================== */

.profile-page {
  max-width: 680px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 32px 28px;
  margin-bottom: 24px;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar span {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--color-gold-bright);
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-identity__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-identity__name {
  font-family: var(--font-display);
  font-size: 23px;
  color: var(--color-text);
}

.profile-identity__username {
  color: var(--color-text-faint);
  font-size: 14px;
  margin: 2px 0 12px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(198, 161, 91, 0.14);
  color: var(--color-gold-bright);
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
  font-size: 11.5px;
  font-weight: 700;
}

.boosted-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(232, 150, 60, 0.22), rgba(198, 161, 91, 0.18));
  color: #f2b45a;
  border: 1px solid rgba(232, 150, 60, 0.45);
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
  font-size: 11.5px;
  font-weight: 700;
}

.boosted-badge svg {
  width: 12px;
  height: 12px;
}

/* Shown to a member whose profile is hidden from others (hide-until-subscribed rule). */
.profile-hidden-bar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 29;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: #3a2a0c;
  border-bottom: 1px solid rgba(240, 200, 80, 0.4);
  color: #f6dd9a;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.profile-hidden-bar a {
  color: #ffd76a;
  font-weight: 700;
  text-decoration: underline;
}

.app-shell:has(.profile-hidden-bar) .app-main {
  padding-top: 140px;
}

.verified-badge svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

.profile-stats-row {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.profile-stats-row strong {
  color: var(--color-text);
}

.profile-bio {
  color: var(--color-text);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.profile-bio.is-empty {
  color: var(--color-text-faint);
  font-style: italic;
}

.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.profile-actions form {
  display: inline-flex;
}

.profile-actions .btn {
  width: auto;
  padding: 10px 20px;
  font-size: 14px;
}

.btn-follow.is-following {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-follow.is-following:hover {
  border-color: var(--color-error);
  color: #e2a999;
}

.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.btn-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
}

.btn-icon.is-active,
.btn-icon:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.btn-icon.is-active svg {
  fill: var(--color-gold-bright);
}

/* Like / Super Like buttons on the public profile page (see
   App\Repositories\LikeRepository) - both are .btn-icon, so they inherit
   its default gold-on-active look (already right for Super Like, matching
   the same gold "boosted"/"super" language used elsewhere), but a plain
   like gets its own rose color instead of gold so the two read as
   different actions rather than two identical buttons side by side. */
.likes-like-btn.is-active,
.likes-like-btn:hover {
  border-color: #e0567a;
  color: #e0567a;
}

.likes-like-btn.is-active svg {
  fill: #e0567a;
}

.likes-super-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

.likes-action-error {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ---- profile highlights strip (views/profile/edit.php & show.php) ----
   Pinned stories - see 019_story_highlights.sql. Same circle-ring visual
   language as the stories tray, but a plain gold ring always (no
   unseen/seen distinction - these aren't ephemeral, there's nothing to
   mark "seen"), and laid out as a wrapping row rather than a horizontal
   scroller since a profile isn't a short list to skim quickly. */

.profile-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 20px;
}

.profile-highlights__item {
  position: relative;
  width: 64px;
}

.profile-highlights__ring {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
  border: 2.5px solid var(--color-gold);
  overflow: hidden;
  cursor: pointer;
}

.profile-highlights__ring img,
.profile-highlights__ring video {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-highlights__remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-highlights__remove:hover {
  color: #e2a999;
  border-color: #e2a999;
}

/* ---- visibility toggle ---- */

.visibility-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.visibility-card__text strong {
  display: block;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 3px;
}

.visibility-card__text span {
  font-size: 13px;
  color: var(--color-text-muted);
}

.visibility-toggle-btn {
  flex-shrink: 0;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition);
}

.visibility-toggle-btn.is-public {
  border-color: var(--color-emerald);
  color: var(--color-emerald-bright);
}

/* ---- section card (bio form, media gallery) ---- */

.profile-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.profile-section h2 {
  font-size: 17px;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 18px;
}

/* Public profile "Prompts" section (see PromptRepository/
   views/profile/edit.php's slot inputs) - a small grid of answered
   icebreaker cards, same rhythm as the media grid below rather than a
   plain list, so it visually reads as content to browse. */
.profile-prompts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.profile-prompts__card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.profile-prompts__question {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gold-bright);
  margin-bottom: 6px;
}

.profile-prompts__answer {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--color-text);
}

/* ---- media grid ---- */

.media-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.media-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-alt);
}

.media-tile img,
.media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-tile__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(198, 161, 91, 0.92);
  color: #1a1408;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.media-tile__private {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-text);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.media-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 55%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  transition: opacity var(--transition);
}

.media-tile:hover .media-tile__overlay,
.media-tile:focus-within .media-tile__overlay {
  opacity: 1;
}

.media-tile__overlay button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.media-tile__overlay button:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---- upload form ---- */

.upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 18px;
}

.upload-form select {
  width: auto;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
}

.upload-form input[type="file"] {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.upload-form .field-check {
  margin: 0;
}

.upload-form button {
  width: auto;
  padding: 10px 18px;
  font-size: 13.5px;
}

.empty-state {
  color: var(--color-text-faint);
  font-size: 13.5px;
  text-align: center;
  padding: 24px 0;
}

/* ---- profile identity meta (age · location, orientation/role chips) ---- */

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--color-text-faint);
  font-size: 13.5px;
  margin: 2px 0 10px;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
}

/* ---- modern "add media" tile (replaces the old media-type dropdown) ---- */

.media-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border);
  color: var(--color-text-faint);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.media-add-tile:hover,
.media-add-tile:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
  background: var(--color-surface-alt);
}

.media-add-tile svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.media-upload-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 16px;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.media-upload-preview .filename {
  flex: 1;
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-upload-preview button[type="submit"] {
  width: auto;
  padding: 9px 18px;
  font-size: 13.5px;
}

/* ---- lightbox (click a photo to enlarge; download stays scoped to
   whatever the viewer could already see — see profile views for the
   lightbox-trigger markup) ---- */

.lightbox-trigger {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 8, 4, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  transform: scale(0.92);
  transition: transform 0.25s ease;
}

.lightbox.is-open .lightbox__img {
  transform: scale(1);
}

.lightbox__bar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.lightbox__bar a,
.lightbox__bar button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}

.lightbox__bar a:hover,
.lightbox__bar button:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__bar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- visibility card: stack on narrow screens so the toggle button
   doesn't get squeezed onto the same line as the description text ---- */
@media (max-width: 480px) {
  .visibility-card {
    flex-direction: column;
    align-items: stretch;
  }

  .visibility-toggle-btn {
    width: 100%;
    padding: 10px 14px;
  }
}

/* ---- avatar edit button (click the profile picture itself to change it) ---- */

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

.avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold-bright);
  color: #1a1408;
  border: 2px solid var(--color-bg);
  cursor: pointer;
  transition: transform var(--transition);
}

.avatar-edit-btn:hover,
.avatar-edit-btn:focus-visible {
  transform: scale(1.08);
}

.avatar-edit-btn__icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar-edit-btn__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(26, 20, 8, 0.35);
  border-top-color: #1a1408;
  border-radius: 50%;
  animation: btn-spinner-spin 0.6s linear infinite;
}

#avatar-upload-form.is-uploading .avatar-edit-btn__icon { display: none; }
#avatar-upload-form.is-uploading .avatar-edit-btn__spinner { display: inline-block; }

/* ---- settings: multi-page drill-down (header + tappable nav rows) ---- */

.drill-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

.drill-header__back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--transition);
}

.drill-header__back:hover { background: var(--color-surface-alt); }

.drill-header__back svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drill-header h1 { margin: 4px 0 0; font-size: 19px; }
.drill-header__sub { font-size: 12.5px; color: var(--color-text-faint); margin-top: 6px; }

.settings-nav-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-border-soft);
  text-decoration: none;
  color: inherit;
}

.settings-nav-row:last-child { border-bottom: none; }
.settings-nav-row:hover { background: var(--color-surface-alt); border-radius: 10px; }

.settings-nav-row.is-disabled { opacity: 0.5; cursor: default; }
.settings-nav-row.is-disabled:hover { background: none; }

.settings-nav-row__icon {
  width: 21px;
  height: 21px;
  stroke: var(--color-text-muted);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 2px;
}

.settings-nav-row__text { flex: 1; min-width: 0; }
.settings-nav-row__text strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.settings-nav-row__text span { font-size: 12.5px; color: var(--color-text-faint); line-height: 1.45; }

.settings-nav-row__chevron {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-faint);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  align-self: center;
}

.settings-nav-row__badge {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.settings-nav-row__badge.is-verified { background: rgba(90, 168, 120, 0.16); color: #7fcf9c; }
.settings-nav-row__badge.is-pending { background: rgba(198, 161, 91, 0.16); color: var(--color-gold-bright); }
.settings-nav-row__badge.is-none { background: var(--color-surface-alt); color: var(--color-text-faint); }

.settings-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin: 24px 0 4px;
}
.settings-section-label:first-of-type { margin-top: 0; }

/* ---- online / last-seen status on public profile ---- */

.profile-online-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-faint);
  margin-bottom: 8px;
}

.profile-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-faint);
  flex-shrink: 0;
}

.profile-online-status.is-online {
  color: var(--color-emerald-bright);
}

.profile-online-status.is-online .profile-online-dot {
  background: var(--color-emerald-bright);
  box-shadow: 0 0 0 3px rgba(47, 156, 116, 0.2);
}

.app-main--wide {
  max-width: 900px;
}
/* =====================================================================
   Shop — product grid, product detail, cart, checkout, orders
   ===================================================================== */

.shop-page,
.shop-product-page,
.shop-cart-page,
.shop-checkout-page,
.shop-order-page,
.shop-orders-page {
  max-width: 820px;
  margin: 0 auto;
}

.shop-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.shop-header__title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--color-text);
  margin: 0 0 4px;
}

.shop-header__subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0;
}

.shop-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.shop-orders-link {
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.shop-orders-link:hover {
  color: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
}

.shop-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.shop-cart-btn:hover {
  color: var(--color-gold-bright);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(228, 192, 120, 0.08);
}

.shop-cart-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
}

.shop-cart-btn__count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-gold-bright);
  color: #1a1408;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 999px;
  border: 2px solid var(--color-bg);
}

/* ---- category chips ---- */

.shop-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.shop-chips::-webkit-scrollbar {
  display: none;
}

.shop-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.shop-chip:hover {
  color: var(--color-text);
  border-color: var(--color-gold);
}

.shop-chip.is-active {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: #1a1408;
}

/* ---- product grid ---- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shop-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.shop-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(228, 192, 120, 0.35);
}

.shop-card.is-sold-out {
  opacity: 0.55;
}

.shop-card.is-sold-out:hover {
  transform: none;
  box-shadow: none;
}

.shop-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.shop-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(198, 161, 91, 0.14) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}

.shop-card__media.is-loaded::after {
  display: none;
}

.shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms ease, transform 400ms ease;
}

.shop-card__img.is-loaded {
  opacity: 1;
}

.shop-card:hover .shop-card__img.is-loaded {
  transform: scale(1.04);
}

.shop-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}

.shop-card__badge--sold-out {
  background: rgba(20, 16, 13, 0.85);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-soft);
}

.shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 14px;
}

.shop-card__category {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.shop-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.3;
}

.shop-card__price {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ---- shared bits ---- */

.shop-back-link {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: 13.5px;
  text-decoration: none;
  margin-bottom: 16px;
  transition: color var(--transition);
}

.shop-back-link:hover {
  color: var(--color-gold-bright);
}

.shop-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.shop-status-badge.is-pending {
  background: rgba(228, 192, 120, 0.12);
  border-color: rgba(228, 192, 120, 0.35);
  color: var(--color-gold-bright);
}

.shop-status-badge.is-processing {
  background: rgba(90, 140, 200, 0.14);
  border-color: rgba(90, 140, 200, 0.4);
  color: #9dc1e8;
}

.shop-status-badge.is-success {
  background: rgba(31, 111, 84, 0.16);
  border-color: rgba(31, 111, 84, 0.5);
  color: #a9d9c4;
}

.shop-status-badge.is-cancelled {
  background: var(--color-error-bg);
  border-color: rgba(193, 84, 60, 0.4);
  color: #f0b6a5;
}

/* ---- product detail ---- */

.shop-product-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  margin-bottom: 20px;
}

.shop-product-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-product-info__name {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-text);
  margin: 4px 0 10px;
}

.shop-product-info__description {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.shop-product-info__soldout {
  color: var(--color-text-faint);
  font-style: italic;
}

.shop-add-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
}

.shop-stock-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--color-text-faint);
}

.shop-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: fit-content;
}

.shop-qty-stepper__btn {
  width: 38px;
  height: 38px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: none;
  font-size: 17px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.shop-qty-stepper__btn:hover {
  background: var(--color-gold-bright);
  color: #1a1408;
}

.shop-qty-stepper input {
  width: 52px;
  height: 38px;
  text-align: center;
  background: var(--color-surface);
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  -moz-appearance: textfield;
}

.shop-qty-stepper input::-webkit-outer-spin-button,
.shop-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop-qty-stepper--small .shop-qty-stepper__btn,
.shop-qty-stepper--small input {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.shop-qty-stepper--small input {
  width: 42px;
}

/* ---- cart ---- */

.shop-cart-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.shop-cart-line {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.shop-cart-line__img {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface-alt);
  flex-shrink: 0;
}

.shop-cart-line__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shop-cart-line__name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-text);
}

.shop-cart-line__variant,
.shop-cart-line__unit-price {
  font-size: 12.5px;
  color: var(--color-text-faint);
}

.shop-cart-line__qty-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.shop-cart-line__update-btn {
  background: none;
  border: none;
  color: var(--color-gold);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.shop-cart-line__update-btn:hover {
  color: var(--color-gold-bright);
}

.shop-cart-line__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
}

.shop-cart-line__total {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.shop-cart-line__remove {
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}

.shop-cart-line__remove:hover {
  color: var(--color-error);
}

.shop-cart-line__remove svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.shop-cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.shop-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.shop-cart-summary__amount {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-gold-bright);
}

.shop-cart-summary__note {
  font-size: 12.5px;
  color: var(--color-text-faint);
  margin: 0 0 16px;
}

.shop-cart-summary .btn {
  width: auto;
  padding: 12px 24px;
}

/* ---- checkout ---- */

.shop-checkout-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.shop-checkout-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.shop-checkout-summary__row:last-of-type {
  border-bottom: none;
}

.shop-checkout-summary__variant {
  color: var(--color-text-faint);
  font-size: 12px;
}

.shop-checkout-summary__row--total {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

/* "futuristic" glass-panel treatment for the payment box — it's the one
   moment in the flow that needs to feel distinct and trustworthy. */
.shop-payment-box {
  position: relative;
  background: linear-gradient(155deg, rgba(42, 33, 24, 0.9), rgba(20, 16, 13, 0.9));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 22px;
  overflow: hidden;
}

.shop-payment-box::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(228, 192, 120, 0.18), transparent 70%);
  pointer-events: none;
}

.shop-payment-box__label {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.shop-payment-box__number-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.shop-payment-box__number {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.shop-payment-box__copy {
  background: rgba(228, 192, 120, 0.12);
  border: 1px solid var(--color-gold);
  color: var(--color-gold-bright);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.shop-payment-box__copy:hover {
  background: var(--color-gold-bright);
  color: #1a1408;
}

.shop-payment-box__copy.is-copied {
  background: var(--color-emerald-bright);
  border-color: var(--color-emerald-bright);
  color: #0f1a15;
}

.shop-payment-box__meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.shop-payment-box__amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gold-bright);
  margin: 0 0 14px;
}

.shop-payment-box__hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-faint);
  margin: 0;
  position: relative;
}

.shop-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-checkout-form textarea {
  width: 100%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  resize: vertical;
}

.shop-checkout-form textarea:focus,
.shop-checkout-form input:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* ---- orders ---- */

.shop-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.shop-order-head__date {
  color: var(--color-text-faint);
  font-size: 13px;
  margin: 2px 0 0;
}

.shop-payment-summary,
.shop-order-address {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.shop-payment-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  padding: 5px 0;
}

.shop-order-address__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 6px;
}

.shop-order-address p:last-child {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.shop-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

.shop-order-row:hover {
  border-color: var(--color-gold);
  transform: translateX(2px);
}

.shop-order-row__ref {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--color-text);
}

.shop-order-row__date {
  display: block;
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

.shop-order-row__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.shop-order-row__amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* Posts feed, stories tray, comments, report modal, etc. moved to
   posts.css - loaded only on views/post/*.php and views/story/*.php. */

/* =====================================================================
   Discover — 2-column infinite-scroll grid with skeleton loaders
   ===================================================================== */

.app-main--wide {
  max-width: 900px;
}

.discover-page {
  max-width: 640px;
  margin: 0 auto;
}

/* ---- profile-completion nudge banner - see ProfileRepository::nudgeStatus()
   and views/discovery/index.php. The ring is a single-stroke SVG circle
   trick (circumference normalized to 100 via viewBox 36x36 + r=15.9155),
   so stroke-dasharray can just be "percent, 100" straight from PHP. ---- */
.profile-nudge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 16px 44px 16px 16px;
  margin-bottom: 16px;
}

.profile-nudge__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.profile-nudge__close svg {
  width: 16px;
  height: 16px;
}

.profile-nudge__close:hover {
  color: var(--color-text);
}

.profile-nudge__ring-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.profile-nudge__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.profile-nudge__ring-bg {
  fill: none;
  stroke: var(--color-border-soft);
  stroke-width: 3;
}

.profile-nudge__ring-fill {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 300ms ease;
}

.profile-nudge__percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.profile-nudge__body strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.profile-nudge__missing {
  margin: 0 0 6px;
  color: var(--color-text-faint);
  font-size: 12px;
}

.profile-nudge__cta {
  display: inline-block;
  color: var(--color-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.profile-nudge__cta:hover {
  text-decoration: underline;
}

/* Wraps the Filters toggle and the "Recently active" sort select on one
   row - see the "Recently active" sort/filter feature. Holds the
   margin-bottom that used to live on .discover-filter-toggle alone, now
   that it shares the row with the sort select. */
.discover-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.discover-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.discover-sort-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.discover-sort-select:hover,
.discover-sort-select:focus {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.discover-filter-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.discover-filter-toggle:hover,
.discover-filter-toggle[aria-expanded="true"] {
  border-color: var(--color-gold);
  color: var(--color-gold-bright);
}

.discover-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-gold);
  color: #1a1408;
  font-size: 11px;
  font-weight: 700;
}

/* Super-like / priority like - "X of Y left today" counter shown once
   above the filters row (DiscoveryController::index()), decremented in
   place from the grid's own quick-action buttons (see
   decrementSuperLikeCounter() in the view's script) rather than reloaded
   from the server on every send. */
.discover-superlike-counter {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: -4px 0 14px;
}

/* Transient notice for a super-like limit/match/error surfaced from the
   grid (showSuperLikeNotice() in the view's script) - inserted right
   after the counter above the first time it's needed, auto-hidden after
   a few seconds rather than requiring a dismiss tap. */
.discover-superlike-notice {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-gold-bright);
  margin: -10px 0 14px;
}

.discover-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.discover-filters.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .discover-filters {
    transition: none;
  }
}

.discover-filters__row {
  display: flex;
  gap: 14px;
}

.discover-filters__row .field {
  flex: 1;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* .discover-page's own max-width grows in step, so the extra columns get
   real room instead of squeezing into the same 640px used on mobile -
   .app-main--wide already reserves up to 900px, previously unused by this
   page. */
@media (min-width: 640px) {
  .discover-page {
    max-width: 900px;
  }
  .discover-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (min-width: 900px) {
  .discover-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.discover-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  display: block;
}

.discover-tile:not(.discover-tile--skeleton) {
  animation: discover-tile-in 0.3s ease both;
}

@keyframes discover-tile-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hover lift only where a mouse actually drives hover - guards against a
   "stuck hover" look on touch devices, where tapping a tile can otherwise
   leave it visually highlighted after the tap ends. */
@media (hover: hover) and (pointer: fine) {
  .discover-tile {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .discover-tile:hover,
  .discover-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6);
    border-color: var(--color-gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-tile:not(.discover-tile--skeleton) {
    animation: none;
  }
}

.discover-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-tile__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--color-gold-bright);
}

.discover-tile__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 75%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
}

.discover-tile__name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}

.discover-tile__name-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* flex-shrink alone isn't enough - a flex item's default min-width is
     "auto" (its content size), not 0, so without this it would refuse to
     shrink below the full name's width and push the match badge added
     below off the row instead of truncating. */
  flex: 1 1 auto;
  min-width: 0;
}

.discover-tile__verified {
  flex-shrink: 0;
  color: var(--color-gold-bright);
  font-size: 12px;
}

/* Compatibility/match score badge (see
   DiscoveryController::buildCompatibilityPercent()) - pushed to the far
   right of the name row via margin-left: auto, so it reads as a headline
   stat next to the name rather than another reason chip. Gold-tinted
   (unlike the neutral grey .discover-tile__reason chips below) since it's
   meant to stand out as the one positive-signal number on the tile. */
.discover-tile__match-badge {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-gold-bright);
  background: rgba(230, 179, 60, 0.16);
  border: 1px solid rgba(230, 179, 60, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Mutual-interest badge (see DiscoveryController's 'sharedInterestCount'
   and DiscoveryRepository::sharedInterestCount()) - its own line under
   the name, always shown, unlike the two-slot reason chips below it
   which can bump it out entirely on a tile with several other signals. */
.discover-tile__interest-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-gold-bright);
}

.discover-tile__interest-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Online/last-active status (see "Recently active" sort/filter) - same
   dot+label shape as .profile-online-status on the profile pages, in
   white-based tones here instead of that one's --color-text-faint, since
   this sits directly on a photo/gradient background rather than the
   surface color profile pages use. */
.discover-tile__online-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
}

.discover-tile__online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.discover-tile__online-status.is-online {
  color: var(--color-emerald-bright);
}

.discover-tile__online-status.is-online .discover-tile__online-dot {
  background: var(--color-emerald-bright);
  box-shadow: 0 0 0 3px rgba(47, 156, 116, 0.25);
}

/* "New here" corner badge - see DiscoveryRepository's is_new flag
   (7-day window). A ribbon in the tile's own top-left corner rather than
   another .discover-tile__reason chip in the bottom overlay - it's
   meant to catch the eye immediately, the way a "New" tag does on most
   marketplace/dating apps, not compete with the other reason text for
   attention down in the gradient. */
.discover-tile__new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-bg);
  background: var(--color-gold-bright);
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* "Boosted" corner badge - see the 'boosted' weight in
   config/matching.php and BoostRepository. Top-RIGHT, opposite
   .discover-tile__new-badge, so both can show on the same tile at once
   (a brand-new member can also spend points to boost). Dark surface +
   gold text/icon, the inverse treatment of the solid-gold "New here"
   pill, so the two read as visually distinct at a glance rather than
   two identical pills stacked on either side. */
.discover-tile__boost-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-gold-bright);
  background: rgba(15, 12, 9, 0.85);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.discover-tile__boost-badge svg {
  width: 11px;
  height: 11px;
}

/* Up to two short, plain-language reasons a profile was suggested (see
   DiscoveryController::buildReasons) - deliberately text, never a raw
   score/percentage, per the plan's "indicator, not a guarantee" stance. */
.discover-tile__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.discover-tile__reason {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* "Likes you" page (see App\Repositories\LikeRepository and
   views/like/received.php) - reuses .discover-tile/.discover-grid, but the
   tile itself is a plain <div> here (not the whole-card <a> Discover
   uses), because it needs a nested "Like back" <button> as its own
   sibling click target - a button can't legally nest inside an <a>. */
.likes-tile__link {
  display: block;
  width: 100%;
  height: 100%;
}

.likes-tile__like-btn {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 7px 0;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-gold);
  color: #1a1408;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  z-index: 1;
}

.likes-tile__like-btn:disabled {
  cursor: default;
  opacity: 0.9;
}

.likes-tile__like-btn.is-liked {
  background: var(--color-emerald-bright, #2F9C74);
  color: #fff;
}

/* Discover grid's own inner navigation link - same "fills the tile,
   position comes from the .discover-tile parent" contract as
   .likes-tile__link above, now needed here too since the tile's outer
   element became a plain <div> once it grew Like/Super-like quick-action
   <button> siblings (a button can't nest inside an <a>). */
.discover-tile__link {
  display: block;
  width: 100%;
  height: 100%;
}

/* Discover-tile quick actions (heart = plain like toggle, star = super
   like) - see buildLikeButton()/buildSuperLikeButton() in the view's
   script, POSTing to the same /u/:username/like and /super-like routes
   the profile page's own buttons use.

   Anchored to the TOP-right, stacked below the New/Boosted corner badges
   (top: 8px, a fixed ~20px tall) - originally these floated at the
   tile's vertical center instead, which looked fine until a tile with
   several overlay lines (match badge + shared-interest badge +
   online-status + two reason chips + icebreaker) grew tall enough for
   the overlay's top edge to creep past the middle of the tile and
   overlap the buttons. The overlay's height is unpredictable (it grows
   from the bottom based on how much content a candidate has), but the
   corner badges' height is fixed, so anchoring from the top is the
   collision-free option regardless of how much a given tile's overlay
   ends up holding. */
.discover-tile__like-btn,
.discover-tile__super-btn {
  position: absolute;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(15, 12, 9, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.discover-tile__like-btn svg,
.discover-tile__super-btn svg {
  width: 16px;
  height: 16px;
}

.discover-tile__like-btn {
  top: 44px;
}

.discover-tile__super-btn {
  top: 82px;
}

.discover-tile__like-btn.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #1a1408;
}

.discover-tile__super-btn.is-active {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: #1a1408;
}

.discover-tile__super-btn:disabled {
  cursor: default;
  opacity: 0.95;
}

/* Icebreaker line (see DiscoveryController::buildIcebreaker()) - an
   answered prompt question + answer when the candidate has one, else a
   short bio snippet. Sits below the reason chips as its own line, in
   quotes, so it visually reads as "something they said" rather than
   another system-generated reason chip - it's meant to be the thing a
   viewer taps "message" to comment on. */
.discover-tile__icebreaker {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}

.discover-tile__icebreaker-question {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gold-bright);
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clamped independently of the question line above it - the two used to
   share one -webkit-line-clamp box, which let a two-line question (a long
   catalogue question wrapping) eat the whole clamp budget and hide the
   answer entirely. Clamping only the answer keeps the question always
   visible and the answer always gets its own two lines. */
.discover-tile__icebreaker-answer {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover-tile__icebreaker-answer::before,
.discover-tile__icebreaker-answer::after {
  content: '"';
}

/* ---- skeleton loaders ---- */

.discover-tile--skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.discover-tile--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(198, 161, 91, 0.12) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.discover-sentinel {
  height: 1px;
}

/* Empty-state nudges — see the renderEmptyState() comment in
   views/discovery/index.php for why these are per-filter buttons
   rather than one blunt "clear everything" action. */
.discover-empty {
  text-align: center;
  padding: 32px 16px;
}

.discover-empty__text {
  color: var(--color-text-faint);
  font-size: 13.5px;
  margin: 0 0 14px;
}

.discover-empty__nudges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.discover-empty__nudge-btn {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-gold);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.discover-empty__nudge-btn:hover {
  border-color: var(--color-gold);
}

/* ---- grid/swipe view toggle ---- */

.discover-view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 2px;
  background: var(--color-surface);
  flex-shrink: 0;
}

.discover-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.discover-view-toggle__btn svg {
  width: 16px;
  height: 16px;
}

.discover-view-toggle__btn.is-active {
  background: var(--color-gold);
  color: #1a1408;
}

/* ---- swipe view ---- */

.discover-swipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 8px 0 20px;
}

.discover-swipe__stack {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 5 / 6;
  max-height: 62vh;
}

.discover-swipe__card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  touch-action: none;
  will-change: transform;
}

/* Only the top card (stackIndex 0) gets wireSwipeDrag() wired up, so it's
   the only one with a visible grab affordance - the peek cards behind it
   are deliberately inert. */
.discover-swipe__card:last-child {
  cursor: grab;
}

.discover-swipe__card.is-dragging {
  cursor: grabbing;
}

.discover-swipe__card .discover-tile {
  width: 100%;
  height: 100%;
  /* Overrides .discover-tile's own fade/scale entrance animation - a card
     sliding into the stack underneath a swiped-away one should appear
     instantly in its new position, not replay the grid's "pop in" effect. */
  animation: none;
}

.discover-swipe__view-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 12, 9, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 5px 11px;
  text-decoration: none;
}

/* LIKE/PASS stamps - fade in as a card is dragged toward that side (see
   wireSwipeDrag()'s opacity-by-distance logic), hidden by default so a
   freshly stacked card starts clean. */
.discover-swipe__stamp {
  position: absolute;
  top: 24px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 10px;
  border: 3px solid;
  opacity: 0;
  pointer-events: none;
}

.discover-swipe__stamp--like {
  left: 20px;
  color: var(--color-emerald-bright);
  border-color: var(--color-emerald-bright);
  transform: rotate(-12deg);
}

.discover-swipe__stamp--pass {
  right: 20px;
  color: var(--color-error);
  border-color: var(--color-error);
  transform: rotate(12deg);
}

.discover-swipe__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.discover-swipe__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.discover-swipe__action-btn--pass,
.discover-swipe__action-btn--like {
  width: 56px;
  height: 56px;
}

.discover-swipe__action-btn--pass svg,
.discover-swipe__action-btn--like svg {
  width: 24px;
  height: 24px;
}

.discover-swipe__action-btn--superlike {
  width: 44px;
  height: 44px;
}

.discover-swipe__action-btn--superlike svg {
  width: 18px;
  height: 18px;
}

.discover-swipe__action-btn--pass:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.discover-swipe__action-btn--like:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.discover-swipe__action-btn--superlike:hover {
  border-color: var(--color-gold-bright);
  color: var(--color-gold-bright);
}

@media (prefers-reduced-motion: reduce) {
  .discover-swipe__card {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Sign in with Google
   Button follows Google's dark-theme spec (fill #131314, stroke #8E918F,
   text #E3E3E3) so it matches this dark UI while staying brand-compliant.
   --------------------------------------------------------------------- */

.btn-google {
  gap: 10px;
  background: #131314;
  border-color: #8e918f;
  color: #e3e3e3;
  font-weight: 500;
}

.btn-google:hover,
.btn-google:focus-visible {
  background: #1e1f20;
  border-color: #c4c7c5;
}

.btn-google svg {
  flex: none;
}

.google-auth__hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-faint);
  text-align: center;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 13px;
  color: var(--color-text-faint);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border-soft);
}

/* Photo/video waiting for a moderator (owner's own profile page) */
.media-tile__review {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: rgba(20, 16, 13, .88); color: var(--color-gold-bright); border: 1px solid var(--color-gold);
}

/* ---- Verified badge + online dot (one look everywhere) ---- */
.vbadge {
  display: inline-block;
  position: relative;
  width: 1.05em;
  height: 1.05em;
  min-width: 14px;
  min-height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  vertical-align: -0.14em;
  background: linear-gradient(135deg, #e4c078 0%, #c6a15b 100%);
  box-shadow: 0 0 0 1px rgba(20, 16, 13, 0.55);
  flex-shrink: 0;
}
.vbadge::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 20%;
  width: 24%;
  height: 46%;
  border: solid #1b1409;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.odot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.25);
  vertical-align: middle;
  flex-shrink: 0;
}