/* ==========================================================================
   My posts (my-posts.html)
   Design system: uses the shared tokens from /css/tokens.css. The purple/
   blue/gold gradient accents on the upgrade-tier buttons and the "boost"
   modal deliberately match the pricing-tier branding used on
   list-your-services.css (basic=blue, standard=purple, premium=gold) and
   are left as their own colors rather than flattened to the single brand
   token -- everything else (structural grays, borders, shadows, danger/
   success states) now uses the shared palette.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Inter", "Quicksand", "Poppins", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Home button (mobile navbar)
   ========================================================================== */
.home-btn {
  width: 56px;
  height: 56px;
  background: #dedfe0;
  border-radius: 50%;
  color: #000;
  text-decoration: none;
  margin-left: -5px;
  transition: all 0.2s ease;
}

.home-btn:hover {
  background-color: #e9ecef;
  color: #000;
  transform: scale(1.05);
}

.home-btn:active {
  transform: scale(0.95);
}

.home-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

.home-text {
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  color: #1f2937;
}

.page-subtitle {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  max-width: 520px;
}

#my-posts {
  margin: 0 0 85px 0;
  display: flow-root;
}

/* ==========================================================================
   Post cards
   ========================================================================== */
.post-card {
  max-width: 850px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, #fbfdff 100%);
  box-shadow: var(--shadow-md);
  margin: 22px auto 36px auto;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.post-card:hover {
  box-shadow: var(--shadow-lg);
}

.post-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* nowrap so "Looking for: X Y" wraps the whole category phrase down
   together onto its own line instead of splitting mid-phrase (e.g.
   "Yoga" landing on one line and "Instructors" on the next) -- no
   truncation, so the category name is never cut off. */
.post-title-light {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

/* ==========================================================================
   Header: logo + title/badges + posted date
   ========================================================================== */
.listing-tile-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border-color);
}

.listing-tile-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--light) 0%, #dbe9ff 100%);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.listing-tile-heading {
  flex: 1;
  min-width: 0;
}

.listing-tile-posted {
  flex-shrink: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.post-card-content {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.post-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.post-badge-type {
  background: var(--light);
  color: var(--dark);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
}

.post-badge-archived {
  background: var(--surface-alt);
  color: var(--text-body);
  border: 1px solid var(--border-color);
}

.post-id-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  white-space: normal;
  overflow-wrap: anywhere;
}

.post-btn,
.post-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

/* Was hardcoded to Facebook's brand blue (#1877f2) -- unrelated to
   Facebook, the same accidental copy-paste found across the other
   request/signup pages. Uses the site's actual brand color now. */
.post-btn {
  font-size: var(--font-size-lg);
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.15);
}

.post-btn--archived {
  font-size: 1.1rem;
  background: var(--text-muted);
  border: 1px solid var(--text-muted);
}

.post-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
  opacity: 1;
}

.post-btn-secondary {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-dark);
}

.post-btn-secondary:hover {
  background: var(--surface);
  border-color: rgba(var(--primary-rgb), 0.35);
  color: var(--primary);
  opacity: 1;
}

/* ==========================================================================
   Listing stats (views / phone / WhatsApp clicks)
   ========================================================================== */
.post-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.post-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-alt);
  border: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.post-stat i {
  color: var(--primary);
  font-size: 0.85rem;
}

.post-stat strong {
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
}

.post-stat-recent {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.manage-sub-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.manage-sub-row .post-btn-secondary {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.manage-billing-btn {
  color: #fff;
  background: var(--dark);
}

.post-actions-divider {
  margin: 4px 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.upgrade-panel-hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: var(--space-4) 0;
}

/* Lives alongside Share in .listing-tile-toolbar-secondary now (was its
   own full-width row below the whole toolbar), so it sits in the same
   row as the rest of the buttons on desktop and stacks with them on
   mobile via that container's own flex-direction switch. */
.archive-btn {
  font-size: var(--font-size-base);
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.archive-btn:hover {
  background: #b02a37;
  border-color: #b02a37;
  color: #fff;
}

/* ==========================================================================
   Confirm modal (replaces window.confirm)
   ========================================================================== */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 2000;
  animation: confirm-modal-fade-in 0.15s ease;
}

@keyframes confirm-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  width: 100%;
  padding: var(--space-6);
  animation: confirm-modal-pop-in 0.18s ease;
}

@keyframes confirm-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.confirm-modal-title {
  margin: 0 0 8px;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--dark);
}

