/*
 * Ad creatives (app/Ads/CreativeRenderer + resources/views/components/ads/*).
 * Hand-written, NOT generated: tools/extract_mockup.py rewrites site.css only.
 * Loaded by the public layout and by the admin live preview, so every rule is scoped to .adc / .ad-slot
 * (or .adc-preview). Colours come from per-ad custom properties set by the renderer:
 * --adc-bg / --adc-fg / --adc-ac (accent) / --adc-on-ac (text on accent); size from --adc-w / --adc-h.
 */
/* Slot wrapper (app/Ads/AdServer): layout-neutral, so the creative is what the page grid sees. */
.ad-slot{display:contents}
.adc{position:relative;overflow:hidden;display:block;box-sizing:border-box;width:100%;max-width:var(--adc-w);margin-inline:auto;background:var(--adc-bg);color:var(--adc-fg);font-family:"Mukta",system-ui,sans-serif;font-size:16px;line-height:1.35;text-align:left}
.adc *,.adc *::before,.adc *::after{box-sizing:border-box}
.adc a{color:inherit;text-decoration:none}
.adc img{display:block;max-width:100%}
.adc-label{position:absolute;top:0;right:0;z-index:5;font-size:11px;line-height:1;padding:3px 6px;background:rgba(255,255,255,.9);color:#444;font-weight:400}
.adc-in{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:100%;min-height:inherit;padding:0 18px}
.adc-in>:not(.adc-deco){position:relative;z-index:1}
.adc-light{border:2px solid var(--adc-fg);box-shadow:inset 0 -6px 0 var(--adc-ac)}

/* Pieces shared by the templates */
.adc-brand{flex:none;display:flex;align-items:center;gap:4px;font-weight:700;font-size:22px;line-height:1.1}
.adc-brand img{height:62px;width:auto;max-width:200px;object-fit:contain}
.adc-wave{width:30px;height:18px;align-self:flex-start;flex:none}
.adc-wave path{fill:none;stroke:var(--adc-ac);stroke-width:3;stroke-linecap:round;opacity:.15;animation:adc-wave 1.8s ease-in-out infinite}
.adc-wave path:nth-child(2){animation-delay:.2s}
.adc-wave path:nth-child(3){animation-delay:.4s}
@keyframes adc-wave{40%{opacity:1}}

.adc-msgs{position:relative;flex:1;min-width:0;height:1.5em;overflow:hidden;font-size:18px;font-weight:600}
.adc-msgs>span{position:absolute;inset:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adc-n2>span,.adc-n3>span{opacity:0;transform:translateY(100%)}
.adc-n2>span{animation:adc-msg2 6s infinite}
.adc-n2>span:nth-child(2){animation-delay:3s}
.adc-n3>span{animation:adc-msg3 9s infinite}
.adc-n3>span:nth-child(2){animation-delay:3s}
.adc-n3>span:nth-child(3){animation-delay:6s}
@keyframes adc-msg2{0%{opacity:0;transform:translateY(100%)}7%,45%{opacity:1;transform:none}53%,100%{opacity:0;transform:translateY(-100%)}}
@keyframes adc-msg3{0%{opacity:0;transform:translateY(100%)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-100%)}}

.adc-btn{flex:none;display:inline-block;background:var(--adc-ac);color:var(--adc-on-ac);font-weight:700;font-size:15px;padding:7px 16px;border-radius:3px;white-space:nowrap;transition:filter .2s}
.adc-in:hover .adc-btn,.adc-in:focus-visible .adc-btn{filter:brightness(1.12)}
.adc-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:15px}
.adc-text b,.adc-text strong{font-size:18px;line-height:1.3}
.adc-spons{flex:none;font-size:13px;font-weight:700;color:var(--adc-ac)}

.adc-price{position:relative;flex:none;align-self:stretch;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6px 18px;background:var(--adc-ac);color:var(--adc-on-ac)}
.adc-price b{position:relative;z-index:1;font-size:26px;line-height:1.1}
.adc-price small{position:relative;z-index:1;font-size:13px;opacity:.9;margin-top:4px}
.adc-coin{position:absolute;top:-24px;width:18px;height:18px;border-radius:50%;background:var(--adc-on-ac);opacity:.3;animation:adc-drop 2.6s linear infinite}
@keyframes adc-drop{to{transform:translateY(190px)}}

.adc-cd{flex:none;display:flex;gap:6px}
.adc-cd>span{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:2px 8px;background:rgba(0,0,0,.2)}
.adc-light .adc-cd>span{background:rgba(0,0,0,.07)}
.adc-cd b{font-size:19px;line-height:1.2}
.adc-cd small{font-size:11px}

.adc-visual{flex:none;display:grid;place-items:center}
.adc-visual img{max-height:56px;width:auto}

