/* TW Gamified Coupon – twgc.css (v1.6.5) */
/* --------- TWGC – общи стилове начало --------- */


/* --------- TWGC Base / Modal начало --------- */
:root{
  --twgc-z: 99999;
  --twgc-card-radius: 18px;
  --twgc-accent: #5ad;

  /* наследяване на акцент от темата (fallback-и) */
  --twgc-theme-accent: var(--wp--preset--color--primary,
                       var(--global-palette1,
                       var(--bs-primary,
                       var(--color-primary,
                       var(--ast-global-color-0,
                       var(--theme-color, #111))))));

  --twgc-theme-onaccent: #fff; /* JS може да пренапише според контраста */
}

.twgc-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:calc(var(--twgc-z) - 1);
  opacity:0;
  transition:opacity .25s ease;
}
.twgc-overlay.show{ opacity:1; }

.twgc-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:16px;
  overflow:hidden;
  z-index:var(--twgc-z);
}
.twgc-modal[hidden]{ display:none; }

.twgc-card{
  position:relative;
  background:#fff;
  border-radius:var(--twgc-card-radius);
  border:3px solid var(--twgc-accent);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:24px;
  width:min(92vw, 760px);
  text-align:center;

  opacity:0;
  transform:scale(.94) translateY(10px);
  animation:twgc-appear .4s ease forwards;
}
@keyframes twgc-appear{
  to{ opacity:1; transform:scale(1) translateY(0) }
}

/* по-видим бутон за затваряне (Х) */
.twgc-close{
  position:absolute;
  top:10px;
  right:10px;

  width:32px;
  height:32px;

  border:0;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,.95);
  color:#111;
  font-size:22px;
  line-height:1;

  cursor:pointer;
  opacity:1;
  box-shadow:0 4px 10px rgba(0,0,0,.20);
  z-index:4;

  transition:
    background-color .18s ease,
    color .18s ease,
    transform .10s ease,
    box-shadow .18s ease;
}
.twgc-close:hover{
  background:#111;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}
.twgc-close:active{
  background:#111;
  color:#fff;
  transform:translateY(0) scale(.96);
  box-shadow:0 3px 8px rgba(0,0,0,.20);
}

/* Скрий заглавията в картата при overlay headline */
.twgc-head-hidden .twgc-title,
.twgc-head-hidden .twgc-msg{
  display:none !important;
}
/* --------- TWGC Base / Modal край --------- */




/* --------- TWGC Overlay headline & helper начало --------- */
/* ===== Overlay headline (централно интро) ===== */
.twgc-head-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none;
}
.twgc-headtext{
  font-size:clamp(22px, 4.8vw, 36px);
  font-weight:800;
  color:#111;
  background:rgba(255,255,255,.88);
  padding:12px 18px;
  border-radius:16px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
  transform:scale(.85);
  opacity:0;
  animation:twgc-pop .45s cubic-bezier(.2,1,.4,1) forwards;
}
@keyframes twgc-pop{
  to{ transform:scale(1); opacity:1 }
}
.twgc-head-overlay.twgc-out .twgc-headtext{
  animation: twgc-popout .36s ease forwards;
}
@keyframes twgc-popout{
  to{ transform:scale(.96); opacity:0 }
}

/* ===== Помощен текст ===== */
.twgc-helper{
  margin:10px 0 6px;
  font-size:clamp(13px, 1.8vw, 15px);
  color:#5b6470;
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

/* Не ползваме стария reveal блок */
.twgc-reveal{ display:none !important; }
/* --------- TWGC Overlay headline & helper край --------- */


/* --------- TWGC Wheel & pointer начало --------- */
/* ===== Колело ===== */
.twgc-wheelwrap{
  position:relative;
  display:grid;
  place-items:center;
  margin:16px auto;
}

.twgc-wheel{
  --twgc-wheel: 360px;
  --twgc-ring: #2dd4bf;
  --twgc-ring-w:10px;

  position:relative;
  inline-size:var(--twgc-wheel);
  block-size:var(--twgc-wheel);
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  border:var(--twgc-ring-w) solid var(--twgc-ring);
  box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 0 0 6px #fff;
  transform:rotate(0deg);
}
.twgc-wheel::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  box-shadow:inset 0 0 40px rgba(0,0,0,.12);
  z-index:1;
}

/* Бутон Завърти – наследява тема */
.twgc-spin{
  margin-top:8px;
  border-radius:999px;
  padding:10px 18px;
  border:1px solid var(--twgc-theme-accent);
  background: var(--twgc-theme-accent);
  color: var(--twgc-theme-onaccent);
  cursor:pointer;
  font-weight:700;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease, color .18s ease;
}
.twgc-spin:hover{
  background: color-mix(in srgb, var(--twgc-theme-accent) 88%, white 12%);
  color: var(--twgc-theme-onaccent);
  transform: translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}
.twgc-spin:active{
  background: color-mix(in srgb, var(--twgc-theme-accent) 80%, black 20%);
  color: var(--twgc-theme-onaccent);
  transform: translateY(1px) scale(.98);
}
.twgc-spin[disabled]{ opacity:.6; cursor:not-allowed }

/* Състояния на колелото */
.twgc-wheel.trail{
  box-shadow:0 0 0 10px rgba(255,255,255,.45) inset,
             0 0 40px rgba(255,255,255,.28);
}
.twgc-wheel.win::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.5);
}

/* ===== Overlay слоеве върху колелото ===== */
.twgc-hit,
.twgc-winring{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
}
.twgc-hit.show{
  animation: twgc-hitpulse 800ms ease-out both;
}
@keyframes twgc-hitpulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0) }
  50%{ box-shadow:0 0 0 14px rgba(255,255,255,.28) }
  100%{ box-shadow:inset 0 0 0 6px rgba(255,255,255,.6) }
}

