/* ==========================================================================
   BETSIE AI WIDGET — MODERN PREMIUM THEME
   Bootstrap 3 compatible. No structural/JS selectors are altered — only
   presentational classes are added on top of the existing markup.
   ========================================================================== */

:root{
  --betsie-primary:#6D5DF6;
  --betsie-primary-dark:#4F3FE0;
  --betsie-primary-light:#8B7CFF;
  --betsie-gradient: linear-gradient(135deg, #6D5DF6 0%, #9B6DFF 55%, #C86DFF 100%);
  --betsie-success:#17B26A;
  --betsie-success-dark:#0F9D5C;
  --betsie-danger:#F04438;
  --betsie-danger-dark:#D92D20;
  --betsie-info:#2E90FA;
  --betsie-bg:#FFFFFF;
  --betsie-bg-soft:#F7F7FB;
  --betsie-border:#E6E4F2;
  --betsie-text:#1D1B29;
  --betsie-text-muted:#6E6B85;
  --betsie-radius-lg:20px;
  --betsie-radius-md:14px;
  --betsie-radius-sm:10px;
  --betsie-shadow-lg: 0 24px 60px -12px rgba(76, 45, 175, 0.28), 0 4px 14px rgba(76,45,175,0.10);
  --betsie-shadow-sm: 0 2px 8px rgba(30,20,80,0.08);
  --betsie-transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------------- */
/* WIDGET WINDOW                                                          */
/* ---------------------------------------------------------------------- */

#betsie-window.betsie-window{
  font-family: 'Calibri', Segoe UI, Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--betsie-bg);
  border: 1px solid var(--betsie-border);
  border-radius: var(--betsie-radius-lg);
  box-shadow: var(--betsie-shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  animation: betsieModalOpen 380ms cubic-bezier(.34,1.56,.64,1);
  transition: width 320ms cubic-bezier(.4,0,.2,1), height 320ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}

@keyframes betsieModalOpen{
  0%{ opacity:0; transform: scale(.85) translateY(30px); }
  100%{ opacity:1; transform: scale(1) translateY(0); }
}

/* When JS sets display:none, no animation runs — this is only visual polish
   for when the window is shown, matching modern "modal open" motion. */

/* ---------------------------------------------------------------------- */
/* HEADER                                                                  */
/* ---------------------------------------------------------------------- */

.betsie-header{
  background: var(--betsie-gradient);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.betsie-header::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% -20%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events:none;
}

.betsie-header-row{
  display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:1;
}

.betsie-header-left{ display:flex; align-items:center; gap:10px; min-width:0; }

.betsie-avatar{
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.65);
}

.betsie-title{
  font-size:16px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.2px;
}

.betsie-header-actions{ display:flex; gap:6px; align-items:center; }

.betsie-icon-btn{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff !important; cursor:pointer;
  background: rgba(255,255,255,0.16);
  transition: transform var(--betsie-transition), background var(--betsie-transition);
  font-size:13px;
}
.betsie-icon-btn:hover{ background: rgba(255,255,255,0.32); transform: translateY(-1px) scale(1.06);color:white; }
.betsie-icon-btn:active{ transform: scale(0.92); }
.betsie-icon-btn-close:hover{ background: rgba(240,68,56,0.85); }

/* ---------------------------------------------------------------------- */
/* BODY / OUTPUT / SCROLLBAR                                              */
/* ---------------------------------------------------------------------- */

.betsie-output{
  max-height:420px;
  overflow-y:auto;
  padding:14px 14px 4px;
  background: var(--betsie-bg-soft);
  scroll-behavior:smooth;
}

.betsie-output::-webkit-scrollbar{ width:8px; }
.betsie-output::-webkit-scrollbar-track{ background:transparent; }
.betsie-output::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--betsie-primary-light), var(--betsie-primary));
  border-radius:8px;
}
.betsie-output{ scrollbar-width thin; scrollbar-color: var(--betsie-primary-light) transparent; }