/* Decoration (aria-hidden) */
.adc-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.adc-hills{position:absolute;left:0;bottom:0;width:200%;height:75%;fill:currentColor;opacity:.13;animation:adc-pan 40s linear infinite}
.adc-hills.adc-far{height:95%;opacity:.07;animation-duration:80s}
@keyframes adc-pan{to{transform:translateX(-50%)}}
.adc-road{position:absolute;left:0;right:0;bottom:0;height:36px;background:rgba(0,0,0,.28);overflow:hidden}
.adc-road::before{content:"";position:absolute;left:0;top:16px;width:200%;height:4px;background:repeating-linear-gradient(90deg,var(--adc-ac) 0 40px,transparent 40px 80px);animation:adc-pan 1.2s linear infinite}
.adc-mtn{position:absolute;left:0;bottom:0;width:100%;height:34%;fill:currentColor;opacity:.12}
.adc-ring{position:absolute;left:50%;top:22%;width:150px;height:150px;margin-left:-75px;border:3px solid var(--adc-ac);border-radius:50%;opacity:.35;animation:adc-pulse 3s ease-in-out infinite alternate}
.adc-ring::after{content:"";position:absolute;inset:28px;border:3px solid var(--adc-ac);border-radius:50%;opacity:.6}
@keyframes adc-pulse{from{transform:scale(.85)}to{transform:scale(1.08)}}
.adc-t-price .adc-ring{display:none}

/* Layout: banner (A1 970×90, A1b 1200×110, A9 image) */
.adc--banner{height:var(--adc-h)}

/* Layout: billboard (A4 970×250) */
.adc--billboard{height:var(--adc-h)}
.adc--billboard .adc-in{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:24px 32px 52px}
.adc--billboard .adc-brand{font-size:20px;color:var(--adc-ac)}
.adc--billboard .adc-msgs,.adc--billboard .adc-text{flex:none;width:min(60%,560px)}
.adc--billboard .adc-msgs{height:2.5em;font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.25}
.adc--billboard .adc-msgs>span{white-space:normal}
.adc--billboard .adc-text b,.adc--billboard .adc-text strong{font-size:clamp(22px,3vw,34px)}
.adc--billboard .adc-btn{position:absolute;right:28px;top:28px;font-size:16px;padding:9px 18px}
.adc--billboard .adc-price{align-self:flex-start;padding:8px 18px}

/* Layout: vertical (A5 / A5b 300×600) */
.adc--vertical{width:var(--adc-w);height:var(--adc-h);max-width:100%}
.adc--vertical .adc-in{flex-direction:column;align-items:stretch;gap:10px;padding:26px 22px}
.adc--vertical .adc-brand{font-size:26px;color:var(--adc-ac)}
.adc--vertical .adc-brand img{height:72px}
.adc--vertical .adc-msgs{flex:none;margin-top:auto;height:4em;font-size:30px;font-weight:700;line-height:1.25}
.adc--vertical .adc-msgs>span{white-space:normal}
.adc--vertical .adc-text{flex:none;margin-top:auto}
.adc--vertical .adc-text b,.adc--vertical .adc-text strong{font-size:28px}
.adc--vertical .adc-price{align-self:stretch;height:130px}
.adc--vertical .adc-price b{font-size:36px}
.adc--vertical .adc-cd{justify-content:center}
.adc--vertical .adc-btn{text-align:center;margin-bottom:70px}