.twgc-winring{
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 0);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
  opacity:0;
}
.twgc-winring.show{
  animation: twgc-ringpulse .9s ease forwards;
}
@keyframes twgc-ringpulse{
  0%{ opacity:0 }
  40%{ opacity:1 }
  100%{ opacity:1 }
}

/* ===== Човка ===== */
.twgc-pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;

  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:18px solid var(--twgc-ring);

  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
  transition:transform .08s ease;
}
.twgc-pointer::before{
  content:"";
  position:absolute;
  top:14px; left:-7px;
  width:14px; height:24px;

  background:#fff;
  border:3px solid var(--twgc-ring);
  border-top:none;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;

  box-shadow: inset 0 4px 8px rgba(0,0,0,.12);
  transform-origin:50% 0;
}
.twgc-pointer.tick{
  transform: translateX(-50%) translateY(-2px) rotate(-2deg);
}
.twgc-pointer.tick::before{
  animation: twgc-flap .12s ease-out;
}
@keyframes twgc-flap{
  0%{ transform:rotate(0) }
  50%{ transform:rotate(-16deg) }
  100%{ transform:rotate(0) }
}

/* Искрица при тик */
.twgc-spark{
  position:absolute;
  top:-6px; left:50%;
  width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.95), rgba(255,255,255,0));
  transform: translate(-50%, 0);
  opacity:0;
  pointer-events:none;
  z-index:2;
  animation: twgc-sparkle .35s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
@keyframes twgc-sparkle{
  0%{ opacity:0; transform:translate(-50%, 0) scale(.7) }
  30%{ opacity:1 }
  100%{ opacity:0; transform:translate(-50%, -16px) scale(1.3) }
}
/* --------- TWGC Wheel & pointer край --------- */


/* --------- TWGC Burst, код и reward начало --------- */
/* ===== ПЕРСИСТЕНТЕН BURST (кодът остава над колелото) ===== */
.twgc-code-burst{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  z-index:6;
  pointer-events:none;
}
.twgc-code-burst.in{ display:grid; }

.twgc-burst-stack{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:auto;
}

.twgc-burst-rays{
  position:absolute;
  inset:-20px;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,.0) 0 12deg,
    rgba(255,255,255,.45) 12deg 18deg,
    rgba(255,255,255,0) 18deg 30deg);
  border-radius:50%;
  filter:blur(.3px);
  transform:scale(.6) rotate(-10deg);
  opacity:0;
}
.twgc-code-burst.in .twgc-burst-rays{
  animation: twgc-rays-in 900ms ease-out forwards,
             twgc-rays-rot 14s linear infinite 900ms;
}
@keyframes twgc-rays-in{
  to{ transform:scale(1) rotate(0); opacity:1 }
}
@keyframes twgc-rays-rot{
  to{ transform:scale(1) rotate(360deg) }
}

/* Голям банер с кода – наследява темата */
.twgc-codebig{
  position:relative;
  font-size:clamp(28px, 6vw, 48px);
  font-weight:900;
  letter-spacing:.06em;

  background: var(--twgc-code-bg, var(--twgc-theme-accent));
  color: var(--twgc-code-fg, var(--twgc-theme-onaccent));

  padding:14px 22px;
  border-radius:18px;
  border:0;

  box-shadow:0 20px 40px rgba(0,0,0,.25),
             0 0 0 0 rgba(255,255,255,.0);

  transform:scale(.6) rotate(-6deg);
  opacity:0;
  cursor:pointer;

  transition: background-color .18s ease,
              transform .12s ease,
              box-shadow .18s ease,
              color .18s ease;
}

