:root{
    /* testreszabható változók */
    --offset: 20px;        /* távolság a képtől a jobb/lent saroktól */
    --img-width: auto;    /* kép szélessége (változtasd tetszés szerint) */
    --img-height: 64px;    /* kép szélessége (változtasd tetszés szerint) */
    --btn-size: 33px;      /* bezáró gomb átmérője */
    --btn-offset: 7px;    /* mennyire legyen kívül a gomb (pozíció a kép sarkához képest) */
    --radius: 0px;        /* kép lekerekítése */
  }

  /* reset egyszerűen */
  html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
  a{color:inherit;text-decoration:none}

  /* konténer a jobb alsó sarokba helyezéshez */
  .floating {
    position: fixed;
    right: var(--offset);
    bottom: var(--offset);
    width: var(--img-width);
    height: var(--img-height);
    z-index: 9999;
    /* az alábbi sor segít abban, hogy a gombok a képen kívül legyenek, de a konténerhez tartozzanak */
    pointer-events: auto;
    transition: transform .22s ease, opacity .22s ease;
  }

  /* kép stílusa */
  .floating img {
    display: block;
    width: var(--img-width);
    height: var(--img-height);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    cursor: pointer;
    user-select: none;
    transform-origin: center;
    transition: transform .18s ease;
  }
  .floating img:active { transform: scale(.995); }

  /* bezáró gombok (két darab: bal és jobb) */
  .close-btn {
    position: absolute;
    top: calc(-1 * (var(--btn-size) / 2) - var(--btn-offset)); /* kint a kép fölött */
    width: var(--btn-size);
    height: var(--btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,245,255,0.85));
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .15s;
    opacity: 1;
  }
  .close-btn.left { left: calc(-1 * (var(--btn-size) / 2) - var(--btn-offset)); }
  .close-btn.right{ right: calc(-1 * (var(--btn-size) / 2) - var(--btn-offset)); }

  /* ikon stílus (x) */
  .close-btn svg { width: 16px; height: 16px; display:block; pointer-events: none; opacity: .85; }
  .close-btn:hover { transform: translateY(-3px) scale(1.05); }
  .close-btn:active { transform: translateY(-1px) scale(.98); }

  /* bezárás animáció */
  .floating.hidden { opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; }

  /* mobilon picit kisebb gombok és kép */
  /* @media (max-width:420px){
    :root{ --img-width: 160px; --btn-size:32px; --btn-offset:8px; }
  } */