/*!
 * Theme Name: Xavat Anniversary external Style
 * Package : Xavat Pay
 * Author: Muhammad Abba Gana | Xavat Pay Group
 * Author URI: http://xavat.net
 * Version	 :	1.0.0
 * Updated	 :	10.08.2028
**/

:root{
    /* Xavat Pay brand palette — pulled from main.css + skins/theme-green.css (is-theme dark skin) */
    --navy-950:#052e22;   /* deepened from is-theme sidebar #064936 for modal contrast */
    --navy-900:#064936;   /* brand is-theme sidebar background */
    --navy-800:#075a41;   /* lightened step for card face */
    --teal-400:#0fac81;   /* brand --primary */
    --teal-300:#34edba;   /* brand is-theme menu-badge accent */
    --gold-400:#f4bd0e;   /* brand --warning */
    --ink-100:#f5f6fa;    /* brand --light */
    --ink-400:#a3dfcf;    /* brand is-theme secondary text tint */
    --line:#0a7859;       /* brand is-theme border color */
    --mono: 'DM Sans', 'Segoe UI', sans-serif;
    --display: 'DM Sans', 'Segoe UI', sans-serif;
    --body: 'DM Sans', 'Segoe UI', sans-serif;
  }
 
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap');
 
  /* Scoped to the widget only — deliberately does NOT touch bare body/html/*
     selectors so dropping this <style> block into the real site can't override
     its existing body background, font, or box-sizing. */
  .xp-overlay, .xp-overlay *{ box-sizing:border-box; }
 
  /* page behind the modal — demo scaffolding only for previewing this file
     standalone. Delete this whole block when integrating into the real site. */
  .page-stub{
    color:var(--ink-400);
    text-align:center;
    font-size:14px;
  }
  .page-stub button{
    margin-top:14px;
    background:var(--teal-400);
    border:none;
    color:#03140f;
    font-weight:700;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-family:var(--body);
  }
 
  /* ===== overlay ===== */
  .xp-overlay{
    position:fixed;
    inset:0;
    padding:24px;
    background:
      radial-gradient(circle at 20% 20%, rgba(15,172,129,0.10), transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(244,189,14,0.08), transparent 40%),
      rgba(4,7,14,0.72);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99990;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease;
  }
  .xp-overlay.show{opacity:1; pointer-events:auto;}
 
  /* confetti canvas sits above the overlay, below the card */
  #xp-confetti{
    position:fixed;
    inset:0;
    z-index:99995;
    pointer-events:none;
  }
 
  /* ===== receipt-style card ===== */
  .xp-card{
    position:relative;
    z-index:100000;
    width:min(480px, 92vw);
    max-height:min(660px, 92vh);
    background:linear-gradient(180deg, var(--navy-800), var(--navy-900));
    border:1.5px solid rgba(245,246,250,0.32);
    border-radius:20px;
    padding:30px 28px 24px;
    text-align:center;
    font-family:var(--body);
    overflow-x:hidden;
    overflow-y:auto;
    box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    transform:translateY(28px) scale(.94);
    opacity:0;
    transition:transform .55s cubic-bezier(.2,.9,.25,1.2), opacity .5s ease;
  }
  .xp-card::-webkit-scrollbar{ width:6px; }
  .xp-card::-webkit-scrollbar-track{ background:transparent; }
  .xp-card::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.15); border-radius:3px; }
  .xp-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 12% 8%, rgba(52,237,186,0.16), transparent 55%),
      radial-gradient(circle at 92% 96%, rgba(244,189,14,0.12), transparent 55%);
    pointer-events:none;
  }
  .xp-overlay.show .xp-card{
    transform:translateY(0) scale(1);
    opacity:1;
  }
 
  .xp-close{
    position:absolute;
    top:14px; right:16px;
    width:30px; height:30px;
    border-radius:50%;
    border:1px solid rgba(245,246,250,0.35);
    background:rgba(255,255,255,0.04);
    color:var(--ink-100);
    padding:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
  }
  .xp-close svg{ width:14px; height:14px; display:block; }
  .xp-close:hover{color:#ffffff; border-color:rgba(255,255,255,0.6); transform:rotate(90deg);}
 
  .xp-eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--teal-300);
    margin-bottom:14px;
  }
 
  /* pulse rings + spinning spark halo behind the counter */
  .xp-ring-wrap{
    position:relative;
    width:108px;
    height:108px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .xp-ring-wrap::after{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background:conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(52,237,186,0.6) 55deg,
      transparent 115deg,
      transparent 230deg,
      rgba(244,189,14,0.5) 290deg,
      transparent 350deg
    );
    filter:blur(9px);
    opacity:.8;
    z-index:-1;
    animation:xp-spark-spin 5.5s linear infinite;
  }
  @keyframes xp-spark-spin{
    to{ transform:rotate(360deg); }
  }
  .xp-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid var(--teal-400);
    opacity:0;
    animation:xp-pulse 2.6s ease-out infinite;
  }
  .xp-ring.r2{animation-delay:.65s;}
  .xp-ring.r3{animation-delay:1.3s;}
  @keyframes xp-pulse{
    0%{ transform:scale(.55); opacity:.55; }
    80%{ opacity:0; }
    100%{ transform:scale(1.35); opacity:0; }
  }
 
  .xp-counter{
    position:relative;
    width:90px;
    height:90px;
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%, rgba(15,172,129,0.18), var(--navy-900) 70%);
    border:1px solid rgba(15,172,129,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--mono);
    font-weight:700;
    font-size:36px;
    color:var(--teal-300);
    text-shadow:0 0 18px rgba(15,172,129,0.55);
  }
 
  .xp-title{
    font-family:var(--display);
    font-weight:800;
    font-size:23px;
    color:var(--ink-100);
    margin:4px 0 8px;
    letter-spacing:-.01em;
  }
  .xp-title span{
    background:linear-gradient(90deg, var(--teal-300), var(--gold-400));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
 
  .xp-body{
    color:var(--ink-400);
    font-size:14px;
    line-height:1.55;
    max-width:380px;
    margin:0 auto 14px;
  }
 
  /* perforated receipt divider */
  .xp-perf{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 -28px 14px;
    padding:0 28px;
  }
  .xp-perf::before, .xp-perf::after{
    content:"";
    flex:1;
    height:1px;
    background-image:radial-gradient(circle, rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
    background-size:8px 1px;
    background-repeat:repeat-x;
  }
  .xp-perf-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    color:var(--ink-400);
    white-space:nowrap;
  }
 
  .xp-stats{
    display:flex;
    justify-content:center;
    gap:28px;
    margin-bottom:16px;
  }
  .xp-stat b{
    display:block;
    font-family:var(--mono);
    font-size:18px;
    color:var(--ink-100);
  }
  .xp-stat span{
    font-size:10.5px;
    color:var(--ink-400);
    text-transform:uppercase;
    letter-spacing:.08em;
  }
 
  .xp-cta{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    padding:14px 18px;
    border:1px solid rgba(255,255,255,0.85);
    border-radius:12px;
    background:linear-gradient(180deg, #faf9f5 0%, #eef2ef 100%);
    color:var(--teal-400);
    font-family:var(--body);
    font-weight:800;
    font-size:15px;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 14px 26px rgba(0,0,0,0.28),
      0 2px 6px rgba(0,0,0,0.18);
    transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  }
  .xp-cta svg{
    width:16px; height:16px;
    flex:none;
    transition:transform .2s ease;
  }
  .xp-cta-heart{
    animation:xp-heartbeat 1.6s ease-in-out infinite;
  }
  @keyframes xp-heartbeat{
    0%, 100%{ transform:scale(1); }
    15%{ transform:scale(1.18); }
    30%{ transform:scale(1); }
    45%{ transform:scale(1.12); }
    60%{ transform:scale(1); }
  }
  .xp-cta::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(115deg, transparent, rgba(15,172,129,0.14), transparent);
    transform:skewX(-20deg);
    animation:xp-cta-shine 3.4s ease-in-out infinite;
    animation-delay:1s;
    pointer-events:none;
  }
  @keyframes xp-cta-shine{
    0%{ left:-60%; }
    35%{ left:130%; }
    100%{ left:130%; }
  }
  .xp-cta:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg, #eef4f1 0%, #dcece5 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 18px 32px rgba(0,0,0,0.32),
      0 3px 8px rgba(0,0,0,0.2);
  }
  .xp-cta:hover svg{ transform:translateX(2px); }
  .xp-cta:active{ transform:translateY(0); background:linear-gradient(180deg, #e6efe9 0%, #d4e6dd 100%); }
  .xp-cta:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:3px;
  }
 
  .xp-ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(15,172,129,0.18);
    transform:scale(0);
    animation:xp-ripple .6s ease-out;
    pointer-events:none;
  }
  @keyframes xp-ripple{ to{ transform:scale(3.2); opacity:0; } }
 
  /* ===== balloons ===== */
  .xp-balloon{
    position:fixed;
    bottom:-140px;
    width:34px;
    height:42px;
    border-radius:50% 50% 45% 45% / 58% 58% 42% 42%;
    background:
      radial-gradient(circle at 30% 26%, rgba(255,255,255,0.55), transparent 45%),
      var(--balloon-color, var(--teal-400));
    box-shadow:inset -5px -7px 10px rgba(0,0,0,0.2);
    z-index:99995;
    pointer-events:none;
    animation-name:xp-balloon-rise;
    animation-timing-function:ease-in;
    animation-fill-mode:forwards;
  }
  .xp-balloon::before{
    content:"";
    position:absolute;
    left:50%; bottom:-5px;
    width:6px; height:6px;
    background:inherit;
    transform:translateX(-50%) rotate(45deg);
  }
  .xp-balloon::after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    width:1px;
    height:64px;
    background:rgba(255,255,255,0.32);
    transform:translateX(-50%);
  }
  @keyframes xp-balloon-rise{
    0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
    8%{ opacity:.95; }
    25%{ transform:translate(18px,-30vh) rotate(5deg); }
    50%{ transform:translate(-16px,-58vh) rotate(-5deg); }
    75%{ transform:translate(14px,-86vh) rotate(4deg); }
    100%{ transform:translate(-10px,-118vh) rotate(-3deg); opacity:.85; }
  }
 
  /* ===== sparkles ===== */
  .xp-sparkle-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:visible;
  }
  .xp-sparkle{
    position:absolute;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--gold-400);
    box-shadow:0 0 8px 2px rgba(244,189,14,0.55);
    opacity:0;
    animation-name:xp-twinkle;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
  }
  @keyframes xp-twinkle{
    0%,100%{ opacity:0; transform:scale(.4); }
    50%{ opacity:1; transform:scale(1); }
  }
 
  /* ===== one-shot flash burst behind the card on open ===== */
  .xp-flash{
    position:fixed;
    top:50%; left:50%;
    width:10px; height:10px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(52,237,186,0.5), transparent 70%);
    transform:translate(-50%,-50%) scale(0);
    z-index:99991;
    pointer-events:none;
    animation:xp-flash-burst .9s ease-out forwards;
  }
  @keyframes xp-flash-burst{
    0%{ transform:translate(-50%,-50%) scale(0); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(60); opacity:0; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .xp-card, .xp-ring, .xp-overlay, .xp-balloon, .xp-sparkle, .xp-flash, .xp-cta-heart{ animation:none !important; transition:none !important; }
    .xp-ring-wrap::after{ animation:none !important; opacity:.4; }
  }