*{box-sizing:border-box}body{margin:0;background:#020605;color:#f5f7f5;font-family:Inter,Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.topbar{height:82px;display:flex;align-items:center;padding:0 4%;gap:35px;border-bottom:1px solid #12321e;background:#030706;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;min-width:230px}.brand b,.brand strong{display:block;line-height:.9}.brand b{font-size:22px}.brand strong{font-size:24px;color:#58ff19}.brand small{font-size:8px}.logo{width:50px;height:50px;border:2px solid #7cff29;border-radius:14px;display:grid;place-items:center;font-weight:900;color:#8cff35;box-shadow:0 0 18px #4dff1b44}.topbar nav{display:flex;gap:26px;flex:1;justify-content:center;font-size:13px;font-weight:700}.topbar nav a.active,.topbar nav a:hover{color:#75ff2e}.chatTop,.primary{border:1px solid #61ff27;background:#5de61d;color:#041006;border-radius:10px;font-weight:900;padding:13px 20px;box-shadow:0 0 18px #5cff2233}.chatTop{background:#061108;color:white;min-width:150px}.chatTop small{display:block;color:#6cff32}.hero{min-height:360px;padding:55px 6%;display:flex;overflow:hidden;background:radial-gradient(circle at 70%,#124c1c,#020604 58%)}.heroCopy{width:52%;z-index:2}.eyebrow{font-size:14px;color:#b7c4ba}.hero h1{font-size:64px;line-height:.9;margin:10px 0 25px;font-style:italic}.hero h1 span{color:#5fff20}.badges{display:flex;gap:25px;color:#b9c5bb;font-size:13px;margin-bottom:28px}.heroArt{flex:1;position:relative;display:grid;place-items:center}.crown{font-size:130px;color:#ffd84d;text-shadow:0 0 25px #f0bd26}.slot{position:absolute;font-size:70px;font-weight:900;color:#fff;background:#111b12;border:5px solid #b88622;border-radius:18px;padding:15px 30px;transform:rotate(-3deg);text-shadow:0 0 12px #fff}.coins{position:absolute;color:#e9c342;font-size:45px;word-spacing:40px}.split{display:grid;grid-template-columns:1.35fr .8fr;gap:16px;padding:0 2% 20px}.panel{border:1px solid #173b20;border-radius:12px;padding:16px;background:#020806}.sectionHead{display:flex;justify-content:space-between;align-items:center}.sectionHead h2{font-size:19px}.sectionHead span{font-size:11px;color:#7d9a84}.gamesGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gameCard{position:relative;border:1px solid #23782a;border-radius:9px;padding:12px;text-align:center;background:linear-gradient(#071208,#020604)}.gameCard i{position:absolute;right:5px;top:5px;background:#ff3028;padding:3px 6px;border-radius:6px;font-size:9px}.gameIcon{height:65px;display:grid;place-items:center;font-size:44px;color:#9eff4d;text-shadow:0 0 14px #5fff20}.gameCard h3{margin:4px 0;font-size:13px}.gameCard small{color:#8eaa94;font-size:9px}.gameBtn,.offerBtn{width:100%;margin-top:8px;border:1px solid #5fff25;background:#0a2410;color:#7cff39;border-radius:6px;padding:8px;font-weight:800;font-size:11px}.offer{border:1px solid #634c12;border-radius:10px;padding:13px;margin:10px 0;display:flex;align-items:center;justify-content:space-between;background:#0b0802}.offer h3{font-size:35px;margin:0;color:#ffc13b}.offer b{font-size:13px}.offerBtn{width:auto;padding:9px 14px;color:#fff;background:#6c3e07;border-color:#c68d28}.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:0 2% 25px;border:1px solid #12351d;background:#061008}.trust div{padding:18px;text-align:center}.trust b{display:block;color:#7dff3a;font-size:12px}.trust small{color:#829188}.info{text-align:center;padding:35px;background:radial-gradient(circle,#0b2a12,#020605)}.info h2{color:#7cff37}.info p{color:#a5b3a8}.info button{margin-top:10px}footer{display:grid;grid-template-columns:2fr 2fr 2fr 1fr;gap:25px;padding:35px 5%;border-top:1px solid #12351d;color:#87978b;font-size:12px}footer b{color:#72ff35}.chat{position:fixed;right:22px;bottom:22px;width:350px;height:540px;background:#06100a;border:1px solid #397b2f;border-radius:16px;box-shadow:0 15px 60px #000;z-index:50;overflow:hidden}.hidden{display:none!important}.chatHead{padding:16px;background:#113b16;display:flex;justify-content:space-between}.chatHead small{display:block;color:#71ff3a}.chatHead button{background:none;border:0;color:white;font-size:28px}.chatStart{padding:30px 20px;text-align:center}.chatStart input,.chatForm input,.addBox input,.addBox textarea,.agentLogin input{width:100%;padding:13px;background:#07100a;border:1px solid #234a2b;color:white;border-radius:8px;margin:8px 0}.chatStart button{width:100%;margin-top:8px}.chatBody,.agentMessages{height:430px;padding:15px;overflow:auto}.bubble{max-width:82%;padding:10px 12px;margin:8px 0;border-radius:12px;line-height:1.35}.bubble.customer{margin-left:auto;background:#57dc22;color:#041005}.bubble.agent{background:#16231a}.chatForm,.agentChat form{display:flex;padding:10px;border-top:1px solid #17351d}.chatForm input,.agentChat input{margin:0;flex:1}.chatForm button,.agentChat button{border:0;background:#64e929;color:#061008;padding:0 16px;border-radius:8px}.system{text-align:center;color:#78947e;font-size:11px}.agentPage{background:#020604}.agentLogin{width:390px;margin:12vh auto;padding:35px;text-align:center;background:#071009;border:1px solid #244b2a;border-radius:16px}.agentLogin .big{margin:auto auto 15px;width:70px;height:70px}.agentLogin small{display:block;color:#75857a;margin-top:12px}.portal{display:flex;min-height:100vh}.portal aside{width:240px;background:#061009;border-right:1px solid #17351d;padding:25px 15px}.brand.mini{min-width:0;margin-bottom:30px}.brand.mini b{font-size:15px}.brand.mini strong{font-size:18px}.brand.mini .logo{width:42px;height:42px}.side{display:block;width:100%;text-align:left;padding:13px;border:0;background:none;color:#a7b4aa;border-radius:8px;margin:4px 0}.side.active,.side:hover{background:#123118;color:#7dff38}.workspace{padding:30px;flex:1}.agentGrid{display:grid;grid-template-columns:310px 1fr;gap:15px;height:calc(100vh - 80px)}.chatList{overflow:auto;height:80vh}.chatItem{width:100%;text-align:left;background:#071009;border:1px solid #17351d;color:white;border-radius:8px;padding:12px;margin-bottom:7px}.chatItem small,.chatItem span{display:block;color:#7e9183;font-size:11px;margin-top:4px}.agentChat{background:#071009;border:1px solid #17351d;border-radius:12px;display:flex;flex-direction:column}.agentChat>div:first-child{padding:15px;border-bottom:1px solid #17351d}.agentMessages{flex:1;height:auto}.addBox{max-width:650px;background:#071009;border:1px solid #17351d;padding:18px;border-radius:12px;margin:20px 0}.addBox textarea{min-height:100px}.toggleRow,.adminCard,.replyCard{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px;background:#071009;border:1px solid #17351d;border-radius:9px;margin:7px 0;max-width:800px}.adminCard small{display:block;color:#809185;flex:1}.replyCard{display:block}.replyCard p{color:#a5b3a8}.replyCard button{background:#15361b;color:#9aff62;border:1px solid #2d6e34;padding:7px 10px;border-radius:6px;margin-right:7px}
@media(max-width:900px){.topbar nav{display:none}.hero{padding:35px 5%}.heroCopy{width:100%}.heroArt{display:none}.hero h1{font-size:48px}.split{grid-template-columns:1fr}.trust{grid-template-columns:1fr 1fr}.chat{right:8px;bottom:8px;width:calc(100% - 16px)}.portal aside{width:170px}.agentGrid{grid-template-columns:1fr}.agentChat{min-height:500px}}

/* ===== Agent Chat v2 ===== */

.modernChat{
  background:linear-gradient(180deg,#07110a 0%,#040806 100%);
  border:1px solid #1d4c27;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

.modernChatHead{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #17361f;
  background:linear-gradient(180deg,#0d2412,#08130b);
}

.modernChatHead b{
  display:block;
  font-size:15px;
  color:#f4fff5;
}

.modernChatHead small{
  display:block;
  margin-top:4px;
  color:#82988a;
  font-size:11px;
}

.chatStatus{
  font-size:11px;
  color:#75ff39;
  font-weight:800;
  letter-spacing:.4px;
}

.modernMessages{
  background:
    radial-gradient(circle at 20% 10%,rgba(78,255,53,.05),transparent 35%),
    #050a07;
}

.emptyConversation{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  color:#6f8175;
  text-align:center;
}

.emptyConversation div{
  font-size:34px;
}

.emptyConversation b{
  color:#b9c9bd;
}

.emptyConversation span{
  font-size:12px;
}

.agentMessages .bubble{
  position:relative;
  max-width:72%;
  padding:11px 13px;
  margin:9px 0;
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
  word-wrap:break-word;
}

.agentMessages .bubble.customer{
  margin-right:auto;
  background:#151d18;
  color:#edf5ef;
  border-bottom-left-radius:4px;
}

.agentMessages .bubble.agent{
  margin-left:auto;
  background:linear-gradient(180deg,#63e628,#49c817);
  color:#041006;
  border-bottom-right-radius:4px;
}

.agentMessages .messageTime{
  display:block;
  font-size:9px;
  opacity:.6;
  margin-top:5px;
}

.agentMessages img.chatMedia{
  display:block;
  width:min(320px,100%);
  max-height:330px;
  object-fit:cover;
  border-radius:10px;
}

.agentMessages video.chatMedia{
  width:min(360px,100%);
  max-height:340px;
  border-radius:10px;
}

.agentMessages audio{
  width:min(300px,100%);
}

.fileMessage{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
}

.fileMessage .fileIcon{
  font-size:24px;
}

.fileMessage a{
  color:inherit;
  text-decoration:underline;
}

.mediaPreview{
  margin:10px 14px 0;
  padding:10px;
  border:1px solid #23542c;
  border-radius:10px;
  background:#09150c;
}

.mediaPreview img,
.mediaPreview video{
  max-width:180px;
  max-height:130px;
  border-radius:8px;
}

.composerTools{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px 0;
  border-top:1px solid #17361f;
  background:#071009;
}

.composerTools button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid #214f29;
  background:#0b1b0e;
  color:#eaffeb;
  font-size:17px;
}

.composerTools button:hover{
  border-color:#67ef31;
  background:#123519;
}

#recordingStatus{
  font-size:11px;
  color:#ff6b6b;
}

.modernComposer{
  display:flex;
  gap:8px;
  align-items:flex-end;
  padding:10px 12px 12px;
  background:#071009;
  border-top:0;
}

.modernComposer textarea{
  flex:1;
  resize:none;
  min-height:42px;
  max-height:120px;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid #21482a;
  background:#0b130d;
  color:#f2fff4;
  outline:none;
}

.modernComposer textarea:focus{
  border-color:#63ed2d;
  box-shadow:0 0 0 2px rgba(98,237,45,.08);
}

.sendMessageBtn{
  width:44px;
  height:44px;
  border-radius:12px!important;
  border:0!important;
  background:#60e629!important;
  color:#061008!important;
  font-weight:900;
  font-size:18px;
}

.quickReplies{
  position:absolute;
  left:330px;
  bottom:78px;
  width:330px;
  max-height:330px;
  overflow:hidden;
  background:#08110b;
  border:1px solid #24572d;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  z-index:30;
}

.quickReplies input{
  width:calc(100% - 20px);
  margin:10px;
  padding:10px;
  border-radius:8px;
  border:1px solid #23482a;
  background:#0d160f;
  color:white;
}

#quickReplyList{
  max-height:255px;
  overflow:auto;
  padding:0 10px 10px;
}

.quickReplyItem{
  display:block;
  width:100%;
  text-align:left;
  padding:10px;
  margin:6px 0;
  border-radius:8px;
  border:1px solid #183b20;
  background:#0b150d;
  color:#e9f5eb;
}

.quickReplyItem b{
  display:block;
  color:#82ff49;
  margin-bottom:3px;
}

.quickReplyItem small{
  display:block;
  color:#8ba091;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chatItem.activeChat{
  border-color:#5ee92b;
  background:#102315;
}

.chatItem .unreadBadge{
  float:right;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#62e72c;
  color:#051006;
  font-size:10px;
  font-weight:900;
}

@media(max-width:900px){
  .quickReplies{
    left:auto;
    right:12px;
    width:min(330px,calc(100vw - 40px));
  }
}


/* ===== Customer chat media ===== */

.chatBody .customerChatMedia{
  display:block;
  width:min(280px,100%);
  max-height:300px;
  object-fit:cover;
  border-radius:10px;
}

.chatBody video.customerChatMedia{
  object-fit:contain;
  background:#000;
}

.chatBody .customerChatAudio{
  width:min(270px,100%);
}

.customerFileMessage{
  display:flex;
  align-items:center;
  gap:9px;
}

.customerFileMessage a{
  color:inherit;
  text-decoration:underline;
  word-break:break-word;
}


/* ===== Customer Chat v2 Layout ===== */

#chat{
  position:fixed;
  right:24px;
  bottom:24px;
  width:min(420px,calc(100vw - 32px));
  height:min(720px,calc(100vh - 48px));
  display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  background:#061009;
  border:1px solid #2f7a39;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  z-index:9999;
}

#chat.hidden{
  display:none;
}

