/* ============================================================
   Living Extra — Advertisement & Promotion System (front-end)
   Tier badges, premium promoted cards, and the homepage
   promotion rails. Builds on the global tokens in livingextra.css.
   ============================================================ */

/* ---------- Tier badge (corner chip on any card) ---------- */
.le-adbadge{
  position:absolute; top:12px; right:12px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:100px;
  font-family:var(--sans,'Inter',sans-serif); font-size:11px; font-weight:800; letter-spacing:.02em;
  color:#fff; line-height:1; white-space:nowrap;
  box-shadow:0 4px 12px -3px rgba(21,16,31,.45);
  backdrop-filter:saturate(1.2);
  /* Decorative label — must never swallow a click meant for the control
     underneath it (the save heart shares this corner). */
  pointer-events:none;
}
.le-adbadge svg{width:11px;height:11px;flex-shrink:0}
.le-adbadge--featured { background:linear-gradient(135deg,#12c2b0,#0FB5A6); }
.le-adbadge--premium  { background:linear-gradient(135deg,#f43f7f,#EC1E5C); }
.le-adbadge--platinum { background:linear-gradient(135deg,#8b6cff,#6a44e0); }
.le-adbadge--spotlight{ background:linear-gradient(135deg,#8b6cff,#6a44e0); }

/* Badge sitting on the existing JS-rendered buy/rent cards (.pcard-media).
   The save heart occupies the top-right corner (36px wide at right:10px), so
   the badge sits to its LEFT instead of on top of it — previously the badge
   covered the heart and made promoted listings impossible to save. */
.pcard-media .le-adbadge{ top:12px; right:54px; }

/* ---------- Premium promoted card ring ---------- */
.pcard.is-promoted{ box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3.5px rgba(236,30,92,.35),var(--shadow,0 10px 30px -12px rgba(21,16,31,.25)); }
.pcard.is-platinum{ box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3.5px rgba(106,68,224,.45),var(--shadow,0 10px 30px -12px rgba(21,16,31,.25)); }
.pcard.is-premium { box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3.5px rgba(236,30,92,.42),var(--shadow,0 10px 30px -12px rgba(21,16,31,.25)); }
.pcard.is-featured{ box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3.5px rgba(15,181,166,.42),var(--shadow,0 10px 30px -12px rgba(21,16,31,.25)); }

/* Same premium ring for the homepage .lc listing cards. */
.lc.is-platinum{ box-shadow:0 0 0 2.5px rgba(106,68,224,.5); border-radius:16px; }
.lc.is-premium { box-shadow:0 0 0 2.5px rgba(236,30,92,.46); border-radius:16px; }
.lc.is-featured{ box-shadow:0 0 0 2.5px rgba(15,181,166,.46); border-radius:16px; }
.lc.is-promoted .lc-media{ border-radius:16px 16px 0 0; }

/* ============================================================
   Homepage promotion sections + card rail
   ============================================================ */
.ad-section{ padding:44px 0; }
.ad-section + .ad-section{ padding-top:8px; }
.ad-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ad-eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ad-accent,#EC1E5C); margin-bottom:6px;
}
.ad-section-head h2{ font-size:clamp(21px,2.6vw,28px); margin:0; letter-spacing:-.01em; }
.ad-section-sub{ color:var(--ink-2,#5b5563); font-size:14.5px; font-weight:500; margin:6px 0 0; }
.ad-section-all{
  flex-shrink:0; font-weight:700; font-size:14px; color:var(--ad-accent,#EC1E5C); text-decoration:none; white-space:nowrap;
}
.ad-section-all:hover{ text-decoration:underline; }

/* rail: horizontal scroll-snap on small screens, grid on wide */
.ad-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 14px; margin:0 -2px;
}
.ad-rail::-webkit-scrollbar{ height:8px; }
.ad-rail::-webkit-scrollbar-thumb{ background:var(--line,#e6e3ea); border-radius:8px; }
@media(min-width:1080px){ .ad-rail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; } }

/* ---------- Promoted card ---------- */
.ad-card{
  position:relative; display:flex; flex-direction:column; scroll-snap-align:start;
  background:var(--card,#fff); border:1px solid var(--line,#e9e6ee); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.ad-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg,0 18px 40px -16px rgba(21,16,31,.32)); border-color:transparent; }
.ad-card.is-promoted{ border-color:transparent; box-shadow:0 0 0 2px color-mix(in srgb, var(--ad-accent,#EC1E5C) 30%, transparent),0 8px 24px -14px rgba(21,16,31,.3); }
.ad-card.is-platinum{ box-shadow:0 0 0 2px rgba(106,68,224,.4),0 8px 24px -14px rgba(21,16,31,.3); }
.ad-card.is-premium { box-shadow:0 0 0 2px rgba(236,30,92,.38),0 8px 24px -14px rgba(21,16,31,.3); }
.ad-card.is-featured{ box-shadow:0 0 0 2px rgba(15,181,166,.38),0 8px 24px -14px rgba(21,16,31,.3); }

.ad-card-media{ position:relative; aspect-ratio:16/11; background:linear-gradient(135deg,#f3eefc,#ffe7ef); overflow:hidden; }
.ad-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ad-card:hover .ad-card-media img{ transform:scale(1.06); }
.ad-card-deal{
  position:absolute; top:12px; left:12px; z-index:3;
  background:rgba(21,16,31,.72); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; backdrop-filter:blur(4px);
}
.ad-card-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:4px; }
.ad-card-price{ font-family:var(--disp,'Sora',sans-serif); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink,#1c1622); }
.ad-card-price small{ font-family:var(--sans,'Inter',sans-serif); font-size:12px; font-weight:600; color:var(--ink-3,#8a8391); }
.ad-card-title{ font-weight:700; font-size:15px; line-height:1.3; color:var(--ink,#1c1622); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ad-card-loc{ display:flex; align-items:center; gap:5px; color:var(--ink-3,#8a8391); font-size:12.5px; font-weight:600; }
.ad-card-loc svg{ color:var(--ad-accent,#EC1E5C); flex-shrink:0; }
.ad-card-loc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-card-meta{ display:flex; gap:12px; margin-top:6px; color:var(--ink-2,#5b5563); font-size:12.5px; font-weight:600; }

@media(max-width:680px){
  .ad-section{ padding:32px 0; }
  .ad-section-head h2{ font-size:20px; }
  .ad-rail{ grid-auto-columns:minmax(220px,80%); }
}

/* ============================================================
   Advertiser dashboard — Promotions tab
   ============================================================ */
.btn-sm{ padding:8px 14px !important; font-size:13px !important; }
.ad-dash-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.ad-dash-top p{ color:var(--ink-2,#5b5563); font-size:14.5px; margin:0; max-width:520px; }
.ad-dash-h{ font-size:16px; font-family:var(--disp,'Sora',sans-serif); margin:26px 0 12px; }

/* notifications */
.ad-notifs{ display:flex; flex-direction:column; gap:2px; background:var(--card,#fff); border:1px solid var(--line,#e9e6ee); border-radius:14px; overflow:hidden; margin:14px 0 4px; }
.ad-notif{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2,#f0eef3); }
.ad-notif:last-child{ border-bottom:none; }
.ad-notif.unread{ background:var(--rose-l,#fdeef3); }
.ad-notif-ico{ font-size:18px; flex-shrink:0; }
.ad-notif-s{ flex:1; font-size:14px; font-weight:600; color:var(--ink,#1c1622); }
.ad-notif.unread .ad-notif-s::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--rose,#EC1E5C); margin-left:7px; vertical-align:middle; }
.ad-notif-t{ font-size:12px; color:var(--ink-3,#8a8391); font-weight:600; flex-shrink:0; }

.ad-promo{ background:var(--card,#fff); border:1px solid var(--line,#e9e6ee); border-radius:16px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow,0 8px 24px -16px rgba(21,16,31,.2)); }
.ad-promo--pending{ border-style:dashed; }
.ad-promo-head{ display:flex; align-items:center; gap:14px; }
.ad-promo-thumb{ width:74px; height:56px; border-radius:11px; overflow:hidden; background:var(--line-2,#eee); flex-shrink:0; }
.ad-promo-thumb img{ width:100%; height:100%; object-fit:cover; }
.ad-promo-info{ flex:1; min-width:0; }
.ad-promo-title{ display:block; font-weight:700; font-size:15px; color:var(--ink,#1c1622); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-promo-title:hover{ color:var(--rose,#EC1E5C); }
.ad-promo-meta{ display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:wrap; }
.ad-promo-meta .le-adbadge{ box-shadow:none; }
.ad-promo-pkg{ font-size:12.5px; color:var(--ink-3,#8a8391); font-weight:600; }
.ad-promo-left{ text-align:center; flex-shrink:0; padding:4px 10px; border-radius:12px; background:var(--bg,#f6f5f8); }
.ad-promo-left b{ display:block; font-family:var(--disp,'Sora',sans-serif); font-size:22px; font-weight:800; line-height:1; color:var(--ink,#1c1622); }
.ad-promo-left span{ font-size:10.5px; color:var(--ink-3,#8a8391); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ad-promo-left.soon b{ color:var(--rose,#EC1E5C); }
.ad-promo-stats{ display:flex; gap:10px; margin:14px 0 12px; flex-wrap:wrap; }
.ad-promo-stats div{ flex:1; min-width:64px; background:var(--bg,#f6f5f8); border-radius:11px; padding:9px 6px; text-align:center; }
.ad-promo-stats b{ display:block; font-family:var(--disp,'Sora',sans-serif); font-size:18px; font-weight:800; color:var(--ink,#1c1622); }
.ad-promo-stats span{ font-size:11px; color:var(--ink-3,#8a8391); font-weight:600; }
.ad-promo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.ad-pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:100px; white-space:nowrap; }
.ad-pill.ok{ background:#e9f9f0; color:#0d7a45; }
.ad-pill.wait{ background:#fff4e5; color:#9a6412; }
.ad-pill.due{ background:var(--rose-l,#fdeef3); color:var(--rose,#EC1E5C); }
.ad-pill.bad{ background:#fdecec; color:#c0261c; }
.ad-pill.muted{ background:var(--bg,#f2f0f5); color:var(--ink-3,#8a8391); }
.ad-pay-table code{ font-size:12px; color:var(--ink-2,#5b5563); }

/* daily performance chart + ROI */
.ad-chart{ background:var(--bg,#f6f5f8); border-radius:12px; padding:12px 14px 8px; margin-bottom:12px; }
.ad-chart-legend{ display:flex; gap:14px; margin-bottom:4px; }
.ad-chart-legend .lg{ font-size:11px; font-weight:700; color:var(--ink-3,#8a8391); display:inline-flex; align-items:center; gap:5px; }
.ad-chart-legend .lg::before{ content:""; width:10px; height:3px; border-radius:2px; }
.ad-chart-legend .imp::before{ background:#8b6cff; }
.ad-chart-legend .viw::before{ background:#0FB5A6; }
.ad-chart-legend .clk::before{ background:#EC1E5C; }
.ad-chart-svg{ display:block; width:100%; height:80px; }
.ad-chart-cap{ font-size:10.5px; color:var(--ink-3,#8a8391); font-weight:600; text-align:right; }
.ad-roi{ display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.ad-roi div{ flex:1; min-width:90px; background:var(--card,#fff); border:1px solid var(--line,#e9e6ee); border-radius:11px; padding:9px 12px; }
.ad-roi span{ display:block; font-size:11px; color:var(--ink-3,#8a8391); font-weight:600; }
.ad-roi b{ font-family:var(--disp,'Sora',sans-serif); font-size:16px; font-weight:800; color:var(--ink,#1c1622); }

@media(max-width:560px){
  .ad-promo-stats div{ min-width:0; }
  .ad-promo-left{ padding:4px 8px; }
}