.twgc-code-burst.in .twgc-codebig{
  animation: twgc-burst-in 520ms cubic-bezier(.2,1,.3,1) forwards,
             twgc-burst-glow 2.6s ease-in-out infinite 540ms;
}
@keyframes twgc-burst-in{
  0%{ transform:scale(.6) rotate(-6deg); opacity:0 }
  70%{ transform:scale(1.12) rotate(0deg); opacity:1 }
  100%{ transform:scale(1) rotate(0deg); opacity:1 }
}
@keyframes twgc-burst-glow{
  0%,100%{
    box-shadow:0 20px 40px rgba(0,0,0,.25),
               0 0 0 0 rgba(255,255,255,.0)
  }
  50%{
    box-shadow:0 20px 40px rgba(0,0,0,.25),
               0 0 40px 6px rgba(255,255,255,.28)
  }
}

.twgc-codebig:hover{
  background: color-mix(in srgb, var(--twgc-code-bg, var(--twgc-theme-accent)) 88%, white 12%);
  color: var(--twgc-code-fg, var(--twgc-theme-onaccent));
  transform: translateY(-1px);
}
.twgc-codebig:active{
  background: color-mix(in srgb, var(--twgc-code-bg, var(--twgc-theme-accent)) 80%, black 20%);
  color: var(--twgc-code-fg, var(--twgc-theme-onaccent));
  transform: translateY(1px) scale(.98);
}

/* Feedback „Копирано!“ */
.twgc-codebig.copied::after{
  content:"Отстъпката вече е приложена";
  position:absolute;
  left:50%;
  top:-14px;
  transform:translate(-50%,-6px);
  background:#111;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  animation: twgc-copynote 2s ease forwards;
}
@keyframes twgc-copynote{
  0%{ opacity:0; transform:translate(-50%,-8px) scale(.95) }
  20%,85%{ opacity:1; transform:translate(-50%,0) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-8px) scale(.96) }
}