#chat .chatHead{
  flex:0 0 auto;
  min-height:88px;
  padding:18px 20px;
  background:linear-gradient(180deg,#124c1c,#103e18);
  border-bottom:1px solid #245a2c;
}

#chatBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:18px 16px;
  background:
    radial-gradient(circle at 50% 0%,rgba(80,255,45,.04),transparent 35%),
    #061009;
}

#customerMediaPreview{
  flex:0 0 auto;
  margin:8px 12px 0;
  padding:10px;
  border:1px solid #23542c;
  border-radius:12px;
  background:#0a170d;
}

#customerMediaPreview img,
#customerMediaPreview video{
  max-width:180px;
  max-height:130px;
  border-radius:8px;
}

#customerComposerTools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px 6px;
  background:#0b1a0e;
  border-top:1px solid #183e20;
}

#customerComposerTools.hidden{
  display:none;
}

#customerComposerTools button{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #2d6835;
  background:#0f2714;
  color:#f0fff2;
  font-size:20px;
  cursor:pointer;
}

#customerComposerTools button:hover{
  border-color:#66ef32;
  background:#153b1c;
}

#customerRecordingStatus{
  color:#ff7575;
  font-size:12px;
  font-weight:700;
}

#chatForm{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 14px;
  background:#0b1a0e;
  border-top:0;
}

#chatForm.hidden{
  display:none;
}

#chatForm input{
  flex:1;
  min-width:0;
  height:48px;
  padding:0 15px;
  border-radius:14px;
  border:1px solid #2c6e37;
  background:#07110a;
  color:#fff;
  font-size:15px;
  outline:none;
}

#chatForm input::placeholder{
  color:#809087;
}

#chatForm input:focus{
  border-color:#67ef31;
  box-shadow:0 0 0 2px rgba(103,239,49,.08);
}

#chatForm button{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:0;
  border-radius:14px;
  background:#5ee82a;
  color:#041006;
  font-size:21px;
  font-weight:900;
  cursor:pointer;
}

#chatBody .bubble{
  max-width:78%;
  padding:11px 13px;
  margin:9px 0;
  border-radius:15px;
  font-size:14px;
  line-height:1.4;
}

#chatBody .bubble.customer{
  margin-left:auto;
  background:#59e51f;
  color:#041006;
  border-bottom-right-radius:5px;
}

#chatBody .bubble.agent{
  margin-right:auto;
  background:#14251a;
  color:#f0fff2;
  border-bottom-left-radius:5px;
}

@media(max-width:640px){
  #chat{
    right:8px;
    left:8px;
    bottom:8px;
    width:auto;
    height:calc(100vh - 16px);
    border-radius:18px;
  }

  #chatBody{
    padding:14px 12px;
  }

  #customerComposerTools{
    padding-left:12px;
    padding-right:12px;
  }

  #chatForm{
    padding-left:10px;
    padding-right:10px;
  }
}


/* ===== Force customer media tools visible in active chat ===== */

#chatBody:not(.hidden) ~ #customerComposerTools{
  display:flex !important;
}

#customerComposerTools{
  align-items:center;
  gap:10px;
  padding:10px 14px 6px;
  background:#0b1a0e;
}

#customerComposerTools button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:46px;
  height:42px;
  padding:0 12px;
  border:1px solid #2d6835;
  border-radius:12px;
  background:#102a15;
  color:#fff;
  cursor:pointer;
}

#customerComposerTools button:hover{
  background:#17401e;
  border-color:#66ef32;
}

#customerMediaPreview{
  position:relative;
}

#customerMediaPreview button{
  margin-top:8px;
  padding:7px 11px;
  border-radius:8px;
  border:1px solid #683535;
  background:#271010;
  color:#ff8585;
  cursor:pointer;
}


/* ===== Inline customer labels ===== */

.customerChatIdentity{
  position:relative;
}

.customerLabelsBar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:8px;
}

.activeCustomerLabels{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.customerLabelChip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  background:#17381d;
  border:1px solid #3e8b48;
  color:#baff9e;
  font-size:11px;
  font-weight:700;
}

.removeCustomerLabel{
  border:0;
  background:transparent;
  color:#a8c9ae;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.addLabelInline{
  padding:5px 9px;
  border-radius:999px;
  border:1px dashed #4d7d54;
  background:#0b190e;
  color:#c6d8ca;
  font-size:11px;
  cursor:pointer;
}

.addLabelInline:hover{
  border-color:#65ef31;
  color:#76ff42;
}

.labelPicker{
  position:absolute;
  top:66px;
  left:0;
  width:280px;
  padding:10px;
  border-radius:12px;
  background:#08110a;
  border:1px solid #2e6636;
  box-shadow:0 16px 50px rgba(0,0,0,.55);
  z-index:100;
}

.labelPickerTitle{
  font-size:12px;
  font-weight:800;
  margin-bottom:8px;
  color:#dfffe2;
}

#labelPickerSearch{
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid #28522e;
  background:#0d180f;
  color:white;
  outline:none;
}

#labelPickerList{
  margin-top:8px;
  max-height:200px;
  overflow:auto;
}

.labelPickerItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 10px;
  margin:4px 0;
  border-radius:8px;
  border:1px solid #17391d;
  background:#0c160e;
  color:#e9f4eb;
  cursor:pointer;
}

.labelPickerItem:hover,
.labelPickerItem.selected{
  border-color:#57cf2c;
  background:#133019;
}

.createInlineLabel{
  width:100%;
  margin-top:8px;
  padding:9px;
  border-radius:8px;
  border:1px solid #4f9a39;
  background:#15351a;
  color:#7dff4b;
  font-weight:700;
  cursor:pointer;
}


/* ===== Chat section + unified search ===== */

.chatSectionBar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin:10px 0;
}

.chatSection{
  padding:8px 6px;
  border-radius:8px;
  border:1px solid #244c2b;
  background:#0b170d;
  color:#92a496;
  font-size:11px;
  cursor:pointer;
}

.chatSection:hover,
.chatSection.active{
  background:#17381c;
  color:#7dff49;
  border-color:#55cc2d;
}

.chatSearchWrap{
  margin-bottom:10px;
}

#chatSearch{
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border-radius:9px;
  border:1px solid #28532f;
  background:#08110a;
  color:white;
  outline:none;
}

#chatSearch:focus{
  border-color:#60e72d;
}

.chatListLabels{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:5px 0;
}

.miniLabelChip,
.miniLabelMore{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
}

.miniLabelChip{
  background:#17391e;
  color:#a9ff83;
  border:1px solid #347740;
}

.miniLabelMore{
  background:#242d26;
  color:#aeb9b0;
}

.noChatsFound{
  padding:20px 8px;
  text-align:center;
  color:#718077;
  font-size:12px;
}


/* ===== Customer rename ===== */

.customerNameRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.renameCustomerBtn{
  width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #315d37;
  border-radius:7px;
  background:#102415;
  cursor:pointer;
  font-size:12px;
}

.renameCustomerBtn:hover{
  border-color:#5ee62f;
  background:#17371d;
}


/* ===== Unread / new customer message polish ===== */

