/* ============================================================
   Explore page styles — v2.0 Light Theme
   ============================================================ */

/* Hero */
.explore-hero {
  padding: 48px 0 40px;
  text-align: center;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.explore-hero .container { position: relative; z-index: 1; }
.explore-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--text);
  margin-bottom: 10px;
}
.explore-hero p {
  color: var(--text-secondary);
  font-size: .9375rem;
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-mid);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Tab switcher */
.explore-tabs { display: flex; justify-content: center; }
.tabs-pill {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
}
.ptab {
  padding: 9px 24px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  white-space: nowrap;
}
.ptab:hover { color: var(--text); background: var(--card-bg); }
.ptab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.3); }

/* Main */
.explore-main { padding: 32px 0 80px; background: var(--bg); }
.view-wrap { animation: slideUp .3s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Filter bar */
.filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  box-shadow: var(--card-shadow);
}
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fpill {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .775rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  white-space: nowrap;
}
.fpill:hover  { border-color: var(--primary); color: var(--primary); }
.fpill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-count { margin-left: auto; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

/* Cards grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

/* ── Sample ribbon ── */
.ex-card { position: relative; overflow: hidden; }

.sample-ribbon {
  position: absolute;
  top: 14px;
  right: -26px;
  width: 110px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 0;
  transform: rotate(38deg);
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
  pointer-events: none;
  z-index: 10;
}

/* Post card */
.ex-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition-slow);
}
.ex-card:hover {
  box-shadow: var(--card-shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-mid);
}

.ex-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo-wrap { flex-shrink: 0; }
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
  position: relative; overflow: hidden;
}
.brand-logo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
  pointer-events: none;
}
.ex-card-meta { flex: 1; min-width: 0; }
.ex-card-name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-card-sub {
  font-size: .775rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.ex-card-desc {
  font-size: .8375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Info grid */
.ex-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ex-info-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ex-info-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.ex-info-val {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
}
.ex-green { color: var(--success) !important; }

/* CTA button */
.ex-cta { margin-top: auto; font-size: .8375rem; }

/* Badges */
.ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ex-badge-new      { background: var(--success-bg); color: var(--success); border-color: rgba(16,185,129,.2); }
.ex-badge-closing  { background: var(--warning-bg); color: var(--warning); border-color: rgba(245,158,11,.2); }
.ex-badge-creator  { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }

/* Live / Sample badges */
.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-bg); border: 1px solid rgba(16,185,129,.3);
  color: var(--success);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px 3px 6px; border-radius: var(--radius-full);
  text-transform: uppercase; flex-shrink: 0;
}
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)} 50%{box-shadow:0 0 0 5px rgba(16,185,129,0)} }
.badge-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  animation: livePulse 1.8s ease-in-out infinite; flex-shrink: 0;
}
.badge-sample {
  display: inline-flex; align-items: center;
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .68rem; font-weight: 600; padding: 3px 9px;
  border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0;
}