.betsie-loader{
  display:none;
  align-items:center; justify-content:center; gap:10px;
  padding:14px; margin:0 14px 14px;
  font-weight:600; font-size:13px; color:var(--betsie-text-muted);
  background:#fff; border-radius:var(--betsie-radius-sm); box-shadow: var(--betsie-shadow-sm);
}

.betsie-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2.5px solid var(--betsie-border);
  border-top-color: var(--betsie-primary);
  animation: betsieSpin .7s linear infinite;
  display:inline-block;
}
@keyframes betsieSpin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* FLOATING LAUNCHER ICON                                                 */
/* ---------------------------------------------------------------------- */

.betsie-icon{
  width:64px; height:64px; border-radius:50%;
  background: var(--betsie-gradient);
  box-shadow: 0 10px 30px -6px rgba(109,93,246,0.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
  animation: betsiePulse 2.6s ease-in-out infinite;
  transition: transform var(--betsie-transition);
}
.betsie-icon:hover{ transform: scale(1.08) translateY(-2px); }
.betsie-icon:active{ transform: scale(0.94); }

.betsie-icon-img{
  width:98%; height:98%; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,0.85);
}

@keyframes betsiePulse{
  0%,100%{ box-shadow: 0 10px 30px -6px rgba(109,93,246,0.55), 0 0 0 0 rgba(109,93,246,0.45); }
  50%{ box-shadow: 0 10px 30px -6px rgba(109,93,246,0.55), 0 0 0 10px rgba(109,93,246,0); }
}

/* ---------------------------------------------------------------------- */
/* SHARED CARD / FORM LAYOUT                                              */
/* ---------------------------------------------------------------------- */

.betsie-form-card{
  background:#fff; border-radius:var(--betsie-radius-md);
  padding:22px 20px; box-shadow: var(--betsie-shadow-sm);
  border:1px solid var(--betsie-border);
}

.animate-fade-slide-up{ animation: betsieFadeSlideUp 420ms cubic-bezier(.22,1,.36,1); }
@keyframes betsieFadeSlideUp{
  0%{ opacity:0; transform: translateY(16px); }
  100%{ opacity:1; transform: translateY(0); }
}

.betsie-form-title{ font-size:22px; font-weight:800; margin:0 0 4px; color:var(--betsie-text); }
.betsie-form-title-Sign-Up{ font-size:25px; margin:0 0 4px; font-weight:0!important; color:var(--betsie-text); }
.betsie-form-subtitle-Sign-Up{ font-size:11px; color:var(--betsie-text-muted); margin:0 0 20px;font-weight:800; line-height:1.5; }
.betsie-form-subtitle{ font-size:14px; color:var(--betsie-text-muted); margin:0 0 20px; line-height:1.5; }
.betsie-form-footer{ font-size:13px; color:var(--betsie-text-muted); margin-top:16px; text-align:center; }
.betsie-form-footer a, .betsie-form-subtitle a{ color:var(--betsie-primary); font-weight:600; text-decoration:none; }
.betsie-form-footer a:hover, .betsie-form-subtitle a:hover{ text-decoration:underline; }

.betsie-welcome{ padding:6px 4px 2px; }
.betsie-welcome-text{ font-size:14px; line-height:1.6; color:var(--betsie-text); margin:0 0 8px; }
.betsie-welcome-question{ font-size:14px; margin:12px 0 4px; color:var(--betsie-text); }

.betsie-btn-row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;color:white; }
.betsie-btn-row-center{ justify-content:center; }