/* Layout: card (A3 in-feed, A6 / A7 in-read) */
.adc--card{border:1px solid rgba(0,0,0,.1)}
.adc--card .adc-in{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
.adc--card .adc-msgs{flex:none;width:100%;height:2.6em;font-size:20px;font-weight:700;line-height:1.3}
.adc--card .adc-msgs>span{white-space:normal}
.adc--card .adc-text{flex:none}
.adc--card .adc-text b,.adc--card .adc-text strong{font-size:20px}
.adc--card .adc-price{align-self:stretch;height:120px}
.adc--card .adc-price b{font-size:34px}
.adc--card .adc-btn{margin-top:auto}

/* Layout: anchor (A8, fixed to the bottom of the screen, closable) */
.adc--anchor{position:fixed;left:50%;bottom:12px;z-index:60;width:min(var(--adc-w),calc(100% - 24px));max-width:none;height:var(--adc-h);overflow:visible;transform:translateX(-50%);box-shadow:0 6px 20px rgba(0,0,0,.25);animation:adc-rise .5s ease-out both 1.2s}
.adc--anchor.adc-light{box-shadow:inset 0 -6px 0 var(--adc-ac),0 6px 20px rgba(0,0,0,.25)}
@keyframes adc-rise{from{transform:translate(-50%,130%)}}
.adc--anchor .adc-in{gap:18px;padding:0 54px 0 18px}
.adc--anchor .adc-label{top:-17px;right:auto;left:0}
.adc--anchor .adc-brand{font-size:22px;color:var(--adc-ac)}
.adc--anchor .adc-brand img{height:48px}
.adc--anchor .adc-text b{font-size:17px}
.adc--anchor .adc-cd{margin-left:auto}
.adc--anchor .adc-price{margin:6px 0}
.adc-x{position:absolute;right:10px;top:50%;z-index:6;width:32px;height:32px;transform:translateY(-50%);border:0;background:rgba(128,128,128,.28);color:inherit;font-size:18px;line-height:1;cursor:pointer}
.adc.adc-gone{display:none}

/* Layout: credit (A2 trending strip, A9 section header, A10 end of article) */
.adc--credit{max-width:none;background:none;color:inherit;overflow:visible;border:0;box-shadow:none}
.adc-inline{display:inline;width:auto}
.adc-inline .adc-in{display:inline;padding:0}
.adc-inline .adc-label{position:static;display:inline-block;margin-right:6px;padding:0;background:none;color:inherit;opacity:.65;vertical-align:1px}
.adc-sp{color:var(--adc-ac);font-weight:700}
.adc-t-credit:not(.adc-inline){border-top:1px solid #DCDCE3;border-bottom:1px solid #DCDCE3}
.adc-t-credit:not(.adc-inline) .adc-in{gap:14px;padding:14px 0}
.adc-t-credit:not(.adc-inline) .adc-label{background:none;padding:3px 0}
.adc-t-credit .adc-text strong{font-size:16px}
.adc-t-credit .adc-text small{font-size:14px;opacity:.75}
.adc-lg{flex:none;display:grid;place-items:center;width:56px;height:56px;background:var(--adc-bg);color:var(--adc-fg);font-size:26px;font-weight:700}
.adc-lg img{max-width:48px;max-height:48px}

/* Image and video creatives: the file sets the size */
.adc.adc-t-img,.adc.adc-t-video{height:auto;border:0;box-shadow:none;background:none}
.adc--anchor.adc-t-img,.adc--anchor.adc-t-video{box-shadow:0 6px 20px rgba(0,0,0,.25)}
.adc-t-img .adc-in,.adc-t-video .adc-in{display:block;height:auto;padding:0}
.adc-t-img img,.adc-media{display:block;width:100%;height:auto}
.adc-media{background:var(--adc-bg)}

/* Phones */
@media (max-width:760px){
  .adc--banner{height:auto;min-height:64px}
  .adc--banner .adc-in{gap:8px;padding:8px 10px}
  .adc--banner .adc-brand{font-size:18px}
  .adc--banner .adc-brand img{height:44px;max-width:120px}
  .adc--banner .adc-msgs{font-size:15px}
  .adc--banner .adc-btn,.adc--banner .adc-cd{display:none}
  .adc--banner .adc-in{flex-wrap:wrap}
  .adc--banner .adc-spons{flex-basis:100%}
  .adc--banner .adc-price{align-self:auto;padding:4px 10px}
  .adc--banner .adc-price b{font-size:18px}
  .adc--banner .adc-text{flex:1 1 150px}
  .adc--banner .adc-visual img{max-height:36px}
  .adc--billboard{height:auto;min-height:300px}
  .adc--billboard .adc-in{padding:20px 20px 96px}
  .adc--billboard .adc-msgs,.adc--billboard .adc-text{width:100%}
  .adc--billboard .adc-btn{top:auto;right:auto;bottom:52px;left:20px}
  .adc--anchor{height:auto;min-height:var(--adc-mh,60px);width:min(var(--adc-mw,100%),calc(100% - 24px))}
  .adc--anchor .adc-in{gap:10px;padding:8px 48px 8px 12px}
  .adc--anchor .adc-brand{font-size:18px}
  .adc--anchor .adc-brand img{height:36px}
  .adc--anchor .adc-text{font-size:13px}
  .adc--anchor .adc-text b{font-size:14px}
  .adc--anchor .adc-cd,.adc--anchor .adc-btn,.adc--anchor .adc-price{display:none}
  body.th-anchor{padding-bottom:84px} /* keep the page end clear of the open anchor (site.js) */
}

@media (prefers-reduced-motion:reduce){
  .adc,.adc *,.adc *::before,.adc *::after{animation:none!important;transition:none!important}
  .adc-msgs>span:first-child{opacity:1;transform:none}
}

/* Admin live preview: show the anchor in place instead of fixed to the screen */
.adc-preview .adc--anchor{position:relative;left:auto;bottom:auto;margin-top:20px;transform:none;animation:none}