.confirm-modal-message {
  margin: 0 0 var(--space-5);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.confirm-modal-actions {
  display: flex;
  gap: var(--space-3);
}

.confirm-modal-actions .post-btn-secondary,
.confirm-modal-actions .post-btn {
  flex: 1;
}

.confirm-modal-confirm--danger {
  background: var(--danger);
  border-color: var(--danger);
}

.confirm-modal-confirm--danger:hover {
  background: #b02a37;
  border-color: #b02a37;
}

/* ==========================================================================
   Upgrade panel (revenue conversion zone)
   ========================================================================== */
.upgrade-panel {
  margin-top: 6px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf1ff 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.upgrade-panel-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  font-size: 1.05rem;
  color: var(--dark);
}

.upgrade-panel-heading i {
  color: var(--warning);
  font-size: 1.1rem;
}

.upgrade-benefits-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 var(--space-3);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
  text-decoration: none;
}

.upgrade-benefits-link:hover {
  text-decoration: underline;
  color: var(--primary-dark);
}

.upgrade-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.upgrade-tier-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  font-size: 0.8rem;
  line-height: 1.25;
  text-align: center;
  border: none;
  color: #fff;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.upgrade-tier-btn i {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.upgrade-tier-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  opacity: 1;
}

.upgrade-tier-price {
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  opacity: 0.85;
  white-space: nowrap;
}

/* Tier brand gradients -- match list-your-services.css's pricing colors
   (basic=blue, standard=purple, premium=gold), not tokenized. */
.upgrade-tier-btn--basic {
  background: linear-gradient(135deg, #1e73c9, #0a0c86);
  box-shadow: 0 3px 10px rgba(10, 12, 134, 0.28);
}

.upgrade-tier-btn--basic:hover {
  background: linear-gradient(135deg, #2c84e0, #12169e);
  box-shadow: 0 5px 14px rgba(10, 12, 134, 0.32);
}

.upgrade-tier-btn--standard {
  background: linear-gradient(135deg, #c026d3, #86198f);
  box-shadow: 0 3px 10px rgba(134, 25, 143, 0.28);
}

.upgrade-tier-btn--standard:hover {
  background: linear-gradient(135deg, #d946ef, #9d1ba7);
  box-shadow: 0 5px 14px rgba(134, 25, 143, 0.32);
}

.upgrade-tier-btn--premium {
  background: linear-gradient(135deg, #d29922, #92600e);
  box-shadow: 0 3px 10px rgba(146, 96, 14, 0.28);
}

.upgrade-tier-btn--premium:hover {
  background: linear-gradient(135deg, #e0ab3d, #a3700f);
  box-shadow: 0 5px 14px rgba(146, 96, 14, 0.32);
}

/* ==========================================================================
   Toolbar (view listing + secondary actions)
   ========================================================================== */
.listing-tile-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}

.listing-tile-primary-btn {
  flex: 1 1 200px;
}

.listing-tile-toolbar-secondary {
  display: flex;
  flex: 2 1 320px;
  gap: var(--space-3);
}

.listing-tile-toolbar-secondary .post-btn-secondary {
  flex: 1;
}

.post-details-card {
  background: var(--surface-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  width: 100%;
}

.post-details-row + .post-details-row {
  margin-top: var(--space-3);
}

.post-details-row {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.5;
}

.post-qr-wrap {
  padding-top: var(--space-2);
}

.post-qr-wrap canvas {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.posts-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin: -30px 0 60px 0;
}

.posts-pagination button {
  padding: 10px var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.posts-pagination button:hover:not(:disabled) {
  background: var(--surface-alt);
}

.posts-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.posts-pagination-info {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   "Boosted" (upgrade categories) modal -- purple accent matches the
   "standard" pricing tier, not tokenized (see file header note)
   ========================================================================== */
.boosted-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.boosted-modal {
  width: 100%;
  max-width: 540px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  padding: var(--space-5);
}

.boosted-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.boosted-modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--dark);
}

.boosted-modal-close {
  border: 0;
  background: var(--surface-alt);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  font-size: 24px;
  cursor: pointer;
  color: var(--text-body);
}

.boosted-summary-simple {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-body);
}

.boosted-summary-simple strong {
  color: var(--dark);
}

.boosted-options {
  display: grid;
  gap: var(--space-2);
  max-height: 320px;
  overflow: auto;
}

.boosted-option-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 12px 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--surface);
  min-height: 58px;
}

.boosted-option-row.is-main {
  border-color: #7c3aed;
  background: #f5f3ff;
}

.boosted-option-left {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.boosted-option-left strong {
  color: var(--dark);
  font-size: var(--font-size-sm);
  white-space: normal;
  line-height: 1.3;
}

.boosted-check {
  width: 18px;
  min-width: 18px;
  text-align: center;
  color: var(--cta-green-dark);
  font-weight: 800;
}

.boosted-main-tag {
  display: none;
}

.boosted-option-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.boosted-main-inline {
  color: #7c3aed;
  font-weight: 800;
  font-size: 13px;
}

.make-main-btn {
  border: 0;
  border-radius: var(--radius-full);
  padding: 7px var(--space-3);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  background: #7c3aed;
  color: #fff;
  white-space: nowrap;
}

.make-main-btn:hover {
  background: #6d28d9;
}

.make-main-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.boost-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
}

.boost-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.boost-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-color);
  border-radius: var(--radius-full);
  transition: 0.2s;
}

.boost-switch .slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: 0.2s;
}