.betsie-alert{
  font-size:13px; line-height:1.5; margin-top:10px;margin-bottom:20px; padding:10px 12px;
  border-radius:var(--betsie-radius-sm);
  animation: betsieFadeSlideUp 280ms ease;
}
.betsie-alert-error{ background:#FEF3F2; color:var(--betsie-danger-dark); border:1px solid #FDA29B; }
.betsie-alert-error a{ color:var(--betsie-danger-dark); font-weight:700; }

.betsie-accesscode-card{ text-align:center; }
.betsie-accesscode-input input{ text-align:center; letter-spacing:6px; font-weight:700; font-size:18px; }

/* ---------------------------------------------------------------------- */
/* FLOATING-LABEL INPUTS  (focus animation)                               */
/* ---------------------------------------------------------------------- */

.floating-label{ position:relative; margin-bottom:20px; }

.floating-label .form-control,
.floating-label select.form-control{
  height:48px !important;
  padding:14px 14px 0 14px !important;
  border:1.5px solid var(--betsie-border) !important;
  border-radius:var(--betsie-radius-sm) !important;
  font-size:14px; color:var(--betsie-text);
  background:#fff !important;
  box-shadow:none !important;
  transition: border-color var(--betsie-transition), box-shadow var(--betsie-transition), transform 120ms ease;
}

textarea.floating-label-textarea.form-control{ height:auto !important; padding-top:20px !important; }

.floating-label .form-control:focus{
  border-color: var(--betsie-primary) !important;
  box-shadow: 0 0 0 4px rgba(109,93,246,0.14) !important;
  transform: translateY(-1px);
  outline:none;
}

.floating-label label{
  position:absolute; left:14px; top:14px;
  font-size:14px; color:var(--betsie-text-muted);
  background:#fff; padding:0 4px; margin:0;
  pointer-events:none;
  transition: all 160ms ease;
  font-weight:400;
}

.floating-label .form-control:focus ~ label,
.floating-label .form-control:not(:placeholder-shown) ~ label,
.floating-label select.form-control ~ label{
  top:-8px; left:10px; font-size:11px; font-weight:600;
  color: var(--betsie-primary);
}
/* Hide * while label is inside the field */
.floating-label label sup{
    display: none;
}

/* Show * only when the label floats */
.floating-label .form-control:focus ~ label sup,
.floating-label .form-control:not(:placeholder-shown) ~ label sup,
.floating-label select.form-control ~ label sup{
    display: inline;
}


/* Selects always show a value, so keep their label permanently floated */
/*.floating-label select.form-control ~ label sup{ top:-8px; left:10px; font-size:11px; font-weight:600; }*/

/*.betsie-input-addon{
  display:flex; align-items:stretch;
}
.betsie-input-addon .input-group-addon{
  border:1.5px solid var(--betsie-border); background:var(--betsie-bg-soft);
  border-right:none; border-radius:var(--betsie-radius-sm) 0 0 var(--betsie-radius-sm);
  font-weight:600; color:var(--betsie-text-muted);
}
.betsie-input-addon .form-control{ border-radius:0 var(--betsie-radius-sm) var(--betsie-radius-sm) 0 !important; }*/

.betsie-input-addon{display:flex;width:100%}
.betsie-input-addon #Newusercode{
display:flex!important;align-items:center;justify-content:center;min-width:65px;height:48px;
border:1.5px solid var(--betsie-border);border-right:0;background:var(--betsie-bg-soft);
color:var(--betsie-text-muted);font-weight:700;border-radius:var(--betsie-radius-sm) 0 0 var(--betsie-radius-sm)
}
.betsie-input-addon #Newusermobile{flex:1;border-radius:0 var(--betsie-radius-sm) var(--betsie-radius-sm) 0!important}


small.betsie-hint{ display:block; color:var(--betsie-text-muted); font-size:12px; margin:-8px 0 10px; }

.betsie-checkbox-row{ font-size:12.5px; color:var(--betsie-text-muted); display:flex; gap:8px; align-items:flex-start; margin:6px 0 4px; }
.betsie-checkbox-row input{ margin-top:3px; accent-color: var(--betsie-primary); }
.betsie-checkbox-row a{ color:var(--betsie-primary); text-decoration:underline; }

/* ---------------------------------------------------------------------- */
/* BUTTONS  (hover / click animation)                                     */
/* ---------------------------------------------------------------------- */

#betsie-window .btn{
  border-radius:var(--betsie-radius-sm) !important;
  font-weight:700; letter-spacing:.2px;
  border:0 !important; box-shadow:none;
  transition: transform 150ms cubic-bezier(.4,0,.2,1), box-shadow 150ms ease, filter 150ms ease;
  color:#fff !important;
}
#betsie-window .btn:hover{ transform: translateY(-2px); filter:brightness(1.04); color:#fff !important;}
#betsie-window .btn:active{ transform: translateY(0) scale(0.97); color:#fff !important;}

