/* ===================================================
   Autoway — public account / listings / promotions page
   Extends styles.css + admin.css tokens and components.
=================================================== */

.account-body{ background: var(--bg-alt); }

.account-main{
  max-width: 1100px; margin: 0 auto;
  padding: 2rem 24px 4rem;
}

.account-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem;
}
.account-head h1{ font-size:1.5rem; margin-bottom:.2em; }
.account-user{ font-size:.85rem; color:var(--text-muted); }

.listing-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.listing-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;
}
.listing-photo{
  height:150px; background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.listing-photo img{ width:100%; height:100%; object-fit:cover; }
.listing-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.listing-title{ font-weight:700; font-size:1rem; }
.listing-price{ font-weight:700; color:var(--green-deep); }
.listing-badges{ display:flex; gap:.4rem; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; padding:.25rem .55rem; border-radius:999px;
}
.badge-published{ background:#e3f3e6; color:#1f7a34; }
.badge-unpublished{ background:#eee; color:#666; }
.badge-promoted{ background:#fff3d6; color:#8a5a00; }
.badge-pending{ background:#e6f0ff; color:#1a4fa0; }
.badge-rejected{ background:#fbe4e1; color:#96291b; }
.listing-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; }

.package-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 1rem 0;
}
.package-card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem 1.1rem; display:flex; flex-direction:column; gap:.6rem;
  cursor:pointer; background:#fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.package-card:hover{ border-color: var(--green-deep); }
.package-card.selected{ border-color: var(--green-deep); box-shadow: 0 0 0 2px var(--green); }
.package-card h4{ font-size:1.05rem; margin:0; }
.package-price{ font-size:1.3rem; font-weight:800; color:var(--green-deep); }
.package-duration{ font-size:.8rem; color:var(--text-muted); }
.package-perks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; }
.package-perks li::before{ content:'✓ '; color:var(--green-deep); font-weight:700; }

.payment-instructions{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem 1.1rem; font-size:.88rem; line-height:1.5; margin:1rem 0;
}

.account-empty{ padding:3rem 1rem; text-align:center; color:var(--text-muted); }