.chatItem.hasUnread{
  border-color:#59e82d !important;
  background:linear-gradient(180deg,#132c17,#0b180e) !important;
  box-shadow:0 0 0 1px rgba(89,232,45,.12),
             0 0 18px rgba(89,232,45,.08);
}

.chatItem.hasUnread b{
  color:#effff1;
  font-weight:900;
}

.chatItem.hasUnread > span:last-child{
  color:#d8f5dd;
  font-weight:700;
}

.unreadBadge{
  float:right;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  background:#61eb2d !important;
  color:#041006 !important;
  font-size:10px;
  font-weight:900;
  box-shadow:0 0 12px rgba(97,235,45,.35);
}

.chatItem.activeChat{
  border-color:#71f33d !important;
}

.chatItem.activeChat.hasUnread{
  box-shadow:none;
}


/* ===== Center time divider ===== */

.chatTimeDivider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin:14px 0;
  color:#80ef55;
  font-size:10px;
  font-weight:700;
}

.chatTimeDivider::before,
.chatTimeDivider::after{
  content:"";
  width:90px;
  height:1px;
  background:#215b2d;
}

.chatTimeDivider span{
  padding:5px 10px;
  border-radius:8px;
  background:#122018;
  white-space:nowrap;
}


/* ===== Preserve multiline chat messages ===== */

.agentMessages .bubble,
#chatBody .bubble{
  white-space:pre-wrap;
  word-break:break-word;
}


/* ===== Compact message bubble vertically ONLY ===== */

/* Keep current left/right sizing, reduce only top/bottom space */
#agentMessages .bubble{
  padding-top:10px !important;
  padding-bottom:8px !important;
  min-height:0 !important;
  height:auto !important;
}

/* Text lines stay close together */
#agentMessages .bubble{
  line-height:1.35 !important;
}

/* Timestamp should not create a big vertical gap */
#agentMessages .messageTime{
  display:block;
  margin-top:5px !important;
  margin-bottom:0 !important;
  line-height:1 !important;
}

/* Multiline text: preserve Enter but don't add artificial spacing */
#agentMessages .bubble{
  white-space:pre-wrap !important;
}


/* ===== WhatsApp-style compact bubbles ===== */

#agentMessages{
  display:flex;
  flex-direction:column;
}

#agentMessages .bubble{
  display:inline-block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:68% !important;
  align-self:flex-start;
  padding:8px 11px !important;
  margin:4px 0 !important;
  border-radius:12px !important;
  line-height:1.35 !important;
  white-space:pre-wrap !important;
  word-break:break-word;
}

#agentMessages .bubble.agent{
  align-self:flex-end !important;
  margin-left:auto !important;
  margin-right:12px !important;
}

#agentMessages .bubble.customer{
  align-self:flex-start !important;
  margin-left:12px !important;
  margin-right:auto !important;
}

#agentMessages .messageTime{
  display:block;
  margin-top:3px !important;
  font-size:9px;
  line-height:1 !important;
  opacity:.55;
}


/* ===== Fix broken compact bubble override ===== */

#agentMessages{
  display:block !important;
}

#agentMessages .bubble{
  display:block !important;
  width:auto !important;
  max-width:68% !important;
  min-width:0 !important;
}

#agentMessages .bubble.customer{
  width:max-content !important;
  max-width:68% !important;
  margin-left:12px !important;
  margin-right:auto !important;
}

#agentMessages .bubble.agent{
  width:max-content !important;
  max-width:68% !important;
  margin-left:auto !important;
  margin-right:12px !important;
}


/* ===== FINAL WhatsApp-style message spacing fix ===== */

#agentMessages .bubble{
  white-space:normal !important;
  padding:7px 10px !important;
  margin-top:3px !important;
  margin-bottom:3px !important;
  line-height:1.3 !important;
}

#agentMessages .messageText{
  white-space:pre-wrap;
  word-break:break-word;
}

#agentMessages .messageTime{
  margin-top:2px !important;
  line-height:1 !important;
}


/* ===== Saved Replies quick picker polish ===== */

.quickReplies{
  width:360px !important;
  max-height:360px !important;
  padding:8px;
}

#quickReplySearch{
  width:calc(100% - 16px) !important;
  margin:8px !important;
  padding:11px 12px !important;
  border-radius:10px !important;
}

#quickReplyList{
  max-height:275px !important;
  padding:0 8px 8px !important;
}

.quickReplyItem{
  padding:11px 12px !important;
  margin:5px 0 !important;
  border-radius:10px !important;
}

.quickReplyItem b{
  font-size:12px;
}

.quickReplyItem small{
  margin-top:3px;
  font-size:11px;
}


/* ===== Messenger-style customer list ===== */

.chatItem{
  position:relative;
  padding:11px 12px !important;
  border-radius:11px !important;
  margin-bottom:6px !important;
}

.chatItem b{
  display:block;
  padding-right:44px;
  font-size:13px;
  line-height:1.2;
}

.chatItem small{
  display:block;
  margin-top:3px !important;
  font-size:10px !important;
  opacity:.75;
}

.chatItem > span:last-child{
  display:block;
  margin-top:5px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px !important;
  line-height:1.25;
}

.chatListLabels{
  margin:5px 0 3px !important;
}

.miniLabelChip{
  padding:3px 6px !important;
  font-size:9px !important;
}

.unreadBadge{
  position:absolute;
  right:10px;
  top:10px;
  float:none !important;
}

.chatItem.activeChat{
  background:#112818 !important;
  border-color:#50c92d !important;
}

.chatItem.hasUnread{
  background:#102316 !important;
}

.chatItem.hasUnread b{
  color:#8dff5a !important;
}


.customerOnline{
  color:#6cff35;
  font-weight:800;
}

.customerOffline{
  color:#76837a;
  font-weight:700;
}

.customerPresenceDot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:5px;
  background:#58635b;
}

.customerPresenceDot.online{
  background:#62ed31;
  box-shadow:0 0 8px rgba(98,237,49,.5);
}


/* ===== Customer unread message notification ===== */

#openChat{
  position:relative;
}

.customerUnreadBadge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff3434;
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 12px rgba(255,52,52,.55);
  z-index:20;
}

.customerMessageToast{
  position:fixed;
  right:24px;
  bottom:95px;
  width:min(310px,calc(100vw - 32px));
  padding:13px 15px;
  border:1px solid #51d92b;
  border-radius:12px;
  background:#0b1c0e;
  color:#f1fff3;
  box-shadow:0 18px 55px rgba(0,0,0,.55);
  z-index:10000;
  cursor:pointer;
}

.customerMessageToast b{
  display:block;
  color:#7cff45;
  margin-bottom:3px;
}

.customerMessageToast span{
  display:block;
  font-size:12px;
  color:#c7d4ca;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:640px){
  .customerMessageToast{
    right:12px;
    bottom:82px;
  }
}


/* ===== Instagram-style latest receipt ===== */

.latestMessageReceipt{
  align-self:flex-end;
  margin:-1px 14px 5px auto;
  font-size:9px;
  color:#819087;
  line-height:1;
}


/* ===== Instagram-style Seen receipt ===== */

.latestMessageReceipt{
  display:block;
  width:max-content;
  margin:3px 14px 7px auto !important;
  color:#8a958d;
  font-size:10px;
  font-weight:400;
  line-height:1.2;
  text-align:right;
}


/* ===== FINAL Customer WhatsApp-style bubbles ===== */

#chatBody{
  display:flex;
  flex-direction:column;
}

#chatBody .bubble{
  display:block;
  width:max-content;
  min-width:0;
  max-width:78%;
  padding:7px 10px;
  margin:3px 0;
  border-radius:12px;
  line-height:1.3;
  white-space:pre-wrap;
  word-break:break-word;
}

#chatBody .bubble.customer{
  align-self:flex-end;
  margin-left:auto;
  margin-right:0;
  border-bottom-right-radius:4px;
}

#chatBody .bubble.agent{
  align-self:flex-start;
  margin-left:0;
  margin-right:auto;
  border-bottom-left-radius:4px;
}

/* Media stays clean inside compact bubbles */
#chatBody .customerChatMedia{
  display:block;
  max-width:260px;
  width:100%;
  border-radius:9px;
}

#chatBody .customerChatAudio{
  display:block;
  width:250px;
  max-width:100%;
}


/* ===== Clickable customer label filter ===== */

.filterByCustomerLabel{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  cursor:pointer;
}

.filterByCustomerLabel:hover{
  text-decoration:underline;
}

.activeLabelFilterBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 10px;
  padding:8px 10px;
  border:1px solid #347740;
  border-radius:9px;
  background:#102617;
  color:#a9ff83;
  font-size:11px;
  font-weight:700;
}

.activeLabelFilterBar button{
  border:0;
  background:transparent;
  color:#a9ff83;
  font-size:18px;
  line-height:1;
  padding:0 2px;
  cursor:pointer;
}


/* ===== Meta-style selected label ===== */

.filterByCustomerLabel.selectedLabelFilter{
  background:#63ee2e !important;
  color:#041006 !important;
  border-radius:999px;
  padding:3px 10px !important;
  font-weight:800;
  text-decoration:none !important;
}


/* ===== Meta-style sidebar labels ===== */

.chatLabelsSection{
  margin:12px 0 10px;
}

.chatLabelsTitle{
  margin:0 0 7px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  color:#718077;
}

.chatLabelsNav{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.sidebarLabelItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:8px 10px;
  border:1px solid #1f4d29;
  border-radius:9px;
  background:#08110a;
  color:#b7c5ba;
  font-size:11px;
  text-align:left;
  cursor:pointer;
}

.sidebarLabelItem:hover{
  border-color:#4fbd38;
  background:#102417;
}

.sidebarLabelItem.active{
  background:#12351b;
  border-color:#63ee2e;
  color:#aaff87;
  font-weight:800;
}

.noSidebarLabels{
  padding:8px 2px;
  font-size:10px;
  color:#66736a;
}


/* ===== Label bulk message ===== */

.labelBulkBox{
  margin-top:9px;
  padding:9px;
  border:1px solid #2f6d38;
  border-radius:10px;
  background:#0b1b0f;
}

.labelBulkHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.labelBulkHead b{
  font-size:11px;
  color:#aaff85;
}

.labelBulkHead span{
  font-size:9px;
  color:#75857a;
}

#labelBulkMessage{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:65px;
  max-height:140px;
  padding:8px 9px;
  border:1px solid #285a31;
  border-radius:8px;
  background:#071009;
  color:#fff;
  outline:none;
}

#labelBulkMessage:focus{
  border-color:#63ee2e;
}