.betsie-btn-primary{
  height:46px; background: var(--betsie-gradient) !important;
  box-shadow: 0 10px 24px -8px rgba(109,93,246,0.55) !important;
}
.betsie-btn-primary:hover{ box-shadow: 0 14px 28px -8px rgba(109,93,246,0.65) !important; }

.betsie-btn-success{ background: var(--betsie-success) !important; box-shadow: 0 8px 20px -8px rgba(23,178,106,0.55) !important; }
.betsie-btn-danger{ background: var(--betsie-danger) !important; box-shadow: 0 8px 20px -8px rgba(240,68,56,0.5) !important; }
.betsie-btn-info{ background: var(--betsie-info) !important; box-shadow: 0 8px 20px -8px rgba(46,144,250,0.5) !important; }

.betsie-btn-primary.login-blink{ animation: betsieBlink 1s ease-in-out infinite;pointer-events: none; }
@keyframes betsieBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.65; } }

/* Ripple-style click feedback (pure CSS, no markup change needed) */
#betsie-window .btn{ position:relative; overflow:hidden; }
#betsie-window .btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: rgba(255,255,255,0.35); opacity:0; transform:scale(0);
  transition: opacity 400ms ease, transform 400ms ease;
}
#betsie-window .btn:active::after{ opacity:1; transform:scale(1); transition:0s; }

/* ---------------------------------------------------------------------- */
/* SUCCESS PULSE (for use around confirmations, e.g. access-code success) */
/* ---------------------------------------------------------------------- */

.betsie-success-pulse{
  animation: betsieSuccessPulse 700ms ease;
}
@keyframes betsieSuccessPulse{
  0%{ box-shadow: 0 0 0 0 rgba(23,178,106,0.45); }
  70%{ box-shadow: 0 0 0 14px rgba(23,178,106,0); }
  100%{ box-shadow: 0 0 0 0 rgba(23,178,106,0); }
}

/* ---------------------------------------------------------------------- */
/* RESPONSIVE                                                             */
/* ---------------------------------------------------------------------- */

@media (max-width: 480px){
  #betsie-window.betsie-window{
    right:8px !important; left:8px !important; bottom:8px !important;
    width:auto !important; max-width:none !important;
  }
  .betsie-icon{ width:56px; height:56px; right:14px; bottom:14px; }
  .betsie-output{ max-height:55vh; }
  .betsie-form-card{ padding:18px 14px; }
}

@media (min-width:481px) and (max-width:768px){
  #betsie-window.betsie-window{ width:92vw !important; }
}
/* ---------------------------------------------------------------------- */
/* SUBSCRIBE SECTION                                                      */
/* ---------------------------------------------------------------------- */

.betsie-radio-group{ display:flex; gap:12px; margin:6px 0 18px; flex-wrap:wrap; }

.betsie-radio-option{
  display:flex; align-items:center; gap:8px; justify-content:center;
  flex:1; min-width:120px;
  border:1.5px solid var(--betsie-border); border-radius:var(--betsie-radius-sm);
  padding:12px 16px; cursor:pointer; font-size:14px; font-weight:600; color:var(--betsie-text);
  background:#fff; margin:0;
  transition: border-color var(--betsie-transition), box-shadow var(--betsie-transition), transform 120ms ease;
}
.betsie-radio-option input{ accent-color: var(--betsie-primary); margin:0; }
.betsie-radio-option:hover{ border-color: var(--betsie-primary-light); transform: translateY(-1px); }

.betsie-radio-option.betsie-radio-selected{
  border-color: var(--betsie-primary);
  box-shadow: 0 0 0 3px rgba(109,93,246,0.14);
  background: #F5F3FF;
  color: var(--betsie-primary-dark);
}

.betsie-amount-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:16px; padding:14px 16px;
  background: var(--betsie-bg-soft); border-radius: var(--betsie-radius-sm);
  animation: betsieFadeSlideUp 280ms ease;
}

