/* ================= ICON ================= */

/* FLOATING TEXT BUTTON */
#bdsp_floating_text {
    position: fixed;
    right: -1px;
    top: 70%;
    transform: translateY(-50%) !important;
    z-index: 99999;
    background: #f2c300;
    color: #000;
    padding: 5px 12px;
    border-radius: 50px 0px 0px 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
    transition: .3s !important;
}

#bdsp_floating_text:hover{
background:#1e88e5;
color:#fff;
transform:translateY(-50%) scale(1.05) !important;
}

.bdsp_text_icon{
width:20px;
height:20px;
object-fit:contain;
}

/* hide when panel open */
#bdsp_floating_text.hide{
opacity:0;
pointer-events:none;
}


/* ================= PANEL ================= */

/* PANEL BASE */
#bdsp_panel {
  position: fixed;
  top: var(--bdsp-top, 80px);
  right: 0;
  width: 380px;
  height: auto; /* changed */
  background: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.2);
  overflow: auto;
  z-index:99998;

  /* hidden position */
  transform: translate3d(100%,0,0) !important;

  /* DEFAULT animation (fallback) */
  transition: transform .55s ease !important;
  will-change: transform !important;
}

/* visible */
#bdsp_panel.open {
  transform: translate3d(0,0,0) !important;
}


/* ===== ANIMATION PRESETS ===== */
/* These override ONLY speed/curve */

#bdsp_panel.bdsp_anim_smooth{transition:transform .6s cubic-bezier(.22,.61,.36,1) !important;}
#bdsp_panel.bdsp_anim_ease{transition:transform .45s ease !important;}
#bdsp_panel.bdsp_anim_slow{transition:transform 1s ease !important;}
#bdsp_panel.bdsp_anim_bounce{transition:transform .7s cubic-bezier(.68,-0.55,.27,1.55) !important;}
#bdsp_panel.bdsp_anim_elastic{transition:transform .8s cubic-bezier(.7,-0.4,.4,1.4) !important;}
/* ================= CLOSE BTN ================= */

#bdsp_close{
position:absolute;
top:10px;
right:10px;
background:#f2c300;
color:#000;
padding:6px 15px;
border-radius:50px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

#bdsp_close:hover{
background:#1e88e5;
color:#fff;
}


/* ================= CONTENT ================= */

.bdsp_content{
padding:30px;
text-align:center;
font-family:Segoe UI;
}

.bdsp_title{
font-size:22px;
font-weight:700;
margin-bottom:10px;
line-height:32px;
}

.bdsp_desc{
color:#666;
margin-bottom:25px;
line-height:1.6;
font-size:12px;
}


/* ================= BUTTONS ================= */

.bdsp_btns{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.bdsp_btn{
background:#f2c300;
color:#000;
font-size:12px;
padding:14px 20px;
border-radius:6px;
font-weight:600;
cursor:pointer;
transition:.3s;
text-decoration:none;
}

.bdsp_btn:hover{
background:#1e88e5;
color:#fff;
transform:translateY(-2px);
}


/* ================= FORM ================= */

#bdsp_form{
display:none;
margin-top:20px;
}

.bdsp_back{
background:#f2c300;
color:#000;
font-size:14px;
padding:12px 22px;
border-radius:6px;
font-weight:600;
display:inline-block;
/*margin-top:20px;*/
cursor:pointer;
transition:.3s;
}

.bdsp_back:hover{
background:#1e88e5;
color:#fff;
transform:translateY(-2px);
}


/* ================= IMAGE ================= */

.bdsp_img{
margin-bottom:15px;
}

.bdsp_img img{
max-width:100%;
height:auto;
border-radius:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* ================= ICON ANIMATION ================= */

/* floating idle motion */
@keyframes bdsp_float {
  0% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-6px); }
  100% { transform: translateY(-50%) translateY(0); }
}

/* soft pulse glow */
@keyframes bdsp_pulse {
  0% { box-shadow:0 0 0 0 rgba(242,195,0,.5); }
  70% { box-shadow:0 0 0 14px rgba(242,195,0,0); }
  100% { box-shadow:0 0 0 0 rgba(242,195,0,0); }
}

/* hover bounce */
@keyframes bdsp_bounce {
  0%{ transform:translateY(-50%) scale(1); }
  50%{ transform:translateY(-55%) scale(1.08); }
  100%{ transform:translateY(-50%) scale(1); }
}


/* apply float */
#bdsp_icon{
  animation: bdsp_float 3s ease-in-out infinite !important;
}

/* pulse only circle */
.bdsp_icon_circle{
  animation: bdsp_pulse 2.5s infinite !important;
}

/* hover interaction */
#bdsp_icon:hover{
  animation: bdsp_bounce .5s ease !important;
}


/* ================= RESPONSIVE ================= */

/* ---------- Large Desktop ---------- */
@media (min-width:1600px){

  #bdsp_panel{
    width:420px;
  }

  .bdsp_title{
    font-size:24px;
  }

}


/* ---------- Laptop ---------- */
@media (max-width:1400px){

  #bdsp_panel{
    width:360px;
  }

}


/* ---------- Tablet ---------- */
@media (max-width:1024px){

  #bdsp_panel{
    width:320px;
    top:60px;
    height:auto;
  }

  #bdsp_icon{
    right:15px;
  }

  .bdsp_title{
    font-size:20px;
  }

}


/* ---------- Small Tablet ---------- */
@media (max-width:768px){

  #bdsp_panel{
    width:100%;
    right:0;
    height:auto;
    border-radius:18px 18px 0 0;
    top:auto;
    bottom:0;
  }

  #bdsp_panel.open{
    transform:translateY(0);
  }

  #bdsp_panel{
    transform:translateY(100%);
  }

  #bdsp_icon{
    top:auto;
    bottom:30px;
    right:20px;
    transform:none;
  }

  .bdsp_content{
    padding:22px;
  }

}


/* ---------- Mobile ---------- */
@media (max-width:480px){

  #bdsp_panel{
    height:auto;
  }

  .bdsp_btns{
    flex-direction:column;
    gap:12px;
  }

  .bdsp_btn{
    width:100%;
    text-align:center;
  }

  .bdsp_title{
    font-size:18px;
    line-height:26px;
  }

  .bdsp_desc{
    font-size:13px;
  }

  #bdsp_icon .bdsp_icon_circle{
    width:50px;
    height:50px;
  }

  .bdsp_icon_circle img{
    width:22px;
    height:22px;
  }

}


/* ---------- Very Small Phones ---------- */
@media (max-width:360px){

  #bdsp_panel{
    height:auto;
  }

  .bdsp_content{
    padding:18px;
  }

}