.boost-switch input:checked + .slider {
  background: #7c3aed;
}

.boost-switch input:checked + .slider::before {
  transform: translateX(18px);
}

.boost-switch input:disabled + .slider {
  opacity: 0.7;
  cursor: not-allowed;
}

.boosted-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.boosted-cancel-btn,
.boosted-save-btn {
  border: 0;
  border-radius: var(--radius-full);
  padding: 11px var(--space-5);
  font-weight: 800;
  cursor: pointer;
}

.boosted-cancel-btn {
  background: var(--surface-alt);
  color: var(--text-body);
}

.boosted-cancel-btn:hover {
  background: var(--border-color);
}

.boosted-save-btn {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.25);
}

.boosted-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.32);
}

.boosted-save-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Category picker modal
   ========================================================================== */
.category-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.category-modal {
  background: var(--surface);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  width: min(420px, 90vw);
}

.category-modal h3 {
  margin-bottom: var(--space-3);
}

.category-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.category-pill {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--surface-alt);
  cursor: pointer;
}

.category-pill:hover {
  background: var(--light);
}

/* Was hardcoded to Facebook's brand blue -- same fix as .post-btn above. */
.category-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.category-pill:disabled,
.category-pill.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.category-pill:disabled:hover,
.category-pill.disabled:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.category-modal-actions {
  text-align: right;
}

.cancel-btn {
  padding: 6px 10px;
  border: none;
  background: var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .post-card {
    margin: 18px 12px 28px 12px;
    border-radius: var(--radius-lg);
  }

  .listing-tile-header {
    padding: var(--space-4);
    flex-wrap: wrap;
  }

  .listing-tile-posted {
    order: 1;
    flex-basis: 100%;
    text-align: left;
    margin-left: 80px;
    margin-top: -4px;
  }

  .post-card-content {
    padding: var(--space-4);
  }

  .post-title {
    font-size: 1.25rem;
  }

  .listing-tile-toolbar-secondary {
    flex-direction: column;
  }

  .upgrade-tiers {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  .post-card {
    max-width: 900px !important;
  }

  .manage-sub-row {
    flex-direction: row;
    align-items: stretch;
  }

  .manage-sub-row .post-btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
}