.betsie-amount-display{ font-size:14px; color:var(--betsie-text); }
.betsie-amount-display b{ color: var(--betsie-primary-dark); font-size:16px; }
.betsie-coupon-block{ margin-top:16px; padding:14px 16px; border:1.5px dashed var(--betsie-border); border-radius:var(--betsie-radius-sm); animation: betsieFadeSlideUp 280ms ease; }
.betsie-coupon-question{ font-size:13.5px; font-weight:600; color:var(--betsie-text); margin:0 0 10px; }
.betsie-btn-toggle{ background:#fff !important; border:1.5px solid var(--betsie-border) !important; color:var(--betsie-text) !important; box-shadow:none !important; }
.betsie-btn-toggle:hover{ border-color:var(--betsie-primary-light) !important; }
.betsie-coupon-input-row{ display:flex; gap:10px; align-items:flex-start; margin-top:12px; }
.betsie-coupon-input-row .floating-label{ flex:1; margin-bottom:0; }
.betsie-alert-success{ background:#ECFDF3; color:var(--betsie-success-dark); border:1px solid #6CE9A6; }
.betsie-amount-strike{ text-decoration:line-through; color:var(--betsie-text-muted); font-size:13px; }
.betsie-coupon-tag{ background:#ECFDF3; color:var(--betsie-success-dark); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:4px; }


.betsie-user {
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    font-weight:bold;
    color:#333;
    margin-top:30%;
    position:relative;
    cursor:pointer;
}

.betsie-tooltip {
    display:none;
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    background:#333;
    color:#fff;
    padding:5px 10px;
    border-radius:5px;
    font-size:14px;
    white-space:nowrap;
    z-index:9999;
}

.betsie-user.active .betsie-tooltip {
    display:block;
}

.betsie-tier-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }

.betsie-tier-chip{
  flex:1; min-width:100px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:1.5px solid var(--betsie-border); border-radius:var(--betsie-radius-sm);
  padding:10px 8px; cursor:pointer;
  transition: all 180ms ease;
}
.betsie-tier-chip:hover{ border-color: var(--betsie-primary-light); transform: translateY(-2px); }
.betsie-tier-chip-range{ font-size:13px; font-weight:700; color:var(--betsie-text); }
.betsie-tier-chip-percent{ font-size:11px; color:var(--betsie-text-muted); }

.betsie-tier-chip-active{
  border-color:transparent; background: var(--betsie-gradient);
  box-shadow: 0 8px 20px -8px rgba(109,93,246,0.5);
  transform: translateY(-2px);
}
.betsie-tier-chip-active .betsie-tier-chip-range,
.betsie-tier-chip-active .betsie-tier-chip-percent{ color:#fff; }

.betsie-slider-wrap{ position:relative; padding-top:36px; margin-bottom:6px; }

.betsie-range-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:6px;
  background: var(--betsie-border); outline:none; cursor:pointer;
}
.betsie-range-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background: var(--betsie-gradient);
  border:3px solid #fff; box-shadow:0 4px 10px rgba(109,93,246,0.5);
  cursor:pointer; transition: transform 150ms ease;
}
.betsie-range-slider::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.betsie-range-slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background: var(--betsie-primary);
  border:3px solid #fff; box-shadow:0 4px 10px rgba(109,93,246,0.5);
  cursor:pointer;
}

.betsie-slider-bubble{
  position:absolute; top:0; transform:translateX(-50%);
  background: var(--betsie-gradient); color:#fff; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:20px; white-space:nowrap;
  box-shadow: var(--betsie-shadow-sm);
  transition: left 60ms linear;
}
.betsie-slider-bubble::after{
  content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  border-width:4px 4px 0; border-style:solid; border-color: var(--betsie-primary-dark) transparent transparent;
}

.betsie-slider-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--betsie-text-muted); margin-top:6px; }

.betsie-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 6px;
}
.betsie-price-table th {
    background: #f2f2f2;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid #ddd;
}
.betsie-price-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
.betsie-price-caption {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}