#sendLabelBulkMessage{
  width:100%;
  margin-top:7px;
  padding:8px;
  border:0;
  border-radius:8px;
  background:#5dea27;
  color:#041006;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

#sendLabelBulkMessage:disabled{
  opacity:.55;
  cursor:wait;
}

/* =========================================================
   CLEAN MEDIA MESSAGES — CUSTOMER + AGENT
   No text bubble around image/video
   Wide usable voice/audio player
   ========================================================= */

/* ---------- MEDIA BUBBLES: remove normal message container ---------- */

#chatBody .bubble:has(img),
#chatBody .bubble:has(video),
#agentMessages .bubble:has(img),
#agentMessages .bubble:has(video){
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:72% !important;
  overflow:visible !important;
}

/* ---------- CUSTOMER SIDE IMAGE / VIDEO ---------- */

#chatBody .customerChatMedia{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:420px !important;
  object-fit:contain !important;
  border-radius:12px !important;
  margin:0 !important;
}

/* Image link itself should not create extra space */
#chatBody .bubble:has(.customerChatMedia) > a{
  display:block !important;
  line-height:0 !important;
}

/* ---------- AGENT SIDE IMAGE / VIDEO ---------- */

#agentMessages .chatMedia{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:430px !important;
  object-fit:contain !important;
  border-radius:12px !important;
  margin:0 !important;
}

#agentMessages .bubble:has(.chatMedia) > a{
  display:block !important;
  line-height:0 !important;
}


/* =========================================================
   VOICE / AUDIO
   ========================================================= */

/* Voice message must never inherit tiny text-bubble width */
#chatBody .bubble:has(audio),
#agentMessages .bubble:has(audio){
  width:360px !important;
  min-width:300px !important;
  max-width:min(78%, 420px) !important;

  padding:9px 10px !important;

  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Native player fills the whole voice message */
#chatBody audio,
#agentMessages audio{
  display:block !important;
  width:100% !important;
  min-width:280px !important;
  height:42px !important;
  margin:0 !important;
}

/* Customer incoming voice */
#chatBody .bubble.agent:has(audio){
  align-self:flex-start !important;
}

/* Customer outgoing voice */
#chatBody .bubble.customer:has(audio){
  align-self:flex-end !important;
}

/* Agent portal — agent outgoing voice */
#agentMessages .bubble.agent:has(audio){
  align-self:flex-end !important;
  margin-left:auto !important;
}

/* Agent portal — customer incoming voice */
#agentMessages .bubble.customer:has(audio){
  align-self:flex-start !important;
  margin-right:auto !important;
}


/* =========================================================
   MEDIA MESSAGE TIMESTAMP
   keep timestamp clean underneath media
   ========================================================= */

#agentMessages .bubble:has(img) .messageTime,
#agentMessages .bubble:has(video) .messageTime{
  display:block !important;
  margin-top:5px !important;
  padding:0 3px !important;
  font-size:9px !important;
}

/* Don't allow generic bubble rules to squeeze players */
#agentMessages .bubble:has(audio) .messageTime{
  display:block !important;
  margin-top:4px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  #chatBody .bubble:has(audio),
  #agentMessages .bubble:has(audio){
    width:82% !important;
    min-width:260px !important;
    max-width:82% !important;
  }

  #chatBody audio,
  #agentMessages audio{
    min-width:0 !important;
    width:100% !important;
  }

  #chatBody .bubble:has(img),
  #chatBody .bubble:has(video),
  #agentMessages .bubble:has(img),
  #agentMessages .bubble:has(video){
    max-width:82% !important;
  }
}


/* ===== FINAL MEDIA / VOICE BUBBLE FIX ===== */

/* IMAGE + VIDEO + VOICE:
   remove normal message bubble container */
#chatBody .bubble:has(img),
#chatBody .bubble:has(video),
#chatBody .bubble:has(audio),
#agentMessages .bubble:has(img),
#agentMessages .bubble:has(video),
#agentMessages .bubble:has(audio){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* VOICE MESSAGE CONTAINER
   keep enough width so native audio controls don't squeeze */
#chatBody .bubble:has(audio),
#agentMessages .bubble:has(audio){
  width: 360px !important;
  min-width: 300px !important;
  max-width: 75% !important;
  overflow: visible !important;
}

/* AUDIO PLAYER */
#chatBody .bubble audio,
#agentMessages .bubble audio{
  display: block !important;
  width: 100% !important;
  min-width: 300px !important;
  height: 54px !important;
  margin: 0 !important;
}

/* CUSTOMER WEBSITE:
   customer outgoing media stays RIGHT */
#chatBody .bubble.customer:has(audio),
#chatBody .bubble.customer:has(img),
#chatBody .bubble.customer:has(video){
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* CUSTOMER WEBSITE:
   agent incoming media stays LEFT */
#chatBody .bubble.agent:has(audio),
#chatBody .bubble.agent:has(img),
#chatBody .bubble.agent:has(video){
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* AGENT PORTAL:
   agent outgoing media stays RIGHT */
#agentMessages .bubble.agent:has(audio),
#agentMessages .bubble.agent:has(img),
#agentMessages .bubble.agent:has(video){
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* AGENT PORTAL:
   customer incoming media stays LEFT */
#agentMessages .bubble.customer:has(audio),
#agentMessages .bubble.customer:has(img),
#agentMessages .bubble.customer:has(video){
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* IMAGE / VIDEO should not inherit text bubble dimensions */
#chatBody .bubble:has(img),
#chatBody .bubble:has(video),
#agentMessages .bubble:has(img),
#agentMessages .bubble:has(video){
  width: auto !important;
  min-width: 0 !important;
  max-width: 72% !important;
}

/* MEDIA ITSELF */
#chatBody .customerChatMedia,
#agentMessages .chatMedia{
  display: block !important;
  max-width: 100% !important;
  max-height: 430px !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

/* MOBILE */
@media (max-width:600px){
  #chatBody .bubble:has(audio),
  #agentMessages .bubble:has(audio){
    width: 82% !important;
    min-width: 260px !important;
    max-width: 82% !important;
  }

  #chatBody .bubble audio,
  #agentMessages .bubble audio{
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   CUSTOMER HERO PROMO SLIDER
   ========================================================= */

.hero{
  align-items:center;
  gap:35px;
}

.heroCopy{
  width:38%;
  flex:0 0 38%;
}

.heroPromo{
  position:relative;
  flex:1;
  min-width:0;
  height:330px;
  border:1px solid #4c9a31;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 65% 35%,rgba(63,255,24,.18),transparent 42%),
    linear-gradient(135deg,#07100a,#092611 60%,#050a07);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 30px rgba(76,255,31,.10);
}

.hero777Brand{
  position:absolute;
  z-index:6;
  left:26px;
  top:22px;
  text-align:center;
}

.hero777Slot{
  padding:7px 17px;
  border:3px solid #bd8a20;
  border-radius:12px;
  background:#111913;
  color:#fff;
  font-size:31px;
  line-height:1;
  font-weight:950;
  transform:rotate(-2deg);
  text-shadow:0 0 12px #fff;
  box-shadow:0 0 18px rgba(213,164,41,.18);
}

.hero777Brand small{
  display:block;
  margin-top:7px;
  color:#d7c375;
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.heroSlides{
  position:relative;
  width:100%;
  height:100%;
}

.heroSlide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:35px;
  padding:65px 70px 48px 155px;

  opacity:0;
  visibility:hidden;
  transform:translateX(30px);

  transition:
    opacity .55s ease,
    transform .55s ease,
    visibility .55s;
}

.heroSlide.active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

.heroSlideVisual{
  flex:0 0 145px;
  height:145px;
  display:grid;
  place-items:center;

  border:1px solid rgba(226,185,60,.35);
  border-radius:28px;

  background:
    radial-gradient(circle,#243c16,#090e0a 72%);

  font-size:80px;

  box-shadow:
    inset 0 0 35px rgba(118,255,44,.08),
    0 15px 40px rgba(0,0,0,.35);
}

.heroSlideCopy{
  min-width:0;
}

.heroPromoTag{
  display:inline-block;
  margin-bottom:8px;
  padding:5px 10px;
  border-radius:6px;
  background:#143e18;
  color:#79ff3e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.6px;
}

.heroSlideCopy h2{
  margin:0;
  color:#f7fff7;
  font-size:32px;
  line-height:.95;
  font-style:italic;
}

.heroSlideCopy h2 strong{
  color:#61ff20;
  font-size:42px;
}

.heroSlideCopy p{
  max-width:390px;
  margin:13px 0;
  color:#b3c2b6;
  font-size:12px;
  line-height:1.45;
}

.heroPromoBtn{
  border:0;
  border-radius:9px;
  padding:11px 18px;

  background:linear-gradient(180deg,#72ff2e,#51d919);
  color:#061006;

  font-size:11px;
  font-weight:950;

  box-shadow:0 0 20px rgba(94,255,31,.18);
}

.heroPromoBtn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.heroSlideArrow{
  position:absolute;
  z-index:8;
  top:50%;
  transform:translateY(-50%);

  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border:1px solid #718075;
  border-radius:50%;

  background:rgba(2,7,4,.78);
  color:white;

  font-size:29px;
  line-height:1;
}

.heroSlidePrev{
  left:14px;
}

.heroSlideNext{
  right:14px;
}

.heroSlideArrow:hover{
  border-color:#68ff2c;
  color:#68ff2c;
}

.heroSlideDots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);

  display:flex;
  gap:8px;
}

.heroSlideDots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#536057;
}

.heroSlideDots button.active{
  background:#69ff27;
  box-shadow:0 0 10px rgba(105,255,39,.6);
}


/* HERO RESPONSIVE */

@media(max-width:1150px){

  .heroCopy{
    width:43%;
    flex-basis:43%;
  }

  .heroSlide{
    padding-left:125px;
    padding-right:50px;
    gap:20px;
  }

  .heroSlideVisual{
    flex-basis:110px;
    width:110px;
    height:110px;
    font-size:58px;
  }

  .heroSlideCopy h2{
    font-size:25px;
  }

  .heroSlideCopy h2 strong{
    font-size:32px;
  }
}


@media(max-width:900px){

  .hero{
    display:block;
  }

  .heroCopy{
    width:100%;
  }

  .heroPromo{
    margin-top:32px;
    width:100%;
    height:330px;
  }

  .heroSlide{
    padding:78px 55px 50px 125px;
  }
}