/* Creator card */
.creator-card { gap: 12px; }
.creator-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.creator-avatar-wrap { position: relative; }
.creator-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem; color: #fff;
  position: relative; overflow: hidden;
}
.creator-av::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
  pointer-events: none;
}
.yt-dot { background: #FF0000; }
.creator-badge-wrap { }
.creator-info { display: flex; flex-direction: column; gap: 3px; }

/* Engagement bar */
.eng-row {
  display: flex; align-items: center; gap: 8px; font-size: .775rem; color: var(--text-secondary);
}
.eng-row strong { color: var(--text); font-size: .8125rem; white-space: nowrap; }
.eng-bar-wrap {
  flex: 1; height: 6px; background: var(--bg-secondary);
  border-radius: var(--radius-full); overflow: hidden;
}
.eng-bar {
  height: 100%; background: linear-gradient(90deg, var(--primary), #6366f1);
  border-radius: var(--radius-full);
  animation: barGrow .8s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes barGrow { from { width: 0 !important; } }

/* Card entrance */
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.ex-card { animation: cardIn .4s cubic-bezier(.22,.68,0,1.2) both; }

/* Empty state */
.empty-state {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 56px 32px; text-align: center;
}
.empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }
.empty-state p  { color: var(--text-secondary); font-size: .875rem; }

/* Skeleton */
@keyframes ci-shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.skel {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
  background-size: 600px 100%;
  animation: ci-shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.skel-top    { display:flex; gap:12px; align-items:center; }
.skel-logo   { width:44px; height:44px; border-radius:10px; flex-shrink:0; }
.skel-lines  { flex:1; display:flex; flex-direction:column; gap:7px; }
.skel-line   { height:11px; border-radius:6px; }
.skel-desc   { height:52px; border-radius:8px; }
.skel-grid   { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.skel-cell   { height:38px; border-radius:8px; }
.skel-btn    { height:38px; border-radius:9999px; margin-top:4px; }

/* Apply modal */
.apply-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.apply-modal-backdrop.open { opacity: 1; pointer-events: all; }
.apply-modal-box {
  background: var(--card-bg); border-radius: var(--radius-xl);
  width: 100%; max-width: 480px; box-shadow: var(--card-shadow-lg);
  transform: translateY(16px); transition: transform .25s; overflow: hidden;
  border: 1px solid var(--border);
}
.apply-modal-backdrop.open .apply-modal-box { transform: translateY(0); }
.am-header {
  padding: 22px 24px 16px;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.am-label  { font-size:.72rem; color:rgba(255,255,255,.7); font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:4px; }
.am-title  { font-size:1rem; font-weight:700; color:#fff; line-height:1.3; }
.am-brand  { font-size:.8rem; color:rgba(255,255,255,.75); margin-top:3px; }
.am-close  {
  flex-shrink:0; background:rgba(255,255,255,.15); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.am-close:hover { background:rgba(255,255,255,.3); }
.am-chips  { display:flex; gap:8px; padding:12px 24px; background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.am-chip   { font-size:.75rem; font-weight:600; color:var(--primary); background:var(--primary-light); padding:3px 10px; border-radius:999px; }
.am-chip:empty { display:none; }
.am-body   { padding:20px 24px 24px; }
.am-field-label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:6px; }
.am-textarea {
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; font-size:.875rem; font-family:inherit; color:var(--text);
  background: var(--card-bg);
  resize:vertical; min-height:120px; outline:none; transition:var(--transition); line-height:1.6;
}
.am-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.am-textarea::placeholder { color:var(--text-muted); }
.am-rate-wrap {
  display:flex; align-items:center; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .2s; background: var(--card-bg);
}
.am-rate-wrap:focus-within { border-color:var(--primary); }
.am-rupee { padding:9px 10px 9px 14px; font-size:.9rem; color:var(--text-secondary); font-weight:600; background:var(--bg-secondary); border-right:1px solid var(--border); }
.am-rate-input { border:none; outline:none; padding:9px 14px; font-size:.875rem; font-family:inherit; color:var(--text); width:100%; background:transparent; }
.am-error { background:var(--error-bg); border:1px solid #FECACA; color:#991B1B; font-size:.82rem; padding:8px 12px; border-radius:var(--radius-sm); margin-top:12px; }
.am-actions { display:flex; gap:10px; margin-top:18px; }
.am-cancel-btn {
  flex:1; padding:11px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--card-bg); font-size:.875rem; font-weight:600; color:var(--text-secondary);
  cursor:pointer; transition:var(--transition); font-family:inherit;
}
.am-cancel-btn:hover { background:var(--bg-secondary); }
.am-submit-btn {
  flex:2; padding:11px; border-radius:var(--radius-sm); border:none;
  background:var(--primary); color:#fff; font-size:.875rem; font-weight:700;
  cursor:pointer; transition:var(--transition); font-family:inherit;
}
.am-submit-btn:hover { background:var(--primary-hover); }
.am-submit-btn:disabled { opacity:.6; cursor:not-allowed; }
.am-note { font-size:.73rem; color:var(--text-muted); text-align:center; margin-top:12px; }

/* Messages FAB */
.msg-fab {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:52px; height:52px; border-radius:50%;
  background:var(--primary); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(124,58,237,.4); text-decoration:none; transition:var(--transition);
}
.msg-fab:hover { transform:scale(1.08); background:var(--primary-hover); }

/* Responsive */
@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: flex-start; }
  .filter-count { margin-left: 0; }
}