/* Бележка „Това е твоят код…“ – наследява темата */
.twgc-reward-note{
  margin-top: 6px;
  background: var(--twgc-reward-bg, var(--twgc-theme-accent));
  color: var(--twgc-reward-color, var(--twgc-theme-onaccent));
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;

  transform: translateY(8px) scale(.96);
  opacity: 0;

  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.twgc-code-burst.in .twgc-reward-note{
  animation: twgc-reward-in .45s cubic-bezier(.2,1,.3,1) 200ms forwards;
}
@keyframes twgc-reward-in{
  to{ opacity:1; transform: translateY(0) scale(1); }
}
/* --------- TWGC Burst, код и reward край --------- */


/* --------- TWGC Copy hint & конфети начало --------- */
/* ==== Hint: „Кликни за копиране“ ==== */
.twgc-codebig.copy-hint{ position:relative; }

.twgc-codebig.copy-hint::before{
  content: "Активирай отстъпката";
  position:absolute;
  left:50%;
  bottom:100%;
  transform: translate(-50%, -6px);

  background: var(--twgc-code-fg, #fff);
  color: var(--twgc-code-bg, #111);

  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;

  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 8px 16px rgba(0,0,0,.18);

  opacity:0;
  pointer-events:none;
  animation: twgc-copyhint-in .45s ease forwards;
}
@keyframes twgc-copyhint-in{
  to{ opacity:1 }
}
.twgc-codebig.copy-hint.hide-hint::before{
  animation: twgc-copyhint-out .25s ease forwards;
}
@keyframes twgc-copyhint-out{
  to{ opacity:0; transform: translate(-50%, -2px) }
}

.twgc-codebig.copy-hint{
  animation: twgc-wiggle 1.2s ease-in-out 1.2s 2;
}
@keyframes twgc-wiggle{
  0%,100%{ transform: translateY(0) rotate(0) }
  20%{ transform: translateY(-1px) rotate(-1.5deg) }
  40%{ transform: translateY(0) rotate(.8deg) }
  60%{ transform: translateY(-1px) rotate(-1deg) }
  80%{ transform: translateY(0) rotate(.6deg) }
}

/* ===== Конфети ===== */
.twgc-confetti{
  position:fixed;
  top:0; left:0;
  width:8px; height:14px;
  border-radius:2px;
  pointer-events:none;
  opacity:0;
  z-index:var(--twgc-z);
  animation:twgc-fall linear forwards;
}
@keyframes twgc-fall{
  0%{
    opacity:0;
    transform:translate(var(--x,0), var(--y,-20px)) rotate(0)
  }
  10%{ opacity:1 }
  100%{
    transform:translate(var(--x,0), var(--h,600px)) rotate(720deg);
    opacity:0
  }
}
/* --------- TWGC Copy hint & конфети край --------- */


/* --------- TWGC Reduced motion начало --------- */
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .twgc-overlay,
  .twgc-card,
  .twgc-pointer,
  .twgc-codebig,
  .twgc-burst-rays,
  .twgc-spin{
    transition:none !important;
    animation:none !important;
  }
}
/* --------- TWGC Reduced motion край --------- */


/* --------- TWGC Бранд туикове & CTA начало --------- */
/* ---- Бранд туикове (пример; можеш да махнеш) ---- */
.twgc-root { --twgc-helper-color: #8a3ffc; }

.twgc-helper{
  color:#ffff63;
  font-weight:700;
  text-transform:uppercase;
}
.twgc-root { --twgc-accent: #720167; }

.twgc-root .twgc-card{
  background:#e858da;
}

/* --- По-акцентен CTA бутон --- */
.twgc-spin.twgc-cta{
  font-size: clamp(16px, 2.3vw, 18px);
  padding: 12px 22px;
  border-width: 2px;

  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);

  animation: twgc-cta-bounce 1.6s ease-in-out infinite,
             twgc-cta-glow 1.8s ease-out infinite;
}
@keyframes twgc-cta-bounce{
  0%,100%{ transform: translateY(0) }
  50% { transform: translateY(-2px) scale(1.02) }
}
@keyframes twgc-cta-glow{
  0% {
    box-shadow: 0 12px 24px rgba(0,0,0,.18),
                 0 0 0 0 color-mix(in srgb, var(--twgc-theme-accent) 40%, transparent)
  }
  70% {
    box-shadow: 0 12px 24px rgba(0,0,0,.18),
                 0 0 0 14px color-mix(in srgb, var(--twgc-theme-accent) 0%, transparent)
  }
  100%{
    box-shadow: 0 12px 24px rgba(0,0,0,.18),
                 0 0 0 0 transparent
  }
}

/* --- Отделна наградна лента (извън колелото) --- */
.twgc-reward-banner{
  position: absolute;

  /* сваляме балона малко надолу да не пречи на Х */
  top: 34px;
  left: 50%;
  transform: translate(-50%, 0) scale(.97);

  /* по-широк балон – почти по цялата карта */
  width: calc(100% - 48px);
  max-width: 720px;
  box-sizing: border-box;

  background: #fff;
  border: 2px solid var(--twgc-accent, #5ad);
  border-radius: 999px;

  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-weight: 800;
  color:#111;
  text-align:center;

  box-shadow: 0 12px 30px rgba(0,0,0,.20);

  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 4;
}
.twgc-reward-banner.show{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.twgc-rb-emoji{
  font-size: 20px;
  line-height: 1;
}
.twgc-rb-text{
  display:block;
  line-height:1.35;
}

/* --- Копиране "Копирано!" остава видимо по-дълго --- */
.twgc-codebig.copied::after{
  animation: twgc-copynote 2s ease forwards !important;
}


/* --------- TWGC Бранд туикове & CTA край --------- */


/* --------- TWGC Copy CTA бутон (helper зона) начало --------- */
/* --- Копирай CTA след завъртане (в зоната на helper) --- */
.twgc-helper.as-cta{ margin-top: 12px; }

.twgc-copy-btn{
  border: 2px solid var(--twgc-theme-accent, #111);
  background: var(--twgc-theme-accent, #111);
  color: var(--twgc-theme-onaccent, #fff);

  font-weight: 900;
  font-size: clamp(15px, 2.1vw, 17px);

  padding: 11px 18px;
  border-radius: 14px;

  cursor: pointer;
  transition: transform .12s ease,
              box-shadow .18s ease,
              background-color .18s;

  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* да не избледнява, когато е disabled – играе ролята на статична лента */
.twgc-copy-btn[disabled]{
  opacity: 1;
  cursor: default;
}

.twgc-copy-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
  background: color-mix(in srgb, var(--twgc-theme-accent) 88%, white 12%);
  color: var(--twgc-theme-onaccent);
}

.twgc-copy-btn:active{
  transform: translateY(1px) scale(.98);
}

.twgc-copy-btn.copied{
  background: color-mix(in srgb, var(--twgc-theme-accent) 80%, black 20%);
}
/* --------- TWGC Copy CTA бутон (helper зона) край --------- */


/* --------- TWGC – общи стилове край --------- */