@media(max-width:650px){

  .heroPromo{
    height:390px;
  }

  .hero777Brand{
    left:50%;
    top:16px;
    transform:translateX(-50%);
  }

  .heroSlide{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:14px;

    padding:90px 45px 45px;
  }

  .heroSlideVisual{
    flex:0 0 90px;
    width:90px;
    height:90px;
    font-size:48px;
  }

  .heroSlideCopy p{
    margin-left:auto;
    margin-right:auto;
  }

  .heroSlideCopy h2{
    font-size:23px;
  }

  .heroSlideCopy h2 strong{
    font-size:30px;
  }
}


/* ===== HERO SLIDER FINAL TWEAKS ===== */

/* 1. Remove outer slider border */
.heroPromo{
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* 2. Bigger + bolder 777 */
.hero777Brand{
  left:32px !important;
  top:25px !important;
}

.hero777Slot{
  min-width:145px;
  padding:10px 22px !important;

  font-size:52px !important;
  font-weight:1000 !important;
  line-height:.9 !important;
  letter-spacing:2px;

  color:#fff;

  border:4px solid #bd8a20 !important;
  border-radius:14px !important;

  text-shadow:
    0 0 7px #fff,
    0 0 16px rgba(255,255,255,.65) !important;
}

.hero777Brand small{
  margin-top:9px !important;
  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:1px !important;
}



/* =========================================================
   HERO SLIDER V2 — APPROVED DESIGN
   FIX GHOSTING + BETTER 777 + CLEAN PROMO LAYOUT
   ========================================================= */

/* Whole right-side promo area */
.heroPromo{
  position:relative !important;
  flex:1 !important;
  height:350px !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;

  background:
    radial-gradient(circle at 72% 45%,rgba(61,255,23,.18),transparent 38%),
    radial-gradient(circle at 40% 55%,rgba(67,255,26,.07),transparent 35%),
    linear-gradient(90deg,rgba(2,8,4,.15),rgba(5,40,14,.48),rgba(2,12,6,.12)) !important;
}


/* =========================================================
   BIG 777 BRAND
   ========================================================= */

.hero777Brand{
  position:absolute !important;
  z-index:20 !important;

  left:38px !important;
  top:30px !important;

  width:185px !important;
  text-align:center !important;

  transform:none !important;
}

.hero777Slot{
  width:180px !important;
  min-width:180px !important;

  padding:12px 18px !important;

  font-size:68px !important;
  font-weight:1000 !important;
  line-height:.88 !important;
  letter-spacing:3px !important;

  color:#fff !important;
  background:
    radial-gradient(circle at 50% 40%,#263126,#0a100b 72%) !important;

  border:4px solid #c99120 !important;
  border-radius:15px !important;

  transform:rotate(-2deg) !important;

  text-shadow:
    0 0 5px #fff,
    0 0 15px rgba(255,255,255,.8),
    0 0 26px rgba(255,255,255,.45) !important;

  box-shadow:
    inset 0 0 25px rgba(255,255,255,.035),
    0 0 22px rgba(218,164,36,.16) !important;
}

.hero777Brand small{
  display:block !important;
  margin-top:10px !important;

  color:#d9b948 !important;

  font-size:11px !important;
  font-weight:1000 !important;
  letter-spacing:1.1px !important;

  white-space:nowrap !important;
}


/* =========================================================
   IMPORTANT:
   NO CROSS-FADE / NO DOUBLE SLIDES
   ========================================================= */

.heroSlides{
  position:relative !important;
  width:100% !important;
  height:100% !important;
}

.heroSlide{
  position:absolute !important;
  inset:0 !important;

  display:none !important;

  align-items:center !important;

  /* space:
     777 | main icon | text | decoration */
  grid-template-columns:210px 160px minmax(260px,1fr) 145px;

  padding:
    55px
    68px
    48px
    235px !important;

  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;

  transition:none !important;
}


/* Only ONE slide exists visually at a time */
.heroSlide.active{
  display:flex !important;

  gap:30px !important;

  animation:wcHeroSlideIn .38s ease both;
}

@keyframes wcHeroSlideIn{
  from{
    opacity:0;
    transform:translateX(22px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}


/* =========================================================
   MAIN PROMO ICON
   ========================================================= */

.heroSlideVisual{
  position:relative !important;

  flex:0 0 155px !important;

  width:155px !important;
  height:155px !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid rgba(205,163,47,.28) !important;
  border-radius:28px !important;

  background:
    radial-gradient(circle at 50% 45%,rgba(82,255,37,.16),rgba(8,15,9,.94) 68%) !important;

  font-size:82px !important;

  filter:
    drop-shadow(0 0 13px rgba(85,255,39,.18));

  box-shadow:
    inset 0 0 38px rgba(88,255,44,.055),
    0 15px 35px rgba(0,0,0,.30) !important;
}


/* Green glow behind icon */
.heroSlideVisual::before{
  content:"";
  position:absolute;
  inset:22px;

  border-radius:50%;

  background:rgba(80,255,30,.08);
  filter:blur(22px);

  z-index:-1;
}


/* =========================================================
   PROMO TEXT
   ========================================================= */

.heroSlideCopy{
  position:relative !important;

  flex:1 1 auto !important;
  min-width:280px !important;
  max-width:470px !important;

  z-index:4 !important;
}

.heroPromoTag{
  display:inline-block !important;

  margin:0 0 10px !important;
  padding:6px 12px !important;

  border-radius:6px !important;

  background:rgba(21,81,26,.75) !important;
  color:#79ff3a !important;

  font-size:10px !important;
  font-weight:950 !important;
  letter-spacing:.7px !important;
}

.heroSlideCopy h2{
  margin:0 !important;

  color:#f8fff8 !important;

  font-size:37px !important;
  line-height:.92 !important;
  font-weight:950 !important;
  font-style:italic !important;

  letter-spacing:-1px !important;

  text-shadow:0 4px 18px rgba(0,0,0,.28);
}

.heroSlideCopy h2 strong{
  color:#57f619 !important;

  font-size:46px !important;
  font-weight:1000 !important;

  text-shadow:
    0 0 19px rgba(78,255,24,.14);
}

.heroSlideCopy p{
  max-width:430px !important;

  margin:15px 0 16px !important;

  color:#b8c5ba !important;

  font-size:13px !important;
  line-height:1.45 !important;
}

.heroPromoBtn{
  min-width:160px !important;

  padding:12px 20px !important;

  border:0 !important;
  border-radius:9px !important;

  background:
    linear-gradient(180deg,#70ff28,#50d818) !important;

  color:#061006 !important;

  font-size:11px !important;
  font-weight:1000 !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.25),
    0 0 18px rgba(83,255,26,.18) !important;
}


/* =========================================================
   EXTRA DECORATION ON RIGHT
   Gives approved mockup richer look
   ========================================================= */

.heroSlide::after{
  position:absolute;

  right:90px;
  top:50%;

  transform:translateY(-50%);

  width:135px;
  height:135px;

  display:grid;
  place-items:center;

  font-size:78px;

  opacity:.92;

  filter:
    drop-shadow(0 0 18px rgba(101,255,42,.24));

  pointer-events:none;
}


/* Welcome */
.heroSlide[data-slide="0"]::after{
  content:"🎁";
}

/* Referral */
.heroSlide[data-slide="1"]::after{
  content:"🎁";
}

/* Reload */
.heroSlide[data-slide="2"]::after{
  content:"💰";
}

/* Support */
.heroSlide[data-slide="3"]::after{
  content:"🎧";
}


/* =========================================================
   ARROWS
   ========================================================= */

.heroSlideArrow{
  position:absolute !important;
  z-index:30 !important;

  top:50% !important;
  transform:translateY(-50%) !important;

  width:46px !important;
  height:46px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:1px solid #748278 !important;
  border-radius:50% !important;

  background:rgba(1,6,3,.72) !important;
  color:#fff !important;

  font-size:34px !important;
  font-weight:400 !important;

  backdrop-filter:blur(7px);
}

.heroSlidePrev{
  left:8px !important;
}

.heroSlideNext{
  right:10px !important;
}

.heroSlideArrow:hover{
  color:#67ff28 !important;
  border-color:#67ff28 !important;
}


/* =========================================================
   DOTS
   ========================================================= */

.heroSlideDots{
  position:absolute !important;
  z-index:30 !important;

  left:57% !important;
  bottom:13px !important;

  transform:translateX(-50%) !important;

  display:flex !important;
  gap:9px !important;
}

.heroSlideDots button{
  width:9px !important;
  height:9px !important;

  padding:0 !important;
  border:0 !important;

  border-radius:50% !important;

  background:#687169 !important;
}

.heroSlideDots button.active{
  background:#60ff22 !important;

  box-shadow:
    0 0 12px rgba(96,255,34,.7) !important;
}


/* =========================================================
   DESKTOP HERO PROPORTIONS
   ========================================================= */

@media(min-width:1160px){

  .hero{
    min-height:390px !important;

    padding:
      48px
      4% !important;

    gap:30px !important;
  }

  .heroCopy{
    width:37% !important;
    flex:0 0 37% !important;
  }

  .heroPromo{
    height:350px !important;
  }
}


/* =========================================================
   MEDIUM
   ========================================================= */

@media(max-width:1150px){

  .hero777Brand{
    left:25px !important;
  }

  .hero777Slot{
    width:145px !important;
    min-width:145px !important;
    font-size:52px !important;
  }

  .heroSlide{
    padding:
      65px
      55px
      45px
      190px !important;
  }

  .heroSlideVisual{
    flex-basis:115px !important;

    width:115px !important;
    height:115px !important;

    font-size:61px !important;
  }

  .heroSlideCopy h2{
    font-size:28px !important;
  }

  .heroSlideCopy h2 strong{
    font-size:35px !important;
  }

  .heroSlide::after{
    right:55px;
    font-size:60px;
  }
}


/* =========================================================
   TABLET / PHONE
   ========================================================= */

@media(max-width:900px){

  .hero{
    display:block !important;
  }

  .heroCopy{
    width:100% !important;
  }

  .heroPromo{
    width:100% !important;
    height:390px !important;

    margin-top:35px !important;
  }
}


@media(max-width:650px){

  .heroPromo{
    height:470px !important;
  }

  .hero777Brand{
    left:50% !important;
    top:14px !important;

    width:150px !important;

    transform:translateX(-50%) !important;
  }

  .hero777Slot{
    width:150px !important;
    min-width:150px !important;

    font-size:50px !important;
  }

  .heroSlide.active{
    display:flex !important;

    flex-direction:column !important;
    justify-content:center !important;

    gap:12px !important;
  }

  .heroSlide{
    padding:
      105px
      45px
      45px !important;

    text-align:center !important;
  }

  .heroSlideVisual{
    flex:0 0 88px !important;

    width:88px !important;
    height:88px !important;

    font-size:46px !important;
  }

  .heroSlideCopy{
    min-width:0 !important;
    width:100% !important;
  }

  .heroSlideCopy h2{
    font-size:24px !important;
  }

  .heroSlideCopy h2 strong{
    font-size:30px !important;
  }

  .heroSlideCopy p{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .heroSlide::after{
    display:none !important;
  }

  .heroSlideDots{
    left:50% !important;
  }
}


/* =========================================================
   HOT GAME CARDS — LARGE ARTWORK LIKE APPROVED MOCKUP
   ========================================================= */

.gamesGrid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}

.gameCard{
  padding:10px !important;
  min-height:285px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

/* Main game poster/icon area */
.gameArtwork{
  width:100% !important;
  height:155px !important;
  aspect-ratio:auto !important;

  display:grid !important;
  place-items:center !important;

  overflow:hidden !important;

  border-radius:12px !important;

  background:
    radial-gradient(circle at 50% 45%,rgba(72,255,30,.15),transparent 48%),
    #061008 !important;
}

/* REAL artwork */
.gameArtwork img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  border-radius:12px !important;
}

/* Temporary fallback until actual game image exists */
.gameArtworkFallback{
  width:100% !important;
  height:100% !important;

  display:grid !important;
  place-items:center !important;

  font-size:78px !important;
  font-weight:900 !important;

  color:#8cff49 !important;

  text-shadow:
    0 0 12px rgba(91,255,36,.8),
    0 0 30px rgba(91,255,36,.35) !important;
}

.gameCard h3{
  margin:10px 0 3px !important;
  font-size:14px !important;
  text-align:center !important;
}

.gameCard > small{
  text-align:center !important;
  margin-bottom:7px !important;
}

.gameBtn{
  margin-top:auto !important;
}

/* HOT badge */
.gameCard > i{
  top:7px !important;
  right:7px !important;
  z-index:10 !important;
}


/* Wider screens = poster a little taller */
@media(min-width:1400px){

  .gameArtwork{
    height:175px !important;
  }

}


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

  .gamesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .gameArtwork{
    height:145px !important;
  }

}



/* =========================================================
   REAL GAME POSTERS — APPROVED DESIGN
   ========================================================= */

.gameArtwork{
  position:relative !important;

  width:100% !important;
  height:190px !important;

  padding:0 !important;
  margin:0 0 12px !important;

  overflow:hidden !important;
  border-radius:12px !important;

  background:#050c06 !important;
}

.gameArtwork img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center !important;

  border-radius:12px !important;
}

/* No emoji when real poster exists */

.gameArtwork:has(img) .gameArtworkFallback{
  display:none !important;
}


/* Game cards */

.gameCard{
  position:relative !important;

  min-height:315px !important;
  padding:10px !important;

  display:flex !important;
  flex-direction:column !important;

  background:#030a05 !important;

  border:1px solid #247c31 !important;
  border-radius:13px !important;
}


/* Game name */

.gameCard h3{
  margin:0 0 4px !important;

  text-align:center !important;

  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
}


/* HOT TODAY / AVAILABLE */

.gameCard > small{
  display:block !important;

  margin:0 0 12px !important;

  text-align:center !important;

  color:#8ba38f !important;
  font-size:11px !important;
}


/* GET STARTED */

.gameBtn{
  width:100% !important;

  margin-top:auto !important;
  min-height:43px !important;

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

  border:2px solid #55f51e !important;
  border-radius:8px !important;

  background:#07170c !important;

  color:#72ff45 !important;
  font-weight:900 !important;
}


/* HOT badge */

.gameCard > i{
  position:absolute !important;

  top:8px !important;
  right:8px !important;

  z-index:20 !important;

  padding:4px 8px !important;

  border-radius:7px !important;

  background:#ff3030 !important;
  color:#fff !important;

  font-size:11px !important;
  font-weight:900 !important;
}


/* Desktop */

.gamesGrid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}


/* Large screens */

@media(min-width:1500px){

  .gameArtwork{
    height:210px !important;
  }

}


/* Mobile */

@media(max-width:700px){

  .gamesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .gameArtwork{
    height:155px !important;
  }

  .gameCard{
    min-height:275px !important;
  }

}



/* =========================================================
   REDEEMABLE FREEPLAY TASK SLIDER
   ========================================================= */

.rewardTaskSlider{
  position:relative;

  min-height:255px;
  margin-top:18px;

  overflow:hidden;

  border:1px solid #29582d;
  border-radius:14px;

  background:
    radial-gradient(circle at 15% 40%,rgba(95,255,36,.14),transparent 34%),
    radial-gradient(circle at 80% 30%,rgba(255,189,41,.08),transparent 35%),
    linear-gradient(135deg,#07110a,#030806);

  box-shadow:
    inset 0 0 35px rgba(73,255,27,.025);
}


.rewardTaskHeader{
  position:relative;
  z-index:5;

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

  padding:13px 16px;

  border-bottom:1px solid rgba(87,255,44,.10);
}

.rewardTaskHeader small{
  display:block;

  margin-bottom:3px;

  color:#79907e;

  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
}

.rewardTaskHeader b{
  color:#75ff39;

  font-size:12px;
  font-weight:950;
}

.rewardTaskCounter{
  color:#78877c;

  font-size:10px;
  font-weight:900;
}

.rewardTaskCounter span{
  color:#70ff32;
}


/* ---------- SLIDES ---------- */

.rewardTaskSlides{
  position:relative;
  height:190px;
}

.rewardTaskSlide{
  position:absolute;
  inset:0;

  display:none;

  align-items:center;
  gap:18px;

  padding:18px 46px 28px 20px;
}

.rewardTaskSlide.active{
  display:flex;

  animation:rewardSlideIn .32s ease both;
}

@keyframes rewardSlideIn{
  from{
    opacity:0;
    transform:translateX(15px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}


/* ---------- BIG REWARD NUMBER ---------- */

.rewardPercent{
  flex:0 0 105px;

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

  height:105px;

  border:1px solid #90691d;
  border-radius:50%;

  background:
    radial-gradient(circle,#3a2d0a,#0d0b04 68%);

  color:#ffc43d;

  font-size:37px;
  font-weight:1000;
  font-style:italic;

  text-shadow:
    0 0 18px rgba(255,190,39,.32);

  box-shadow:
    0 0 25px rgba(255,185,34,.08);
}


/* ---------- TEXT ---------- */

.rewardTaskContent{
  min-width:0;
}

.rewardTaskTag{
  display:inline-block;

  margin-bottom:7px;
  padding:4px 8px;

  border-radius:5px;

  background:#143919;
  color:#77ff3d;

  font-size:8px;
  font-weight:950;
  letter-spacing:.5px;
}

.rewardTaskContent h3{
  margin:0;

  color:#fff;

  font-size:17px;
  line-height:1.05;
}

.rewardTaskContent p{
  max-width:330px;

  margin:8px 0 11px;

  color:#9faf9f;

  font-size:10px;
  line-height:1.45;
}


/* ---------- BUTTON ---------- */

.rewardTaskBtn{
  padding:8px 12px;

  border:1px solid #5aff26;
  border-radius:7px;

  background:#0b2410;
  color:#76ff3d;

  font-size:9px;
  font-weight:950;
}

.rewardTaskBtn:hover{
  background:#123719;
}


/* ---------- ARROWS ---------- */

.rewardArrow{
  position:absolute;
  z-index:10;

  top:60%;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid #536358;
  border-radius:50%;

  background:rgba(2,7,4,.82);
  color:#fff;

  font-size:20px;
}

.rewardPrev{
  left:7px;
}

.rewardNext{
  right:7px;
}

.rewardArrow:hover{
  color:#70ff34;
  border-color:#70ff34;
}


/* ---------- DOTS ---------- */

.rewardDots{
  position:absolute;
  z-index:10;

  left:50%;
  bottom:9px;

  display:flex;
  gap:6px;

  transform:translateX(-50%);
}

.rewardDots button{
  width:6px;
  height:6px;

  padding:0;
  border:0;

  border-radius:50%;

  background:#556059;
}

.rewardDots button.active{
  background:#68ff2e;

  box-shadow:
    0 0 8px rgba(104,255,46,.6);
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

  .rewardTaskSlider{
    min-height:315px;
  }

  .rewardTaskSlides{
    height:250px;
  }

  .rewardTaskSlide{
    flex-direction:column;

    justify-content:center;

    padding:
      15px
      38px
      30px;

    text-align:center;
  }

  .rewardPercent{
    flex:0 0 80px;

    width:80px;
    height:80px;

    font-size:28px;
  }

  .rewardTaskContent p{
    margin-left:auto;
    margin-right:auto;
  }
}



/* =========================================================
   CURRENT OFFERS V2
   3 PREMIUM CARDS + REWARD SLIDER BELOW
   ========================================================= */

.offersPanel{
  display:flex !important;
  flex-direction:column !important;

  background:
    radial-gradient(circle at 50% 15%,rgba(53,255,29,.035),transparent 35%),
    #020806 !important;
}

#offersGrid{
  display:flex;
  flex-direction:column;
  gap:12px;

  margin-top:12px;
}


/* ---------- OFFER CARD ---------- */

.premiumOffer{
  position:relative;

  min-height:145px;

  display:grid !important;
  grid-template-columns:105px minmax(150px,1fr) minmax(155px,.9fr) 135px;
  align-items:center;
  gap:15px;

  margin:0 !important;
  padding:14px !important;

  overflow:hidden;

  border-radius:14px !important;

  background:
    linear-gradient(100deg,#090b07,#080a07 58%,#040704) !important;
}


/* Welcome = GOLD */

.premiumOffer.welcomeOffer{
  border:1px solid #8c6413 !important;
  box-shadow:
    inset 0 0 35px rgba(255,183,24,.025);
}


/* Reload = GREEN */

.premiumOffer.reloadOffer{
  border:1px solid #467e19 !important;
  box-shadow:
    inset 0 0 35px rgba(94,255,32,.025);
}


/* Referral = PURPLE */

.premiumOffer.referralOffer{
  border:1px solid #66318a !important;

  background:
    radial-gradient(circle at 15% 50%,rgba(168,55,255,.10),transparent 30%),
    linear-gradient(100deg,#0b0710,#08070a 60%,#050507) !important;
}


/* ---------- BIG ICON ---------- */

.offerVisual{
  width:88px;
  height:88px;

  display:grid;
  place-items:center;

  justify-self:center;

  border-radius:50%;

  font-size:43px;

  background:#100e07;

  box-shadow:
    inset 0 0 25px rgba(255,193,44,.10),
    0 0 25px rgba(255,186,30,.08);
}

.welcomeOffer .offerVisual{
  border:1px solid #a7781b;
}

.reloadOffer .offerVisual{
  border:1px solid #59a523;

  background:#081306;

  box-shadow:
    inset 0 0 25px rgba(93,255,34,.10),
    0 0 25px rgba(91,255,30,.08);
}

.referralOffer .offerVisual{
  border:1px solid #8037a9;

  background:#100817;

  box-shadow:
    inset 0 0 27px rgba(191,64,255,.12),
    0 0 26px rgba(177,50,255,.10);
}


/* ---------- MAIN TEXT ---------- */

.offerMain{
  min-width:0;
}

.offerTag{
  display:inline-block;

  margin-bottom:6px;
  padding:4px 8px;

  border-radius:5px;

  font-size:8px;
  font-weight:950;
  letter-spacing:.5px;
}

.welcomeOffer .offerTag{
  background:#522313;
  color:#ffb644;
}

.reloadOffer .offerTag{
  background:#173d0d;
  color:#8aff45;
}

.referralOffer .offerTag{
  background:#351341;
  color:#dc7dff;
}

.offerMain small{
  display:block;

  margin-bottom:2px;

  color:#a6afa8;
  font-size:10px;
}

.offerMain h3{
  margin:0 !important;

  font-size:34px !important;
  line-height:1 !important;

  color:#ffc13b !important;
}

.reloadOffer .offerMain h3{
  color:#7dff37 !important;
}

.referralOffer .offerMain h3{
  color:#d969ff !important;
  font-size:24px !important;
}

.offerMain b{
  display:block;

  margin-top:5px;

  font-size:13px !important;
  color:#fff;
}


/* ---------- BENEFITS ---------- */

.offerBenefits{
  display:flex;
  flex-direction:column;
  gap:8px;

  color:#c0c9c2;

  font-size:10px;
}

.offerBenefits span::first-letter{
  color:#6cff31;
}


/* ---------- CTA ---------- */

.offerAction{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}

.offerAction .offerBtn{
  width:100% !important;

  margin:0 !important;
  padding:10px 9px !important;

  border-radius:8px !important;

  font-size:10px !important;
  font-weight:950 !important;
}

.welcomeOffer .offerBtn{
  border-color:#b77d13 !important;
  background:#6c3e07 !important;
}

.reloadOffer .offerBtn{
  border-color:#5fce25 !important;
  background:#173c0e !important;
  color:#a5ff71 !important;
}

.referralOffer .offerBtn{
  border-color:#9f49c8 !important;
  background:#431552 !important;
  color:#f0b1ff !important;
}

.offerAction small{
  color:#89948c;
  font-size:8px;
  text-align:center;
}


/* =========================================================
   FREEPLAY MUST REMAIN ONE SLIDE AT A TIME
   ========================================================= */

.rewardTaskSlider{
  margin-top:16px !important;

  flex:1 1 auto;

  min-height:300px !important;

  display:flex;
  flex-direction:column;
}

.rewardTaskSlides{
  position:relative !important;

  flex:1 1 auto !important;

  min-height:220px !important;
  height:auto !important;
}

.rewardTaskSlide{
  display:none !important;
}

.rewardTaskSlide.active{
  display:flex !important;
}


/* Let the reward panel visually use more of the lower area */

.rewardTaskSlide.active{
  min-height:220px;

  align-items:center !important;
  justify-content:center;
}


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

@media(max-width:1200px){

  .premiumOffer{
    grid-template-columns:82px 1fr 120px;
  }

  .offerBenefits{
    display:none;
  }

}


@media(max-width:700px){

  .premiumOffer{
    grid-template-columns:72px 1fr;
  }

  .offerAction{
    grid-column:1 / -1;
  }

  .offerVisual{
    width:68px;
    height:68px;

    font-size:34px;
  }

  .offerMain h3{
    font-size:27px !important;
  }

}



/* =========================================================
   CUSTOMER REFERRAL SHARE BOX
   ========================================================= */

.customerReferralShareBox{
  position:relative;
  z-index:20;

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

  gap:12px;

  margin:
    0
    14px
    13px;

  padding:11px 13px;

  border:1px solid #376f2b;
  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      #07140a,
      #0a1d0d
    );
}


.referralShareInfo{
  min-width:0;
}


.referralShareInfo small{
  display:block;

  margin-bottom:3px;

  color:#7f9484;

  font-size:8px;
  font-weight:900;

  letter-spacing:.6px;
}


.referralShareInfo b{
  display:block;

  color:#75ff38;

  font-size:16px;
  letter-spacing:1px;
}


.referralShareInfo span{
  display:block;

  margin-top:3px;

  color:#8c9c90;

  font-size:9px;
}


.referralShareActions{
  display:flex;
  gap:7px;

  flex-shrink:0;
}


.referralShareActions button{
  padding:8px 10px;

  border:1px solid #59e82a;
  border-radius:7px;

  background:#0d2712;
  color:#79ff43;

  font-size:9px;
  font-weight:950;
}


.referralShareActions button:hover{
  background:#153b1b;
}


@media(max-width:700px){

  .customerReferralShareBox{
    flex-direction:column;
    align-items:stretch;
  }

  .referralShareActions{
    width:100%;
  }

  .referralShareActions button{
    flex:1;
  }

}



/* ===== REFERRAL SHARE FINAL POLISH ===== */

.referralLinkText{
  display:block !important;

  max-width:330px;

  margin-top:5px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#a8b6ab !important;

  font-size:9px !important;
}


#whatsappReferralLink{
  border-color:#36c960 !important;

  background:#0d2b17 !important;

  color:#75ff9b !important;
}


.customerReferralShareBox{
  margin:
    10px
    14px
    2px !important;

  flex-shrink:0;
}


/* =========================================================
   REFERRAL SLIDER COMPACT FIX
   Remove huge blank gap
   ========================================================= */

.rewardTaskSlider{
  min-height:0 !important;
  height:auto !important;
  flex:none !important;
  display:block !important;
}

/* compact referral share row */
.customerReferralShareBox{
  margin:10px 14px 8px !important;
  padding:10px 12px !important;
}

/* DO NOT stretch slide area */
.rewardTaskSlides{
  position:relative !important;
  display:block !important;

  flex:none !important;

  height:205px !important;
  min-height:205px !important;
}

/* every slide occupies exactly this area */
.rewardTaskSlide{
  position:absolute !important;
  inset:0 !important;

  min-height:0 !important;
  height:100% !important;

  padding:16px 48px 26px 34px !important;

  align-items:center !important;
  justify-content:center !important;

  gap:28px !important;
}

.rewardTaskSlide.active{
  display:flex !important;
}

/* reward circle */
.rewardPercent{
  flex:0 0 108px !important;

  width:108px !important;
  height:108px !important;

  margin:0 !important;
}

/* slide text */
.rewardTaskContent{
  flex:1 !important;
  min-width:0 !important;
  max-width:420px !important;
}

.rewardTaskContent h3{
  margin:0 0 8px !important;
}

.rewardTaskContent p{
  margin:0 0 12px !important;
}

/* arrows centered only on actual slide content */
.rewardArrow{
  top:auto !important;
  bottom:86px !important;
}

/* dots stay at bottom */
.rewardDots{
  bottom:8px !important;
}

/* personal link compact */
.referralShareInfo b{
  font-size:15px !important;
}

.referralLinkText{
  max-width:280px !important;
  font-size:8px !important;
}

/* mobile */
@media(max-width:700px){

  .rewardTaskSlides{
    height:270px !important;
    min-height:270px !important;
  }

  .rewardTaskSlide{
    flex-direction:column !important;
    gap:10px !important;

    padding:14px 38px 30px !important;

    text-align:center !important;
  }

  .rewardPercent{
    flex:0 0 78px !important;
    width:78px !important;
    height:78px !important;
  }

}



/* =========================================================
   AGENT LOGOUT BUTTON
   ========================================================= */

.portal aside{
  display:flex;
  flex-direction:column;
}

.agentSidebarSpacer{
  flex:1;
  min-height:30px;
}

.agentLogoutBtn{
  width:100%;

  margin-top:18px;
  padding:12px 14px;

  border:1px solid #6b2c2c;
  border-radius:9px;

  background:#190909;
  color:#ff8d8d;

  font-size:11px;
  font-weight:900;

  text-align:left;
}

.agentLogoutBtn:hover{
  border-color:#ff5d5d;
  background:#281010;
  color:#ffb0b0;
}

.agentLogoutBtn:disabled{
  opacity:.55;
  cursor:wait;
}



/* =========================================================
   WINNING CORNER 777 — FINAL CUSTOMER MOBILE OVERRIDE
   Keep this block at the END of styles.css
   ========================================================= */

@media (max-width:700px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

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

  .topbar{
    height:auto !important;
    min-height:72px !important;
    padding:10px 12px !important;
    gap:8px !important;
    justify-content:space-between !important;
  }

  .topbar nav{
    display:none !important;
  }

  .topbar .brand{
    min-width:0 !important;
    flex:1 !important;
    gap:8px !important;
  }

  .topbar .logo{
    flex:0 0 43px !important;
    width:43px !important;
    height:43px !important;
    border-radius:11px !important;
    font-size:14px !important;
  }

  .topbar .brand b{
    font-size:15px !important;
  }

  .topbar .brand strong{
    font-size:17px !important;
  }

  .topbar .brand small{
    font-size:7px !important;
  }

  .chatTop{
    flex:0 0 auto !important;
    min-width:0 !important;
    padding:9px 11px !important;
    border-radius:9px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  .chatTop small{
    font-size:8px !important;
  }


  /* ---------- HERO ---------- */

  .hero{
    min-height:0 !important;
    display:block !important;
    padding:32px 16px 20px !important;
    overflow:hidden !important;
  }

  .heroCopy{
    width:100% !important;
    text-align:center !important;
  }

  .eyebrow{
    max-width:320px !important;
    margin:0 auto 12px !important;
    font-size:10px !important;
    line-height:1.5 !important;
  }

  .hero h1{
    margin:8px 0 18px !important;
    font-size:42px !important;
    line-height:.92 !important;
  }

  .badges{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:7px 12px !important;
    margin:0 auto 20px !important;
    font-size:10px !important;
  }

  #heroChat{
    width:100% !important;
    max-width:320px !important;
    padding:13px 15px !important;
  }


  /* ---------- HERO PROMO SLIDER ---------- */

  .heroPromo{
    width:100% !important;
    height:350px !important;
    min-height:350px !important;
    margin:26px 0 0 !important;
  }

  .hero777Brand{
    left:50% !important;
    top:14px !important;
    width:125px !important;
    transform:translateX(-50%) !important;
  }

  .hero777Slot{
    width:125px !important;
    min-width:125px !important;
    padding:8px 12px !important;
    font-size:42px !important;
  }

  .hero777Brand small{
    margin-top:6px !important;
    font-size:8px !important;
    letter-spacing:.6px !important;
  }

  .heroSlide{
    padding:90px 38px 42px !important;
    text-align:center !important;
  }

  .heroSlide.active{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
  }

  .heroSlideVisual{
    flex:0 0 68px !important;
    width:68px !important;
    height:68px !important;
    font-size:36px !important;
  }

  .heroSlideCopy{
    width:100% !important;
    min-width:0 !important;
  }

  .heroSlideCopy h2{
    margin:6px 0 !important;
    font-size:20px !important;
    line-height:1.05 !important;
  }

  .heroSlideCopy h2 strong{
    font-size:27px !important;
  }

  .heroSlideCopy p{
    max-width:290px !important;
    margin:8px auto 12px !important;
    font-size:11px !important;
    line-height:1.45 !important;
  }

  .heroPromoTag{
    font-size:9px !important;
  }

  .heroPromoBtn{
    min-height:38px !important;
    padding:9px 14px !important;
    font-size:10px !important;
  }

  .heroSlideArrow{
    width:34px !important;
    height:34px !important;
    font-size:24px !important;
  }

  .heroSlidePrev{
    left:4px !important;
  }

  .heroSlideNext{
    right:4px !important;
  }

  .heroSlideDots{
    left:50% !important;
    bottom:12px !important;
    transform:translateX(-50%) !important;
  }

  .heroSlide::after{
    display:none !important;
  }


  /* ---------- GAMES + OFFERS ---------- */

  .split{
    display:block !important;
    padding:12px 10px 18px !important;
  }

  .panel{
    width:100% !important;
    margin:0 0 14px !important;
    padding:11px !important;
  }

  .sectionHead{
    gap:8px !important;
    align-items:flex-start !important;
  }

  .sectionHead h2{
    margin:4px 0 12px !important;
    font-size:15px !important;
  }

  .sectionHead span{
    padding-top:6px !important;
    font-size:8px !important;
  }

  .gamesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .gameCard{
    min-height:0 !important;
    padding:7px !important;
    border-radius:10px !important;
  }

  .gameArtwork{
    width:100% !important;
    height:130px !important;
    margin-bottom:6px !important;
    border-radius:9px !important;
  }

  .gameArtwork img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:9px !important;
  }

  .gameArtworkFallback{
    font-size:50px !important;
  }

  .gameCard h3{
    margin:6px 0 2px !important;
    font-size:12px !important;
  }

  .gameCard > small{
    font-size:8px !important;
    margin-bottom:4px !important;
  }

  .gameBtn{
    min-height:35px !important;
    padding:7px 5px !important;
    font-size:9px !important;
  }

  .offer{
    gap:10px !important;
    padding:11px !important;
    margin:8px 0 !important;
  }

  .offer h3{
    font-size:28px !important;
  }

  .offer b{
    font-size:11px !important;
  }

  .offer small{
    font-size:8px !important;
  }

  .offerBtn{
    flex:0 0 auto !important;
    padding:8px 9px !important;
    font-size:9px !important;
  }


  /* ---------- TRUST / ABOUT ---------- */

  .trust{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    margin:0 10px 18px !important;
  }

  .trust div{
    padding:14px 8px !important;
  }

  .trust b{
    font-size:10px !important;
  }

  .trust small{
    display:block !important;
    margin-top:5px !important;
    font-size:9px !important;
    line-height:1.4 !important;
  }

  .info{
    padding:28px 18px !important;
  }

  .info h2{
    font-size:22px !important;
  }

  .info p{
    max-width:330px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }

  #infoChat{
    width:100% !important;
    max-width:300px !important;
  }


  /* ---------- FOOTER ---------- */

  footer{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 14px !important;
    padding:28px 18px !important;
    font-size:10px !important;
  }

  footer p{
    line-height:1.5 !important;
  }


  /* ---------- CUSTOMER CHAT ---------- */

  #chat{
    position:fixed !important;
    left:6px !important;
    right:6px !important;
    top:6px !important;
    bottom:6px !important;

    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;

    border-radius:16px !important;
    z-index:99999 !important;
  }

  #chat .chatHead{
    min-height:67px !important;
    padding:12px 15px !important;
  }

  #chat .chatHead b{
    font-size:14px !important;
  }

  #chat .chatHead small{
    font-size:9px !important;
  }

  #closeChat{
    width:38px !important;
    height:38px !important;
    font-size:25px !important;
  }

  .chatStart{
    padding:32px 18px !important;
  }

  .chatStart h3{
    font-size:20px !important;
  }

  .chatStart p{
    font-size:12px !important;
  }

  #chatBody{
    padding:13px 10px !important;
  }

  #chatBody .bubble{
    max-width:86% !important;
    font-size:13px !important;
  }

  #customerComposerTools{
    padding:8px 10px 4px !important;
  }

  #customerComposerTools button{
    width:38px !important;
    height:38px !important;
  }

  #chatForm{
    gap:6px !important;
    padding:7px 9px 10px !important;
  }

  #chatForm input{
    height:44px !important;
    font-size:14px !important;
  }

  #chatForm button{
    flex-basis:44px !important;
    width:44px !important;
    height:44px !important;
  }

}


/* Very small phones */
@media (max-width:420px){

  .hero h1{
    font-size:37px !important;
  }

  .heroPromo{
    height:330px !important;
    min-height:330px !important;
  }

  .heroSlide{
    padding:84px 32px 36px !important;
  }

  .heroSlideVisual{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
    font-size:31px !important;
  }

  .heroSlideCopy h2{
    font-size:18px !important;
  }

  .heroSlideCopy h2 strong{
    font-size:24px !important;
  }

  .gameArtwork{
    height:115px !important;
  }

  .offer{
    align-items:center !important;
  }

  .offer h3{
    font-size:24px !important;
  }

  .trust{
    grid-template-columns:1fr 1fr !important;
  }

  footer{
    grid-template-columns:1fr 1fr !important;
  }

}


/* =========================================================
   WC777 — SINGLE FINAL MOBILE CUSTOMER CHAT
   ========================================================= */

@media (max-width:700px){

  #chat{
    position:fixed !important;

    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:max(8px, env(safe-area-inset-bottom)) !important;

    width:auto !important;
    max-width:none !important;

    height:min(560px, calc(100dvh - 24px)) !important;
    max-height:calc(100dvh - 24px) !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
    box-sizing:border-box !important;

    border-radius:18px !important;
    z-index:99999 !important;
  }

  #chat.hidden{
    display:none !important;
  }

  #chat > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  #chat .chatHead{
    flex:0 0 68px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:12px 15px !important;
  }

  #closeChat{
    flex:0 0 38px !important;

    width:38px !important;
    height:38px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;
  }

  .chatStart{
    flex:1 1 auto !important;
    overflow-y:auto !important;
  }

  #chatBody{
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:14px 12px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch;
  }

  #chatBody .bubble{
    width:auto !important;
    max-width:82% !important;
    min-width:0 !important;

    overflow-wrap:anywhere !important;
    word-break:break-word !important;

    box-sizing:border-box !important;
  }

  #chatBody .bubble.customer{
    margin-left:auto !important;
    margin-right:0 !important;
  }

  #chatBody .bubble.agent{
    margin-left:0 !important;
    margin-right:auto !important;
  }

  #customerMediaPreview{
    flex:0 0 auto !important;

    width:auto !important;
    max-width:calc(100% - 20px) !important;

    margin:8px 10px 0 !important;

    overflow:hidden !important;
  }

  #customerComposerTools{
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:8px 10px 6px !important;
    margin:0 !important;

    box-sizing:border-box !important;
  }

  #customerComposerTools.hidden{
    display:none !important;
  }

  #customerComposerTools button{
    flex:0 0 40px !important;

    width:40px !important;
    height:40px !important;

    margin:0 7px 0 0 !important;
    padding:0 !important;
  }

  #chatForm{
    flex:0 0 auto !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) 46px !important;
    align-items:center !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:8px !important;

    margin:0 !important;
    padding:
      8px
      10px
      calc(10px + env(safe-area-inset-bottom))
      10px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #chatForm.hidden{
    display:none !important;
  }

  #chatForm input{
    grid-column:1 !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:46px !important;

    margin:0 !important;
    padding:0 14px !important;

    box-sizing:border-box !important;
  }

  #chatForm button{
    grid-column:2 !important;

    position:static !important;
    transform:none !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    box-sizing:border-box !important;
  }

}


@media (max-width:420px){

  #chat{
    left:6px !important;
    right:6px !important;

    height:min(520px, calc(100dvh - 18px)) !important;
  }

  #chatForm{
    grid-template-columns:minmax(0,1fr) 44px !important;

    gap:7px !important;

    padding-left:8px !important;
    padding-right:8px !important;
  }

  #chatForm button{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }

}

/* =========================================================
   IOS INPUT AUTO-ZOOM FIX
   ========================================================= */

@media (max-width:700px){

  #chatForm input,
  #customerName{
    font-size:16px !important;
  }

}



/* ===== Agent Login Form ===== */

#agentLoginForm{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#agentLoginForm #agentUser,
#agentLoginForm #agentPassword{
  width:100%;
  margin:0;
}

.agentRememberLogin{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  margin:2px 0 4px;
  text-align:left;
  cursor:pointer;
  color:#f5f7f5;
  font-size:14px;
}

.agentRememberLogin #agentSavePassword{
  width:auto;
  min-width:16px;
  height:16px;
  padding:0;
  margin:0;
  flex:0 0 auto;
  accent-color:#63ed25;
}

#agentLoginForm #login{
  width:100%;
  margin:0;
}

.metaPixelNoscript{
  display:none;
}