::selection {
background: #049669;
color: #000;
}
a:hover{
text-decoration:none !important;
}
.btn-default{
background-image: -webkit-linear-gradient(
-30deg
, #c165dd 0%, #5c27fe 100%);
background-image: -ms-linear-gradient(-30deg, #c165dd 0%, #5c27fe 100%);
box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
color: #ffffff;
}
table .btn {
color:#fff !important;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #212121 !important;
}
.form-control,.custom-select,.modal-title ,.input_text {
color: #212121 !important;
}
.modal label{
color: #212121 !important;
}
.table-dark{
font-size:14px;
background: #111827;
}
.table-dark td, .table-dark th, .table-dark thead th {
border-color: #2a3441;
}
.feather{
width: 14px;
height: 14px;
}
.dataTables_filter {
display: flex;
justify-content: flex-end;
}
.form-control:focus {
color: #fff !important;
}
.modal .form-control:focus{
color: #212121 !important;
}
.card-header {
color: #fff;
}
.card-body {
padding:1rem;
color: #c4cbf9;
}
/*.body-bg {*/
/* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 5)), url('https://i.imgur.com/KtgcFwm.jpg'); */
/* background-repeat: no-repeat;*/
/* background-attachment: fixed;*/
/* background-size: 100% 100%;*/
/*}*/
.height-adjust {
min-height: 77vh;
}
/*.bg-defaultStyle {*/
/* background: #d0d0d0; */
/* background: -webkit-linear-gradient(*/
/* to right,*/
/* #0b0b0b,*/
/* #2d2d2d*/
/* ); */
/* background: linear-gradient(*/
/* to right,*/
/* #0b0b0b,*/
/* #2d2d2d*/
/* );*/
/* color: #fff;*/
/*}*/
.bg-primary {
background-color: #3490dc !important;
}
.action_btn{
tab-size: 4;
border-radius:5px;
padding: 5px 12px;
font-size:1rem;
box-sizing: border-box;
border-style: solid;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
font-family: inherit;
margin: 0;
text-transform: none;
background-image: none;
cursor: pointer;
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
/*border-radius: 0 0.25rem 0.25rem 0;*/
border-width: 1px;
display: inline-flex;
align-items: center;
font-weight: 500;
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-text-opacity: 1;
margin-left: 3px;
}
.message{
padding: 5px 3px;
margin-right:10px
}
.chat_actions{
display:flex;
}
.chat_actions input{
flex:1;
}
.message p{
margin: 0;
}
.mt-4 {
display:block;
margin-bottom: 10px;
}
.message:nth-child(odd) {
background-color: #1f2937;
border-radius: 5px;
margin:1px;
}
.message:nth-child(even) {
border-radius: 5px;
margin:1px;
}
.cards{
margin-top: 9px;
border-radius:5px;
}
.chatf{
background:#00000;
border-radius:3px;
}
/*.flex{*/
/* display:flex; */
/* align-items:center;*/
/*}*/
.flex-start{
display:flex;
align-items: self-start;
}
.flex-end{
display: flex;
justify-content: flex-end;
}
.i-btn{
cursor:pointer;
}
.chat_avatar{
border-radius:50px;
border: 1px solid gray;
box-shadow:0 0 3px 0 #e8f3ff;
}
.admin {
color:red;
}
.chat_actions{
margin-top:10px;
}
.input_text{
border-radius:5px;
padding: 5px;
color: #fff !important;
outline:0;
}
.emoji {
width: 20px;
height: 20px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #191c25;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #191c25;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;
border-radius:100px;
}
* {
margin: 0;
padding: 0;
}
body {
background: #00000;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
position: relative;
z-index: 2;
border-radius:5px;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 100px;
height: 100px;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 5px;
}
.profile-usertitle-name {
color: #fff;
font-size: 16px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li a {
color: ;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 20px;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
}
.col-md-2{
width: 250px;
border-radius:5px;
margin-left:20px;
}
.profilemenu .dropdown-menu {
left:200px !important;
}
.earncolor{
background:grey;
}
.earncolor1{
background:red;
}
.stats-card {
padding: 1rem;
border-radius: 4px;
display:flex;
flex-direction:column;
}
.stats-card p{
margin:0px;
}
.stats-card b{
font-size: 20px;
color: #fff;
}
.framshow{
height:px;
}
.totalusers{
border-radius:5px;
}
.usericon{
padding-left:0px;
/*font-size:30px;*/
}
.usericon img{
max-width:unset;
}
.totalpts{
border-radius:5px;
margin:70px;
}
.dollaricon{
padding-left:30px;
font-size:30px;
}
.totaloffers{
border-radius:5px;
margin:70px;
}
.offericon{
padding-left:-0px;
font-size:30px;
}
.offerstxt{
padding-left:5px;
}
.earnedicon{
padding-left:30px;
font-size:30px;
}
.leaderboard-reward{
background: #030102;
padding: 5px;
border-radius: 4px;
margin-right: 20px;
}
.progress-bar {
color: #212121 !important;
}
.card {
/*padding: 30px;*/
background-color: #111827;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: .25rem !important;
-webkit-border-radius: .25rem !important;
-moz-border-radius: .25rem !important;
-ms-border-radius: .25rem !important;
-o-border-radius: .25rem !important;
}
.user-recent-card {
font-size:15px;
color: #fff;
margin-right: 18px;
background: #3C098D;
border-radius: 4px;
display: flex;
align-items: center;
margin: 5px;
}
.user-recent-card .points{
background: #212121;
padding: 0 13px;
border-radius: 4px 0 0 4px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.user-recent-card .user{
padding: 5px;
display: flex;
align-items: center;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
.rewardReq,.rewardSuccess {
background: #2f0a6d;
text-align: center;
margin-top: 6px;
}
.rewardSuccess{
background: #007bff;
}
.stats-card{
display: flex;
justify-content: center;
align-items: center;
}
.faq-title {
font-size: 2em;
margin: 0.4em 0;
}
div.seperator {
width: 7.5em;
background-color: white;
height: 0.07em;
margin-left: -1.8em;
}
/* ─── Withdraw Grid ─── */
.withdraw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
margin-top: 16px;
}
.withdraw-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 28px 16px 20px;
background: linear-gradient(145deg, #111827, #1a2332);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
cursor: pointer;
transition: all 0.25s ease;
text-align: center;
color: #e2e8f0;
outline: none;
font-family: inherit;
min-height: 160px;
box-sizing: border-box;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.withdraw-card:hover, .withdraw-card:focus-visible {
border-color: var(--processor-accent, #10b981);
background: linear-gradient(145deg, #1a2332, #1e293b);
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--processor-accent, #10b981);
}
.withdraw-card__icon {
font-size: 2rem;
color: var(--processor-accent, #10b981);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.06);
}
.withdraw-card__label {
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
}
.withdraw-card__min {
font-size: 0.75rem;
color: #64748b;
}
.withdraw-balance-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #1a2332;
border: 1px solid #2a3441;
border-radius: 999px;
font-size: 0.85rem;
color: #fbbf24;
white-space: nowrap;
}
.withdraw-balance-pill i { color: #fbbf24; }
.withdraw-history-link {
margin-top: 16px;
text-align: right;
}
.gift-card-search {
min-width: 220px;
}
.gift-card-search .input-group {
display: flex;
gap: 0;
}
.gift-card-search .field-input--compact {
padding: 6px 12px;
font-size: 0.85rem;
}
/* ─── Withdraw Modal ─── */
.withdraw-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
animation: withdrawModalFadeIn 0.25s ease;
}
.withdraw-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(4px);
}
.withdraw-modal__dialog {
position: relative;
width: 100%;
max-width: 460px;
margin: 16px;
background: #111827;
border: 1px solid #2a3441;
border-radius: 16px;
overflow: hidden;
animation: withdrawModalSlideUp 0.3s ease;
}
.withdraw-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid #1e293b;
}
.withdraw-modal__header h3 {
font-size: 1.1rem;
font-weight: 600;
color: #f1f5f9;
margin: 0;
}
.withdraw-modal__close {
background: none;
border: none;
color: #64748b;
font-size: 1.1rem;
cursor: pointer;
padding: 4px;
transition: color 0.15s;
}
.withdraw-modal__close:hover { color: #e2e8f0; }
.withdraw-modal__body {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.withdraw-modal__balance {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #1a2332;
border-radius: 10px;
font-size: 0.9rem;
color: #94a3b8;
}
.withdraw-modal__balance strong {
color: #fbbf24;
display: flex;
align-items: center;
gap: 6px;
}
.withdraw-modal__field label {
display: block;
font-size: 0.85rem;
color: #94a3b8;
margin-bottom: 6px;
font-weight: 500;
}
.withdraw-modal__field .field-input {
width: 100%;
background: #1a2332;
border: 1px solid #2a3441;
border-radius: 8px;
padding: 10px 14px;
color: #e2e8f0;
font-size: 0.95rem;
}
.withdraw-modal__field .field-input:focus {
border-color: #10b981;
outline: none;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.withdraw-modal__conversion {
margin-top: 4px;
font-size: 0.8rem;
color: #10b981;
min-height: 1.2em;
}
.withdraw-modal__note {
font-size: 0.8rem;
color: #64748b;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.5;
}
.withdraw-modal__footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid #1e293b;
}
@keyframes withdrawModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes withdrawModalSlideUp {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ─── Chatbox Animations ─── */
.chatbox-sidebar {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
@media (max-width: 1179px) {
.chatbox-sidebar {
transform: translateX(100%);
opacity: 0;
}
.chatbox-sidebar.is-open {
transform: translateX(0);
opacity: 1;
}
}
@media (min-width: 1180px) {
body.live-rail-collapsed .chatbox-sidebar {
transform: translateX(100%);
opacity: 0;
pointer-events: none;
}
.chatbox-sidebar {
transform: translateX(0);
opacity: 1;
}
}
#chatbox_launcher {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
#chatbox_launcher:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
#chatbox_launcher:active {
transform: scale(0.95);
}
/* Chat panel slide-in */
.live-panel {
animation: chatSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chatSlideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── GIF/Emoji Picker ─── */
.chat-picker-bar {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #111827;
border-top: 1px solid #1e293b;
}
.chat-picker-btn {
background: none;
border: none;
color: #64748b;
font-size: 1.15rem;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.chat-picker-btn:hover, .chat-picker-btn.is-active {
background: #1e293b;
color: #10b981;
}
.chat-picker-btn i { pointer-events: none; }
.chat-picker-panel {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 280px;
background: #111827;
border-top: 1px solid #2a3441;
display: none;
flex-direction: column;
z-index: 10;
animation: pickerSlideUp 0.25s ease;
}
.chat-picker-panel.is-open {
display: flex;
}
@keyframes pickerSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-picker-search {
padding: 8px;
border-bottom: 1px solid #1e293b;
}
.chat-picker-search input {
width: 100%;
background: #1a2332;
border: 1px solid #2a3441;
border-radius: 8px;
padding: 7px 12px;
color: #e2e8f0;
font-size: 0.85rem;
outline: none;
}
.chat-picker-search input:focus {
border-color: #10b981;
}
.chat-picker-results {
flex: 1;
overflow-y: auto;
padding: 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 6px;
align-content: start;
}
.chat-picker-results.emoji-grid {
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 2px;
}
.chat-picker-results img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 6px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
background: #1a2332;
}
.chat-picker-results img:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.emoji-item {
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s;
}
.emoji-item:hover {
background: #1e293b;
}
.chat-picker-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
color: #64748b;
grid-column: 1 / -1;
}
.chat-media-attachment {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
background: #1a2332;
border-radius: 6px;
font-size: 0.8rem;
color: #94a3b8;
}
.chat-media-attachment img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
}
.chat-media-attachment__remove {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
font-size: 0.85rem;
padding: 2px 4px;
}
@media (max-width: 640px) {
.withdraw-grid {
grid-template-columns: repeat(2, 1fr);
}
.section-heading {
flex-direction: column;
gap: 12px;
}
}
.faq-list > div {
border-bottom: 0.07em solid #ededed;
padding: 1em 0em;
}
.faq-list > div:last-child {
border: initial;
}
summary {
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color:white;
}
summary:hover {
color: white;
transition: all 0.3s ease;
}
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-left: -10px}
100% {opacity: 1; margin-left: 55px}
}
details[open] summary {
color: white;
}
details[open] p {
border-left: 2px solid #7c26cb;
margin-left: 55px;
padding-left: 25px;
opacity: 100;
transition: all 3s ease;
color:#e5e5e5;
}
details[open] summary:after {
content: "-";
font-size: 3.2em;
margin: -0.5em 0.14em 0 0;
font-weight: 200;
}
.faq-body {
width: 350px;
margin: 4em auto;
box-shadow: 0px 0px 16px #8A2BE2;
border-radius: 0.2em;
padding: 5em;
background-color: #fff;
}
.faq-list {
/*width: 350px;*/
margin: 1em auto;
padding: 2em 0;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
background: transparent;
border-radius: 0.3em;
content: "+";
color: #7c26cb;
float: left;
font-size: 1.8em;
font-weight: bold;
margin: -0.3em 0.25em 0 0;
padding: 0;
text-align: center;
width: 25px;
}
@media screen and (max-width: 350px) and (min-width: 500px), (min-width: 1100px){
.faq-title {
font-size: 2em;
margin: 0.4em 0;
}
div.seperator {
width: em;
background-color: white;
height: 0.07em;
margin-left: -1.8em;
}
.faq-list > div {
border-bottom: 0.07em solid #ededed;
padding: 1em 0em;
}
.faq-list > div:last-child {
border: initial;
}
summary {
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color:white;
}
summary:hover {
color: white;
transition: all 0.3s ease;
}
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-left: -10px}
100% {opacity: 1; margin-left: 55px}
}
details[open] summary {
color: white;
}
details[open] p {
border-left: 2px solid #7c26cb;
margin-left: 55px;
padding-left: 25px;
opacity: 100;
transition: all 3s ease;
color:white;
}
details[open] summary:after {
content: "-";
font-size: 3.2em;
margin: -0.5em 0.14em 0 0;
font-weight: 200;
}
.faq-body {
width: 750px;
margin: 4em auto;
box-shadow: 0px 0px 17px #8A2BE2;
border-radius: 0.2em;
padding: 5em;
}
.faq-list {
width: 700px;
margin: 1em auto;
padding: 2em 0;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
background: transparent;
border-radius: 0.3em;
content: "+";
color: #7c26cb;
float: left;
font-size: 1.8em;
font-weight: bold;
margin: -0.3em 0.25em 0 0;
padding: 0;
text-align: center;
width: 25px;
}
}
@media (max-width: 767px) {
.faq-list {
width:unset;
}
.col-md-7 {
margin-top:10px;
}
.recent-claims .col-2{
max-width:100%;
}
.recent-claims{
text-align: center;
}
.col-md-2{
width: 100%;
padding-left:unset;
margin-top: 10px;
margin-left: 2px;
}
.col-4{
flex: inherit;
max-width: 100%;
}
.news-box {
height:unset !important;
}
.el-1,.el-2,.el-3,.el-4,.el-5,.el-6,.el-7,.el-8,.el-9,.el-10,.el-11,.el-12{
visibility:hidden;
}
.homepage-stats {
justify-content:center;
}
.offerwall-card {
width: 133px;
height: unset !important;
}
}
.offerwall-items{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.offerwall-card .walllogo{
margin-bottom: 1rem;
}
.offerwall-card{
max-width: 200px;
height: 180px;
color: #212121;
}
.offerwall-card .count{
color: #318fff;
}
.offerwall-card .info{
margin-top: 10px;
}
.offerwall-card p {
color: #212121;
text-align: left;
line-height: 11px;
}
/* theme updates*/
.chatbox_transform {
transform: unset !important;
}
.dataTables_info, .pagination,.dtable_filter,.dataTables_length {
font-size: 14px;
}
#dtable_processing
{
border: 0px;
text-align: center;
font-size: 14px;
}
#chatbox_sidebar {
transform: translate(300px);
}
#chatbox_launcher {
top: 9.1rem !important;
right: 0.65rem !important;
bottom: auto !important;
border-color: rgba(46, 215, 168, 0.38) !important;
background: linear-gradient(135deg, rgba(46, 215, 168, 0.92), rgba(30, 174, 133, 0.92)) !important;
color: #08110f !important;
box-shadow: 0 0 0 1px rgba(111, 255, 210, 0.08), 0 0 20px rgba(46, 215, 168, 0.32), 0 18px 30px rgba(0, 0, 0, 0.28) !important;
}
@media screen and (max-width: 600px) {
#chatbox_sidebar {
transform: translate(600px);
top:17vh !important;
width:unset !important;
}
}
.bg-defaultStyl::before{
content: '';
width: 100%;
position: relative;
top: -20px;
left: -16px;
height: 27px;
background: url("data:image/svg+xml,%3Csvg width='139' height='27' viewBox='0 0 139 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M139 7.75849C138.939 5.45307 134.992 3.37819 130.635 2.7309C129.808 2.60676 128.048 2.56243 124.571 2.47376C121.443 2.39396 117.906 2.30529 114.534 2.29642C107.11 2.28755 104.313 2.72203 97.8046 2.89937C87.253 3.19199 78.9233 2.50923 75.4293 2.20775C66.0628 1.40085 67.178 0.771295 59.5366 0.212675C53.969 -0.195207 47.2512 0.0176008 34.0334 0.469817C27.2808 0.700359 22.628 0.930901 17.3043 1.33878C3.95583 2.36735 1.74269 3.36046 0.784241 4.11415C-0.548859 5.16932 -0.03479 6.25997 0.993362 8.45011C2.37874 11.394 4.39148 11.8284 5.80299 14.4353C7.54561 17.6629 6.09053 20.0304 6.84857 20.0659C7.61533 20.1102 9.41891 17.6984 12.2855 13.8235C13.5315 12.1476 14.5858 10.6491 16.2587 10.6137C17.5395 10.5871 17.8968 11.4472 20.8592 12.0856C21.9396 12.3161 23.6561 12.6885 25.4597 12.5201C28.1521 12.2629 28.2566 11.0659 30.4785 10.9595C32.4128 10.8619 34.3906 11.6777 35.2881 12.3427C36.9697 13.593 35.8022 14.9851 36.3337 15.0294C36.7258 15.0649 37.3792 14.3112 39.2613 12.6885C40.5508 11.5802 41.1172 11.1811 42.1889 11.0393C42.9034 10.9417 43.8618 10.9595 45.3256 11.2964C49.8477 12.3339 51.904 14.7279 52.2264 15.1092C54.2914 17.592 53.0541 18.3989 54.3175 21.6974C54.5353 22.2738 56.3389 26.991 58.4998 26.9821C60.5648 26.9821 64.0849 22.6816 64.355 18.3989C64.477 16.5368 63.9803 14.6747 66.8644 13.7171C67.727 13.4334 69.3214 13.2117 72.5104 12.7595C75.804 12.2984 76.7886 12.3161 77.5292 12.5023C78.9668 12.857 78.566 13.6284 79.4112 13.7171C81.0667 13.8856 82.3737 10.8885 87.7758 9.81563C88.1504 9.74469 91.566 9.08854 94.6766 9.63829C96.698 10.0018 97.1424 10.6137 99.6953 12.0678C102.492 13.6639 105.202 15.2068 106.805 15.0117C109.288 14.7191 106.936 10.5161 110.778 9.80676C111.737 9.62942 113.227 9.80676 116.215 10.1526C120.389 10.6403 120.607 11.0393 122.698 11.0215C125.843 10.9949 126.732 10.0816 128.762 10.3299C131.219 10.658 131.028 12.1476 132.727 12.2629C134.948 12.4225 139.061 10.1437 139 7.75849Z' fill='%23F8FCFF'/%3E%3Cpath d='M5.82095 14.4354C7.56357 17.663 6.10847 20.0305 6.86652 20.0748C7.63327 20.1191 9.43689 17.6985 12.3035 13.8324C13.5495 12.1566 14.6037 10.6581 16.2767 10.6226C17.5575 10.596 17.9147 11.4561 20.8772 12.0945C21.9576 12.3251 23.6741 12.6975 25.4777 12.529C28.17 12.2719 28.2746 11.0748 30.4964 10.9684C32.4307 10.8709 34.4086 11.6866 35.3061 12.3517C36.9877 13.6019 35.8201 14.994 36.3516 15.0384C36.7437 15.0738 37.3972 14.3201 39.2792 12.6975C40.5688 11.5891 41.1351 11.1901 42.2068 11.0482C42.9213 10.9507 43.8797 10.9684 45.3435 11.3053C49.8656 12.3428 51.9219 14.7369 52.2443 15.1182C54.3093 17.6009 53.0721 18.4078 54.3355 21.7063C54.5533 22.2827 56.3569 26.9999 58.5177 26.9911C60.5827 26.9911 64.1028 22.6906 64.3729 18.4078C64.4949 16.5457 63.9983 14.6837 66.8823 13.726C67.7449 13.4423 69.3394 13.2118 72.5284 12.7684C75.8219 12.3073 76.8065 12.3251 77.5471 12.5113C78.9848 12.8659 78.584 13.6374 79.4292 13.726C81.0847 13.8945 82.3916 10.8975 87.7937 9.82456C88.1684 9.75362 91.5839 9.09747 94.6945 9.65609C96.7159 10.0196 97.1603 10.6315 99.7133 12.0856C102.51 13.6817 105.22 15.2246 106.823 15.0295C109.306 14.7369 106.954 10.5339 110.796 9.82456C111.755 9.64722 113.245 9.82456 116.233 10.1704C120.407 10.6581 120.625 11.0571 122.716 11.0393C125.861 11.0127 126.759 10.0994 128.78 10.3477C131.246 10.6492 131.046 12.1388 132.753 12.2541C134.975 12.4137 139.088 10.1349 139.027 7.74968C139.001 6.65904 138.094 5.6216 136.692 4.76151C136.003 5.01865 135.228 6.88958 134.47 6.83638C132.762 6.72111 131.237 6.30436 128.771 6.01175C126.75 5.76348 125.853 6.67678 122.707 6.70338C120.616 6.72111 120.398 6.3221 116.225 5.83441C113.227 5.49747 111.729 5.32013 110.779 5.49747C106.936 6.19796 107.904 6.57037 106.597 7.25313C105.56 7.79402 102.493 7.57234 99.6958 5.97628C97.1429 4.5221 96.6985 5.68367 94.6771 5.32013C91.5665 4.76151 88.151 6.30436 87.7763 6.3753C82.3742 7.4482 82.9754 8.11323 81.5552 8.50338C80.7187 8.73392 78.9674 8.52998 77.5384 8.1753C76.7978 7.98909 75.8132 7.98022 72.5197 8.43244C69.3307 8.87579 69.8796 9.09747 69.017 9.39008C66.133 10.3477 64.6343 10.7822 64.5124 12.6443C64.2422 16.927 60.2342 16.528 58.1692 16.528C56.0084 16.528 54.5533 14.3911 54.3268 13.8147C53.0633 10.5162 54.3006 11.4827 52.2356 8.99993C51.9132 8.61865 49.8569 8.88466 45.3348 7.84722C43.871 7.51027 42.9126 7.49254 42.1981 7.59008C41.1264 7.73195 40.2028 8.06889 39.2705 9.23934C38.3731 10.3654 37.9635 10.1881 36.552 10.1349C36.0118 10.1083 36.979 9.52308 35.2973 8.27284C34.3999 7.60781 32.422 6.79205 30.4877 6.88958C28.2659 6.99599 28.1613 8.19303 25.469 8.45018C23.6654 8.61865 21.9489 8.24623 20.8685 8.01569C17.906 7.37727 17.5488 6.51717 16.268 6.54377C14.595 6.57037 13.5059 6.82751 12.2948 8.51224C11.5803 9.51421 10.9094 10.3388 10.343 10.995C9.48917 11.9881 6.51799 11.5448 4.5314 10.8797C3.63396 10.5783 2.68423 10.2236 1.7955 9.80683C3.09375 11.6157 4.66211 12.2896 5.82095 14.4354Z' fill='%23E1EFFA'/%3E%3Cpath d='M5.82095 14.4354C7.56358 17.663 6.10849 20.0305 6.86653 20.0748C7.63329 20.1192 9.43689 17.6985 12.3035 13.8325C13.5495 12.1566 14.6038 10.6581 16.2767 10.6226C17.5575 10.596 17.9147 11.4561 20.8772 12.0945C21.9576 12.3251 23.6741 12.6975 25.4777 12.529C28.17 12.2719 28.2746 11.0748 30.4964 10.9684C32.4307 10.8709 34.4086 11.6867 35.3061 12.3517C36.9877 13.6019 35.8201 14.9941 36.3516 15.0384C36.7437 15.0739 37.3972 14.3202 39.2792 12.6975C40.5688 11.5891 41.1351 11.1901 42.2068 11.0482C42.9213 10.9507 43.8797 10.9684 45.3436 11.3054C49.8656 12.3428 51.9219 14.7369 52.2443 15.1182C54.3093 17.6009 53.0721 18.4078 54.3355 21.7064C54.5533 22.2827 56.3569 27 58.5178 26.9911C60.5828 26.9911 64.1028 22.6906 64.373 18.4078C64.4949 16.5458 63.9983 14.6837 66.8823 13.7261C67.7449 13.4423 69.3394 13.2118 72.5284 12.7684C75.822 12.3074 76.8065 12.3251 77.5471 12.5113C78.9848 12.866 78.584 13.6374 79.4292 13.7261C81.0847 13.8945 82.3916 10.8975 87.7937 9.82459C88.1684 9.75365 91.5839 9.0975 94.6945 9.65612C96.716 10.0197 97.1603 10.6315 99.7133 12.0857C102.51 13.6817 105.22 15.2246 106.823 15.0295C109.306 14.7369 106.954 10.534 110.796 9.82459C111.755 9.64725 113.245 9.82459 116.233 10.1704C120.407 10.6581 120.625 11.0571 122.716 11.0394C125.861 11.0128 126.759 10.0995 128.78 10.3477C131.246 10.6492 131.046 12.1389 132.753 12.2541C134.975 12.4138 139.088 10.1349 139.027 7.74971C139.009 7.19996 138.774 6.65907 138.356 6.15365C137.084 7.78518 134.383 9.01769 132.727 8.90242C131.028 8.78715 131.22 7.2975 128.754 6.99602C126.733 6.74774 125.835 7.66104 122.69 7.68764C120.599 7.70538 120.381 7.30636 116.207 6.81868C113.227 6.47287 111.729 6.29553 110.779 6.47287C106.936 7.17336 109.289 11.3852 106.806 11.6778C105.203 11.864 102.493 10.3211 99.6958 8.73395C97.1429 7.2709 96.6985 6.65907 94.6771 6.29553C91.5665 5.73691 88.151 6.39306 87.7763 6.464C82.3742 7.53691 81.0672 10.534 79.4117 10.3655C78.5666 10.2768 78.9674 9.50538 77.5297 9.1507C76.7891 8.96449 75.8045 8.95562 72.511 9.40784C69.322 9.85119 67.7275 10.0729 66.8649 10.3655C63.9809 11.3231 64.4688 13.1852 64.3555 15.0473C64.0854 19.33 60.5653 23.6305 58.5003 23.6305C56.3395 23.6305 54.5359 18.9221 54.318 18.3458C53.0546 15.0473 54.2919 14.2404 52.2269 11.7576C51.9045 11.3763 49.8482 8.98223 45.3261 7.94479C43.8623 7.60784 42.9039 7.59011 42.1894 7.68764C41.1177 7.82952 40.5514 8.22853 39.2618 9.33691C37.3798 10.9596 36.7263 11.7133 36.3342 11.6778C35.8027 11.6335 36.9703 10.2413 35.2886 8.99109C34.3912 8.32607 32.4133 7.5103 30.479 7.60784C28.2572 7.71425 28.1526 8.91129 25.4603 9.16843C23.6567 9.33691 21.9402 8.96449 20.8598 8.73395C17.8973 8.09553 17.5401 7.23543 16.2592 7.26203C14.5863 7.28863 13.532 8.78715 12.2861 10.4719C9.41946 14.3468 7.61586 16.7586 6.84911 16.7142C6.09106 16.6699 7.47644 13.8857 3.29416 11.0748C2.93692 10.8354 2.59712 10.6315 2.27473 10.4453C3.46843 11.8019 4.80153 12.5556 5.82095 14.4354Z' fill='%23B4D5E8'/%3E%3C/svg%3E%0A") no-repeat;
}
/* Final chat overrides to defeat legacy slide-off rules */
#chatbox_sidebar {
transform: none !important;
left: auto !important;
top: auto !important;
bottom: 7.5rem !important;
right: 1rem !important;
width: min(360px, calc(100vw - 24px)) !important;
height: min(650px, calc(100vh - 130px)) !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 130px) !important;
}
#chatbox_sidebar .widget-frame,
#chatbox_sidebar .widget-scroll,
#chatbox_sidebar .chat_actions,
#chatbox_sidebar .message,
#chatbox_sidebar .message section,
#chatbox_sidebar .flex-start,
#chatbox_sidebar .input_text {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
#chatbox_sidebar .chat_actions {
gap: 0.6rem !important;
margin-top: auto !important;
padding-bottom: 0 !important;
flex: 0 0 auto !important;
}
#chatbox_sidebar .chat_actions .input_text {
flex: 1 1 auto !important;
min-width: 0 !important;
}
#chatbox_sidebar .chat_actions .action_btn {
flex: 0 0 auto !important;
}
#chatbox_sidebar .widget-frame {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
#chatbox_sidebar .widget-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
padding-bottom: 0.5rem !important;
}
@media screen and (max-width: 767px) {
#chatbox_sidebar {
top: auto !important;
bottom: 0.5rem !important;
right: 0.5rem !important;
width: calc(100vw - 16px) !important;
height: min(74vh, calc(100vh - 96px)) !important;
max-width: calc(100vw - 16px) !important;
max-height: calc(100vh - 96px) !important;
}
#chatbox_launcher {
top: auto !important;
bottom: 0.5rem !important;
}
}
/* ─── Coming Soon Overlay ─── */
.coming-soon-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(9, 15, 26, 0.7);
backdrop-filter: blur(2px);
border-radius: inherit;
z-index: 10;
}
.coming-soon-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: linear-gradient(135deg, #1e293b, #0f172a);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 999px;
color: #10b981;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 0 30px rgba(16, 185, 129, 0.15), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.coming-soon-badge i {
font-size: 1.25rem;
animation: coming-soon-spin 3s linear infinite;
}
@keyframes coming-soon-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ── Bonus Code ── */
.bonus-code-form {
max-width: 32rem;
}
.bonus-code-row {
display: flex;
gap: 0.75rem;
align-items: stretch;
}
.bonus-code-row .field-input {
flex: 1;
min-width: 0;
}
.bonus-code-row .page-action {
flex-shrink: 0;
white-space: nowrap;
}
/* ─── Rewards Hero Section ─── */
.support-hero {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 78, 59, 0.12), transparent);
border: 1px solid rgba(16, 185, 129, 0.1);
border-radius: 16px;
padding: 2rem 2.5rem;
}
/* ── FAQ Bot ── */
.faq-bot {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.faq-bot__messages {
flex: 1;
overflow-y: auto;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
min-height: 120px;
max-height: calc(100vh - 380px);
}
.faq-bot__msg {
display: flex;
gap: 0.5rem;
max-width: 88%;
animation: faqFadeIn 0.25s ease;
}
@keyframes faqFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-bot__msg--bot {
align-self: flex-start;
}
.faq-bot__msg--user {
align-self: flex-end;
flex-direction: row-reverse;
}
.faq-bot__avatar {
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
background: rgba(52, 240, 181, 0.15);
color: #34f0b5;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
margin-top: 0.15rem;
}
.faq-bot__bubble {
padding: 0.6rem 0.85rem;
border-radius: 1rem;
font-size: 0.85rem;
line-height: 1.55;
white-space: pre-line;
word-break: break-word;
}
.faq-bot__msg--bot .faq-bot__bubble {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(96, 114, 146, 0.15);
color: #d8def0;
border-top-left-radius: 0.3rem;
}
.faq-bot__msg--user .faq-bot__bubble {
background: rgba(52, 240, 181, 0.12);
border: 1px solid rgba(52, 240, 181, 0.22);
color: #e8fff6;
border-top-right-radius: 0.3rem;
}
.faq-bot__quick-topics {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
}
.faq-bot__topic-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(96, 114, 146, 0.18);
color: #b8c4da;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.faq-bot__topic-btn:hover {
background: rgba(52, 240, 181, 0.1);
border-color: rgba(52, 240, 181, 0.3);
color: #e8fff6;
}
.faq-bot__composer {
display: flex;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
}
.faq-bot__composer .input_text {
flex: 1;
}
.faq-bot__actions {
display: flex;
gap: 0.5rem;
padding: 0.5rem 0.75rem 0.75rem;
}
.typing-dots {
display: inline-flex;
gap: 0.25rem;
align-items: center;
}
.typing-dots span {
width: 0.4rem;
height: 0.4rem;
border-radius: 999px;
background: #6fdab8;
animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* ── Online Users Panel ── */
.chat-online-panel {
border-bottom: 1px solid rgba(96, 114, 146, 0.15);
background: rgba(10, 15, 24, 0.6);
max-height: 220px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-online-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
font-size: 0.78rem;
color: #b8c4da;
border-bottom: 1px solid rgba(96, 114, 146, 0.1);
}
.chat-online-panel__header strong {
color: #34f0b5;
}
.chat-online-panel__close {
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #8896b2;
background: rgba(255, 255, 255, 0.04);
border: none;
cursor: pointer;
font-size: 0.7rem;
}
.chat-online-panel__list {
flex: 1;
overflow-y: auto;
padding: 0.4rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.chat-online-panel__empty,
.chat-online-panel__loading {
padding: 0.75rem;
text-align: center;
color: #7f8da8;
font-size: 0.8rem;
}
.chat-online-user {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.45rem;
border-radius: 0.6rem;
transition: background 0.15s;
}
.chat-online-user:hover {
background: rgba(255, 255, 255, 0.03);
}
.chat-online-user__avatar {
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
object-fit: cover;
flex-shrink: 0;
}
.chat-online-user__info {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
min-width: 0;
}
.chat-online-user__name {
font-size: 0.8rem;
font-weight: 600;
color: #d8def0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-online-admin {
display: inline-flex;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.chat-online-mod {
display: inline-flex;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.chat_tool_btn--info {
background: rgba(59, 130, 246, 0.12);
color: #93c5fd;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.chat_tool_btn--info.is-active {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.4);
}
/* ── Onboarding: Welcome modal ── */
.onboarding-welcome-modal { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.onboarding-welcome-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); }
.onboarding-welcome-modal__card { position: relative; width: min(440px, 100%); background: var(--surface-1, #1e293b); color: var(--text-primary, #f8fafc); border-radius: 1rem; padding: 2rem 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); text-align: center; }
.onboarding-welcome-modal__close { position: absolute; top: 0.5rem; right: 0.75rem; background: transparent; border: 0; color: inherit; font-size: 1.5rem; cursor: pointer; opacity: 0.7; }
.onboarding-welcome-modal__close:hover { opacity: 1; }
.onboarding-welcome-modal__icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.onboarding-welcome-modal__title { font-size: 1.5rem; margin: 0 0 0.75rem; }
.onboarding-welcome-modal__body { margin: 0 0 1.25rem; line-height: 1.5; }
.onboarding-welcome-modal__cta { background: #22c55e; color: white; border: 0; padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform .1s ease; }
.onboarding-welcome-modal__cta:hover { transform: translateY(-1px); }
.onboarding-welcome-modal__fine { margin: 1rem 0 0; font-size: 0.8rem; opacity: 0.6; }
[data-theme="light"] .onboarding-welcome-modal__card { background: #ffffff; color: #0f172a; }
/* ── Onboarding: Quest widget ── */
.onboarding-quest { background: var(--surface-1, #1e293b); color: var(--text-primary, #f8fafc); border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.onboarding-quest__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.onboarding-quest__title { margin: 0; font-size: 1.25rem; }
.onboarding-quest__subtitle { margin: 0.25rem 0 0; opacity: 0.7; font-size: 0.875rem; }
.onboarding-quest__dismiss { background: transparent; border: 0; color: inherit; font-size: 1.5rem; cursor: pointer; opacity: 0.5; line-height: 1; }
.onboarding-quest__dismiss:hover { opacity: 1; }
.onboarding-quest__progress { height: 6px; background: rgba(148,163,184,0.2); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.onboarding-quest__progress-fill { height: 100%; background: linear-gradient(90deg,#22c55e,#16a34a); transition: width .4s ease; }
.onboarding-quest__phase { margin-bottom: 1rem; }
.onboarding-quest__phase-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin: 0 0 0.5rem; }
.onboarding-quest__steps { display: grid; gap: 0.5rem; }
.onboarding-quest__step { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: rgba(148,163,184,0.05); border-radius: 0.5rem; transition: background .15s ease; }
.onboarding-quest__step.is-complete { opacity: 0.55; }
.onboarding-quest__step-icon { width: 2rem; min-width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; color: #94a3b8; }
.onboarding-quest__step-icon svg { width: 1.25rem; height: 1.25rem; }
.onboarding-quest__step-icon i[data-feather] svg, .onboarding-quest__step-icon svg[data-feather] { stroke: currentColor; fill: none; }
.onboarding-quest__step-icon--discord { color: #5865F2; }
.onboarding-quest__step-icon--instagram { color: #E1306C; }
.onboarding-quest__step-icon--tiktok { color: #ffffff; background: #000; border-radius: 0.4rem; }
.onboarding-quest__step-icon--tiktok svg { width: 1rem; height: 1rem; }
[data-theme="light"] .onboarding-quest__step-icon { color: #475569; }
[data-theme="light"] .onboarding-quest__step-icon--discord { color: #5865F2; }
[data-theme="light"] .onboarding-quest__step-icon--instagram { color: #E1306C; }
.onboarding-quest__step-body { flex: 1; min-width: 0; }
.onboarding-quest__step-title { margin: 0; font-size: 1rem; }
.onboarding-quest__step-desc { margin: 0.25rem 0 0; font-size: 0.8rem; opacity: 0.7; }
.onboarding-quest__step-cta { background: #22c55e; color: white; border: 0; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.onboarding-quest__step-cta:hover { filter: brightness(1.1); }
.onboarding-quest__step-done { color: #22c55e; font-weight: 600; font-size: 0.875rem; }
[data-theme="light"] .onboarding-quest { background: #ffffff; color: #0f172a; }
[data-theme="light"] .onboarding-quest__step { background: rgba(15,23,42,0.04); }
/* ── Onboarding: Celebration ── */
.onboarding-celebration { position: relative; background: linear-gradient(135deg,#22c55e 0%,#3b82f6 100%); color: #fff; border-radius: 1rem; padding: 1.5rem 1.5rem 1.25rem; margin-bottom: 1.5rem; text-align: center; box-shadow: 0 8px 32px rgba(34,197,94,0.3); }
.onboarding-celebration__close { position: absolute; top: 0.5rem; right: 0.75rem; background: transparent; border: 0; color: inherit; font-size: 1.25rem; cursor: pointer; opacity: 0.75; }
.onboarding-celebration__icon { font-size: 2.5rem; margin-bottom: 0.25rem; }
.onboarding-celebration__title { margin: 0 0 0.5rem; font-size: 1.4rem; }
.onboarding-celebration__body { margin: 0; font-size: 1rem; }
/* ── Daily Bonus page header ───────────────────────────── */
.daily-bonus-header {
display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
flex-wrap: wrap;
padding: 1rem 1.2rem;
border-radius: 0.95rem;
background:
radial-gradient(circle at top left, rgba(52, 240, 181, 0.12), transparent 38%),
radial-gradient(circle at top right, rgba(99, 102, 241, 0.10), transparent 36%),
linear-gradient(180deg, var(--bg-card, rgba(20, 28, 42, 0.95)), var(--bg-card-end, rgba(13, 19, 30, 0.96)));
border: 1px solid var(--border-subtle, rgba(96,114,146,0.18));
}
.daily-bonus-header__title { min-width: 0; flex: 1 1 min(100%, 28rem); }
.daily-bonus-header__kicker {
display: inline-flex; align-items: center; gap: 0.4rem;
margin: 0 0 0.3rem;
color: var(--accent, #34e2bf);
font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
}
.daily-bonus-header h1 {
margin: 0; line-height: 1.15;
color: var(--text-primary, #f7fbff);
font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; letter-spacing: -0.02em;
}
.daily-bonus-header__sub {
margin: 0.4rem 0 0; color: var(--text-muted, #95a4bf);
font-size: 0.88rem; line-height: 1.5;
}
.daily-bonus-header__cta { display: flex; gap: 0.5rem; }
/* ── Skin Shop ─────────────────────────────────────────── */
/* Compact page header — matches the slim info strip below it for vertical rhythm */
.skin-page-header {
display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
flex-wrap: wrap;
padding: 1rem 1.2rem;
border-radius: 0.95rem;
background:
radial-gradient(circle at top left, rgba(217, 70, 239, 0.10), transparent 38%),
radial-gradient(circle at top right, rgba(52, 240, 181, 0.08), transparent 36%),
linear-gradient(180deg, var(--bg-card, rgba(20, 28, 42, 0.95)), var(--bg-card-end, rgba(13, 19, 30, 0.96)));
border: 1px solid var(--border-subtle, rgba(96,114,146,0.18));
}
.skin-page-header__title { min-width: 0; flex: 1 1 min(100%, 28rem); }
.skin-page-header__kicker {
display: inline-flex; align-items: center; gap: 0.4rem;
margin: 0 0 0.3rem;
color: #d946ef;
font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
}
.skin-page-header h1 {
margin: 0; line-height: 1.15;
color: var(--text-primary, #f7fbff);
font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; letter-spacing: -0.02em;
}
.skin-page-header__sub {
margin: 0.4rem 0 0; color: var(--text-muted, #95a4bf);
font-size: 0.88rem; line-height: 1.5;
}
.skin-page-header__balance {
display: grid; gap: 0.05rem; justify-items: end;
padding: 0.6rem 1rem; min-width: 9.5rem;
border-radius: 0.75rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-subtle, rgba(96,114,146,0.18));
}
.skin-page-header__balance small { color: var(--text-muted, #95a4bf); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.skin-page-header__balance strong { color: #ffd56d; font-size: 1.2rem; font-weight: 800; display: inline-flex; align-items: center; gap: 0.35rem; }
.skin-page-header__balance span { color: var(--text-muted, #95a4bf); font-size: 0.78rem; }
/* Compact "trade URL required" banner */
.skin-trade-warning--compact {
display: flex; align-items: center; gap: 0.85rem;
padding: 0.6rem 0.95rem; border-radius: 0.75rem;
background: rgba(244, 162, 97, 0.08);
border: 1px solid rgba(244, 162, 97, 0.32);
}
.skin-trade-warning--compact .skin-trade-warning__icon {
width: auto; height: auto; padding: 0; background: transparent;
color: #f4a261; font-size: 1.05rem; flex-shrink: 0;
}
.skin-trade-warning--compact .skin-trade-warning__text { flex: 1; min-width: 0; line-height: 1.4; }
.skin-trade-warning--compact .skin-trade-warning__text strong { display: block; color: var(--text-primary, #f7fbff); font-size: 0.92rem; }
.skin-trade-warning--compact .skin-trade-warning__text span { color: var(--text-muted, #95a4bf); font-size: 0.83rem; }
/* Slim info strip */
.skin-shop-info {
display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center;
padding: 0.5rem 0.95rem; border-radius: 0.75rem;
background: var(--bg-surface, rgba(255,255,255,0.03));
border: 1px solid var(--border-subtle, rgba(96,114,146,0.14));
}
.skin-shop-info__cell { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-body, #dbe7fb); font-size: 0.82rem; }
.skin-shop-info__cell i { color: var(--accent, #34e2bf); }
.skin-shop-info__cell a { color: #8fc0ff; }
/* Compact filter bar */
.skin-filters {
padding: 0.7rem 0.95rem; border-radius: 0.85rem;
background: var(--bg-surface, rgba(255,255,255,0.03));
border: 1px solid var(--border-subtle, rgba(96,114,146,0.14));
}
.skin-filters__form { display: grid; gap: 0.55rem; }
.skin-filters__search-wrap { position: relative; }
.skin-filters__search-icon {
position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
color: var(--text-muted, #95a4bf); pointer-events: none; z-index: 2;
}
.skin-filters__search { padding-left: 2.1rem !important; min-height: 2.55rem; }
.skin-filters__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 0.4rem;
}
.field-input--sm { min-height: 2.1rem !important; padding: 0.3rem 0.55rem !important; font-size: 0.82rem !important; }
.page-action--sm { min-height: 2.1rem; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
/* Custom dropdown arrow + dark option list for native selects */
.skin-filters select.field-input--sm,
.skin-filters select.field-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.55rem center;
background-size: 10px 6px;
padding-right: 1.7rem !important;
cursor: pointer;
}
/* Force dark backgrounds inside the open dropdown (works on most browsers) */
.skin-filters select option,
.skin-filters select optgroup {
background-color: #0f1623;
color: #f1f5fb;
}
/* Autocomplete dropdown */
.skin-suggest {
position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; z-index: 50;
max-height: 22rem; overflow-y: auto;
background: linear-gradient(180deg, rgba(20, 28, 42, 0.99), rgba(13, 19, 30, 0.99));
border: 1px solid var(--border-subtle, rgba(96,114,146,0.28));
border-radius: 0.7rem;
box-shadow: 0 18px 40px rgba(0,0,0,0.45);
padding: 0.3rem;
}
.skin-suggest__item {
width: 100%; display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center; gap: 0.7rem;
padding: 0.45rem 0.6rem;
background: transparent; border: 0; border-radius: 0.55rem;
color: var(--text-body, #dbe7fb); text-align: left; cursor: pointer;
transition: background 100ms ease;
}
.skin-suggest__item + .skin-suggest__item { margin-top: 0.15rem; }
.skin-suggest__item:hover,
.skin-suggest__item.is-active { background: rgba(255,255,255,0.05); }
.skin-suggest__thumb {
width: 56px; height: 38px; display: grid; place-items: center;
background: rgba(255,255,255,0.04); border-radius: 0.4rem; overflow: hidden;
}
.skin-suggest__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skin-suggest__placeholder { color: rgba(255,255,255,0.2); font-size: 1rem; }
.skin-suggest__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.skin-suggest__name {
color: var(--text-primary, #f7fbff); font-weight: 600; font-size: 0.88rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skin-suggest__rarity { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.skin-suggest__points {
color: #ffd56d; font-weight: 800; font-size: 0.85rem;
display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.skin-suggest__points--na { color: var(--text-muted, #95a4bf); font-weight: 600; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 0.85rem; align-items: stretch; }
.skin-card { position: relative; padding: 0.7rem; border-radius: 0.85rem; border: 1px solid var(--border-subtle, rgba(96,114,146,0.18)); background: linear-gradient(180deg, var(--bg-card, rgba(24,33,48,0.96)), var(--bg-card-end, rgba(15,21,33,0.98))); display: flex; flex-direction: column; gap: 0.55rem; overflow: hidden; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; height: 100%; }
.skin-card:hover {
transform: translateY(-3px);
border-color: var(--rarity-color, var(--accent-border, rgba(52,240,181,0.4)));
/* Rarity-colored glow halo + standard depth shadow */
box-shadow:
0 0 0 1px var(--rarity-color, transparent),
0 18px 38px -10px rgba(0,0,0,0.55),
0 0 36px -6px var(--rarity-color, transparent);
}
.skin-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rarity-color, transparent); }
.skin-card__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%); border-radius: 0.55rem; flex-shrink: 0; }
.skin-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Body fills remaining vertical space so Buy button can sit pinned to bottom */
.skin-card__body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-height: 0; }
.skin-card__name { margin: 0; font-size: 0.88rem; font-weight: 700; line-height: 1.25; color: var(--text-primary, #f7fbff); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.3em; }
.skin-card__meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--text-muted, #95a4bf); flex-wrap: wrap; }
.skin-card__rarity { color: var(--rarity-color, var(--text-body, #dbe7fb)); font-weight: 700; }
.skin-card__wear { font-size: 0.68rem; color: var(--text-faint, #8fb2ff); text-transform: uppercase; letter-spacing: 0.06em; }
.skin-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--border-subtle, rgba(96,114,146,0.18)); margin-top: auto; }
.skin-card__points { font-weight: 800; color: #ffd56d; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.92rem; }
.skin-card__usd { font-size: 0.74rem; color: var(--text-muted, #95a4bf); }
.skin-card__usd s { color: rgba(255,255,255,0.4); margin-right: 0.3rem; }
.skin-card__unavailable { font-size: 0.74rem; color: rgba(244,162,97,0.9); }
.skin-card__buy { width: 100%; min-height: 2.25rem; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.skin-card__badge { position: absolute; top: 0.45rem; padding: 0.18rem 0.45rem; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; z-index: 2; }
.skin-card__badge--sale { right: 0.45rem; background: linear-gradient(135deg, #f43f5e, #ef4444); color: #fff; }
.skin-card__badge--stattrak { left: 0.45rem; background: rgba(207, 109, 49, 0.9); color: #fff; }
.skin-card__badge--souvenir { left: 0.45rem; top: 1.95rem; background: rgba(255, 215, 0, 0.85); color: #1f1300; }
/* Pagination — fix Laravel's from rendering vertically */
.skin-pagination { display: flex; justify-content: center; padding: 0.6rem 0; }
.skin-pagination nav { width: 100%; display: flex; justify-content: center; }
.skin-pagination nav > div:last-child > span,
.skin-pagination nav > div:last-child > a { display: none !important; } /* hide Laravel's "Showing X to Y of Z" mobile text duplication */
.skin-pagination .pagination,
.skin-pagination ul {
display: flex !important; flex-direction: row !important; flex-wrap: wrap;
list-style: none; padding: 0; margin: 0; gap: 0.3rem; align-items: center;
}
.skin-pagination .pagination li,
.skin-pagination ul li { list-style: none; }
.skin-pagination .page-item .page-link,
.skin-pagination ul li a,
.skin-pagination ul li span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.1rem; min-height: 2.1rem; padding: 0.35rem 0.65rem;
border-radius: 0.55rem;
border: 1px solid var(--border-subtle, rgba(110, 126, 156, 0.2));
background: var(--bg-card, rgba(18, 24, 37, 0.95));
color: var(--text-body, #dbe4f7) !important;
font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.skin-pagination .page-item.active .page-link,
.skin-pagination ul li[aria-current="page"] span,
.skin-pagination ul li.active span,
.skin-pagination ul li.active a {
background: linear-gradient(135deg, #2ed7a8, #1eae85);
color: #07131b !important; border-color: transparent;
}
.skin-pagination .page-item.disabled .page-link,
.skin-pagination ul li.disabled span { opacity: 0.4; cursor: not-allowed; }
/* Confirm Purchase modal — gaming-style, rarity-accented */
.skin-confirm-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.skin-confirm-modal__backdrop {
position: absolute; inset: 0;
background: rgba(4, 8, 18, 0.78);
backdrop-filter: blur(6px);
}
.skin-confirm-modal__dialog {
position: relative; z-index: 1;
width: 100%; max-width: 520px;
background: linear-gradient(180deg, rgba(20, 28, 42, 0.98), rgba(13, 19, 30, 0.98));
border: 1px solid var(--rarity-color, var(--border-subtle, rgba(96,114,146,0.3)));
border-radius: 1.1rem;
box-shadow:
0 0 0 1px var(--rarity-color, transparent),
0 30px 70px rgba(0,0,0,0.6),
0 0 60px -10px var(--rarity-color, transparent);
padding: 1.1rem 1.2rem 1.15rem;
overflow: hidden;
}
.skin-confirm-modal__dialog::before {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--rarity-color, transparent), transparent);
opacity: 0.85;
}
.skin-confirm-modal__close {
position: absolute; top: 0.65rem; right: 0.75rem;
width: 2rem; height: 2rem; border-radius: 0.55rem;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
color: var(--text-muted, #95a4bf);
cursor: pointer; transition: 140ms ease;
}
.skin-confirm-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.skin-confirm-modal__hero {
display: grid; grid-template-columns: 130px 1fr; gap: 1rem; align-items: center;
margin-bottom: 1rem;
}
.skin-confirm-modal__media {
width: 130px; height: 90px;
display: grid; place-items: center;
background:
radial-gradient(ellipse at center, var(--rarity-color, rgba(255,255,255,0.05)) -50%, transparent 70%),
rgba(255,255,255,0.03);
border-radius: 0.7rem;
border: 1px solid var(--border-subtle, rgba(96,114,146,0.18));
}
.skin-confirm-modal__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.skin-confirm-modal__heading { min-width: 0; }
.skin-confirm-modal__eyebrow {
display: inline-flex; align-items: center; gap: 0.35rem;
color: var(--accent, #34e2bf);
font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
margin-bottom: 0.35rem;
}
.skin-confirm-modal__heading h2 {
margin: 0; line-height: 1.2;
color: var(--text-primary, #f7fbff);
font-size: 1.15rem; font-weight: 800;
}
.skin-confirm-modal__rarity-row {
display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem;
}
.skin-confirm-modal__rarity-pill {
display: inline-flex; align-items: center;
padding: 0.18rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
border: 1px solid currentColor;
background: rgba(255,255,255,0.03);
}
.skin-confirm-modal__wear {
display: inline-flex; align-items: center;
padding: 0.18rem 0.6rem;
border-radius: 999px;
background: rgba(255,255,255,0.05);
color: var(--text-muted, #95a4bf);
font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.skin-confirm-modal__price-board {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-subtle, rgba(96,114,146,0.16));
margin-bottom: 0.85rem;
}
.skin-confirm-modal__price-cell { display: grid; gap: 0.15rem; min-width: 0; }
.skin-confirm-modal__price-cell:last-child { justify-items: end; text-align: right; }
.skin-confirm-modal__price-cell small { color: var(--text-muted, #95a4bf); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.skin-confirm-modal__price-cell strong {
color: #ffd56d; font-size: 1.25rem; font-weight: 800;
display: inline-flex; align-items: center; gap: 0.3rem;
}
.skin-confirm-modal__price-cell:last-child strong { color: var(--text-primary, #f7fbff); }
.skin-confirm-modal__price-cell span { color: var(--text-muted, #95a4bf); font-size: 0.78rem; }
.skin-confirm-modal__price-cell em { font-style: normal; color: var(--accent, #34e2bf); font-weight: 700; }
.skin-confirm-modal__price-divider {
width: 1px; height: 2.2rem; margin: 0 0.85rem;
background: var(--border-subtle, rgba(96,114,146,0.22));
}
.skin-confirm-modal__trade {
padding: 0.65rem 0.85rem;
border-radius: 0.65rem;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border-subtle, rgba(96,114,146,0.14));
margin-bottom: 0.85rem;
}
.skin-confirm-modal__trade-label {
display: flex; align-items: center; gap: 0.45rem;
color: var(--text-muted, #95a4bf);
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
margin-bottom: 0.3rem;
}
.skin-confirm-modal__trade-label i.fa-steam { color: #66c0f4; }
.skin-confirm-modal__trade code {
display: block; word-break: break-all;
color: var(--text-body, #dbe7fb);
font-size: 0.78rem; line-height: 1.4;
background: transparent; padding: 0;
}
.skin-confirm-modal__copy-btn {
margin-left: auto; padding: 0.15rem 0.45rem; border-radius: 0.4rem;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
color: var(--text-body, #dbe7fb);
cursor: pointer; font-size: 0.72rem; transition: 140ms ease;
}
.skin-confirm-modal__copy-btn:hover { background: var(--accent, #34e2bf); color: #07131b; }
.skin-confirm-modal__note {
display: flex; align-items: flex-start; gap: 0.5rem;
margin: 0 0 1rem;
padding: 0.55rem 0.75rem;
border-radius: 0.6rem;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.22);
color: var(--text-body, #dbe7fb);
font-size: 0.82rem; line-height: 1.45;
}
.skin-confirm-modal__note i { color: #a5b4fc; margin-top: 0.15rem; }
.skin-confirm-modal__actions {
display: flex; justify-content: flex-end; gap: 0.55rem;
}
.skin-confirm-modal__actions .page-action { min-height: 2.5rem; }
.skin-confirm-modal__confirm {
box-shadow: 0 0 24px -6px var(--accent, #34e2bf);
}
@media (max-width: 540px) {
.skin-confirm-modal__hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.skin-confirm-modal__media { width: 100%; max-width: 220px; height: 130px; }
.skin-confirm-modal__price-board { grid-template-columns: 1fr; gap: 0.6rem; }
.skin-confirm-modal__price-divider { width: auto; height: 1px; margin: 0; }
.skin-confirm-modal__price-cell:last-child { justify-items: start; text-align: left; }
}
.skin-orders { display: grid; gap: 0.85rem; }
.skin-order-card { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; }
.skin-order-card__img { width: 110px; height: auto; max-height: 100px; object-fit: contain; background: rgba(255,255,255,0.03); border-radius: 0.65rem; }
.skin-order-card__body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.skin-order-card__meta { display: flex; flex-wrap: wrap; gap: 0.85rem; font-size: 0.85rem; color: var(--text-muted, #95a4bf); margin-bottom: 0.45rem; align-items: center; }
.skin-order-card__status { padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.skin-order-card__status--pending { background: rgba(96,114,146,0.18); color: #b8c6e2; }
.skin-order-card__status--processing { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.skin-order-card__status--sent { background: rgba(52, 240, 181, 0.18); color: #7cf7d2; }
.skin-order-card__status--completed { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.skin-order-card__status--cancelled { background: rgba(244,162,97,0.18); color: #f4a261; }
.skin-order-card__status--refunded { background: rgba(244, 63, 94, 0.18); color: #fda4af; }
.skin-order-card__note, .skin-order-card__hint { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-body, #dbe7fb); }
@media (max-width: 720px) {
.skin-order-card { grid-template-columns: 1fr; }
.skin-order-card__img { width: 100%; max-height: 140px; }
.skin-modal__preview { grid-template-columns: 1fr; }
.skin-modal__preview img { width: 100%; max-height: 140px; }
.skin-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* Withdraw entry card variant for skin shop */
.withdraw-card--skins .withdraw-card__icon { color: #d946ef; }
/* === Daily Engagement Card (used on /daily-bonus, also on /home historically) === */
.engagement-card {
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 1.4rem;
border: 1px solid rgba(96, 114, 146, 0.22);
position: relative;
background:
radial-gradient(circle at top left, rgba(48, 240, 178, 0.12), transparent 30%),
radial-gradient(circle at right center, rgba(110, 86, 248, 0.12), transparent 28%),
linear-gradient(180deg, rgba(23, 31, 46, 0.96) 0%, rgba(16, 22, 33, 0.98) 100%);
box-shadow: 0 28px 70px rgba(3, 8, 18, 0.34);
}
.engagement-card__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.engagement-card__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #3ce4b4; margin-bottom: 0.55rem; }
.engagement-card__title { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; color: #f6f8ff; font-weight: 800; letter-spacing: -0.04em; }
.engagement-card__copy { margin: 0.55rem 0 0; max-width: 31rem; color: #96a4bf; line-height: 1.55; }
.engagement-card__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 0.85rem; }
.engagement-card__section { padding: 0.9rem; border-radius: 1.1rem; border: 1px solid rgba(96, 114, 146, 0.18); background: linear-gradient(180deg, rgba(14, 19, 30, 0.9) 0%, rgba(10, 14, 23, 0.96) 100%); }
.engagement-card__section + .engagement-card__section { margin-top: 0.85rem; }
.engagement-card__section-title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.engagement-card__section-title h3 { margin: 0; color: #f6f8ff; font-size: 1.05rem; font-weight: 700; }
.engagement-card__section-title p { margin: 0.2rem 0 0; color: #95a4bf; font-size: 0.88rem; }
.engagement-card__pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(52, 240, 181, 0.12); color: #7deac7; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.engagement-bonus { display: grid; gap: 1rem; }
.engagement-bonus__top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.engagement-bonus__amount { color: #f6f8ff; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 800; line-height: 1; margin: 0.25rem 0 0; }
.engagement-bonus__meta { display: grid; gap: 0.45rem; color: #95a4bf; font-size: 0.9rem; }
.engagement-claim-btn,
.engagement-link-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
min-height: 2.9rem; padding: 0.75rem 1rem; border-radius: 999px;
font-weight: 800; border: 0; cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
[data-engagement-form] { display: inline-flex; margin: 0; }
.engagement-claim-btn { background: linear-gradient(135deg, #34f0b5 0%, #24d0a0 100%); color: #091119; box-shadow: 0 18px 34px rgba(36, 208, 160, 0.25); }
.engagement-link-btn { background: rgba(255, 255, 255, 0.04); color: #f6f8ff; border: 1px solid rgba(120, 137, 165, 0.2); }
.engagement-claim-btn[disabled],
.engagement-link-btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.engagement-claim-btn:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 22px 40px rgba(36, 208, 160, 0.32); }
.engagement-link-btn:not([disabled]):hover { background: rgba(255,255,255,0.08); }
.engagement-streak { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.5rem; }
.engagement-streak__dot { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid rgba(104, 122, 154, 0.22); background: rgba(16, 22, 35, 0.96); color: #8f9db8; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; }
.engagement-streak__dot.is-filled { background: rgba(52, 240, 181, 0.16); color: #7deac7; border-color: rgba(52, 240, 181, 0.28); }
.engagement-streak__dot.is-frozen { background: rgba(110, 86, 248, 0.16); color: #d7d1ff; border-color: rgba(110, 86, 248, 0.28); }
.streak-freeze-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(110, 86, 248, 0.15); color: #c4b5fd; border: 1px solid rgba(110, 86, 248, 0.3); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.78rem; font-weight: 600; cursor: help; }
.engagement-mission-list,
.engagement-achievement-list { display: grid; gap: 0.65rem; }
.engagement-mission,
.engagement-achievement { padding: 0.8rem; border-radius: 0.85rem; border: 1px solid rgba(97, 114, 145, 0.16); background: rgba(17, 24, 37, 0.82); }
.engagement-missions-panel { border-radius: 1rem; border: 1px solid rgba(88, 112, 148, 0.2); background: radial-gradient(circle at top left, rgba(54, 224, 176, 0.08), transparent 34%), radial-gradient(circle at right center, rgba(105, 82, 255, 0.06), transparent 28%), linear-gradient(180deg, rgba(17, 24, 37, 0.95) 0%, rgba(12, 18, 28, 0.98) 100%); box-shadow: 0 14px 30px rgba(4, 10, 20, 0.2); overflow: hidden; }
.engagement-missions-panel.is-open { border-color: rgba(52, 240, 181, 0.24); box-shadow: 0 18px 36px rgba(4, 10, 20, 0.26), 0 0 0 1px rgba(52, 240, 181, 0.06); }
.engagement-missions-panel__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; width: 100%; padding: 0.9rem 1rem; cursor: pointer; user-select: none; border: 0; text-align: left; background: transparent; color: inherit; }
.engagement-missions-panel__summary-main { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.engagement-missions-panel__icon { width: 2.35rem; height: 2.35rem; border-radius: 0.9rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(52, 240, 181, 0.18), rgba(52, 240, 181, 0.08)); border: 1px solid rgba(52, 240, 181, 0.16); color: #7deac7; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.engagement-missions-panel__copy { min-width: 0; }
.engagement-missions-panel__title { margin: 0; color: #f6f8ff; font-size: 1.02rem; font-weight: 800; }
.engagement-missions-panel__text { margin: 0.1rem 0 0; color: #97a7c2; font-size: 0.83rem; line-height: 1.4; max-width: 18rem; }
.engagement-missions-panel__meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: end; }
.engagement-missions-panel__count,
.engagement-missions-panel__resets { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.36rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.engagement-missions-panel__count { background: rgba(52, 240, 181, 0.14); color: #7deac7; }
.engagement-missions-panel__resets { background: rgba(255, 255, 255, 0.05); color: #dbe5f8; }
.engagement-missions-panel__caret { width: 2.1rem; height: 2.1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(115, 132, 165, 0.18); background: rgba(255, 255, 255, 0.04); color: #dfe7f8; transition: transform 160ms ease; }
.engagement-missions-panel.is-open .engagement-missions-panel__caret { border-color: rgba(52, 240, 181, 0.22); background: rgba(52, 240, 181, 0.1); color: #7deac7; transform: rotate(180deg); }
.engagement-missions-panel__body { padding: 0 1rem 1rem; }
.engagement-missions-panel__body[hidden] { display: none !important; }
.engagement-missions-panel__subbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.1rem 0 0.8rem; }
.engagement-mission__row,
.engagement-achievement__row { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.engagement-mission__title,
.engagement-achievement__title { color: #f6f8ff; font-weight: 700; margin: 0; }
.engagement-mission__desc,
.engagement-achievement__desc { color: #95a4bf; margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.55; }
.engagement-reward-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.35rem 0.65rem; border-radius: 999px; background: rgba(255, 201, 40, 0.12); color: #ffd56d; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.engagement-progress { width: 100%; height: 0.55rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.06); margin-top: 0.7rem; }
.engagement-progress__bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #34f0b5 0%, #6d56f8 100%); }
.engagement-progress__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.55rem; color: #8f9db8; font-size: 0.82rem; flex-wrap: wrap; }
.engagement-card__skeleton { display: grid; gap: 0.75rem; }
.engagement-card__skeleton span { display: block; height: 0.95rem; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: engagementPulse 1.6s linear infinite; }
.engagement-empty-copy { color: #8f9db9; line-height: 1.65; margin: 0; }
@keyframes engagementPulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width: 900px) {
.engagement-card__grid { grid-template-columns: 1fr; }
.engagement-card__header { flex-direction: column; align-items: stretch; }
}
/* === New Earn / Offerwalls page === */
.earn-header {
padding: 0.4rem 0.2rem 0;
margin-bottom: 0.3rem;
}
.earn-header__title {
display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}
.earn-header h1 {
margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--text-primary, #f7fbff); letter-spacing: -0.02em;
}
.earn-header__on { color: var(--text-muted, #95a4bf); font-weight: 500; font-size: 0.95rem; }
.earn-header__platforms { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.earn-platform-pill {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.45rem 0.95rem 0.45rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.18));
color: var(--text-body, #dbe7fb);
font-size: 0.86rem; font-weight: 600;
transition: 140ms ease;
}
.earn-platform-pill:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(96, 114, 146, 0.32); }
.earn-platform-pill.is-active {
background: rgba(52, 240, 181, 0.1);
border-color: rgba(52, 240, 181, 0.45);
color: #f6f8ff;
}
.earn-platform-pill.is-active .earn-platform-pill__check { color: #34e2bf; }
.earn-platform-pill__check { font-size: 0.9rem; color: var(--text-muted, #95a4bf); }
.earn-platform-pill--clear { color: var(--text-muted, #95a4bf); border-style: dashed; }
.earn-section {
padding: 1rem 1.1rem 1.15rem;
border-radius: 1rem;
background: linear-gradient(180deg, var(--bg-card, rgba(20, 28, 42, 0.95)), var(--bg-card-end, rgba(13, 19, 30, 0.96)));
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.18));
overflow: hidden;
}
.earn-section__head {
display: flex; justify-content: space-between; align-items: center; gap: 0.85rem;
margin-bottom: 0.75rem; flex-wrap: wrap;
}
.earn-section__title {
margin: 0; display: inline-flex; align-items: center; gap: 0.55rem;
color: var(--text-primary, #f7fbff); font-size: 1.05rem; font-weight: 800;
}
.earn-section__title i { color: var(--accent, #34e2bf); }
.earn-section__title--alt i { color: #8b5cf6; }
.earn-section__hint { color: var(--text-muted, #95a4bf); font-size: 0.85rem; cursor: help; }
.earn-section__head-right { display: flex; align-items: center; gap: 0.4rem; }
.earn-section__view-all { color: var(--text-muted, #95a4bf); font-size: 0.85rem; font-weight: 600; }
.earn-section__view-all:hover { color: var(--text-primary, #f7fbff); }
.earn-section__nav-btn {
width: 2rem; height: 2rem; border-radius: 0.45rem;
display: grid; place-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.18));
color: var(--text-body, #dbe7fb);
cursor: pointer; transition: 140ms ease;
}
.earn-section__nav-btn:hover { background: rgba(255, 255, 255, 0.08); }
.earn-section__empty {
padding: 1.5rem 1rem; text-align: center;
color: var(--text-muted, #95a4bf); font-size: 0.88rem;
border: 1px dashed var(--border-subtle, rgba(96, 114, 146, 0.22));
border-radius: 0.75rem;
}
.earn-section__empty i { display: block; font-size: 1.4rem; margin-bottom: 0.45rem; opacity: 0.6; }
/* Horizontal scroll row */
.earn-row {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 200px);
gap: 0.7rem;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: thin;
padding-bottom: 0.4rem;
margin: 0 -0.2rem; padding-left: 0.2rem; padding-right: 0.2rem;
}
.earn-row::-webkit-scrollbar { height: 6px; }
.earn-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.earn-card {
scroll-snap-align: start;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgba(24, 32, 47, 0.85), rgba(15, 21, 33, 0.92));
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.18));
border-radius: 0.85rem;
overflow: hidden;
text-decoration: none;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.earn-card:hover {
transform: translateY(-3px);
border-color: rgba(52, 240, 181, 0.4);
box-shadow: 0 16px 32px -10px rgba(52, 240, 181, 0.25), 0 0 0 1px rgba(52, 240, 181, 0.18);
}
.earn-card__media {
position: relative;
aspect-ratio: 1 / 1;
background:
radial-gradient(circle at top right, rgba(52, 240, 181, 0.06), transparent 70%),
rgba(255, 255, 255, 0.03);
display: grid; place-items: center;
overflow: hidden;
}
.earn-card__media img { width: 100%; height: 100%; object-fit: cover; }
.earn-card__media i { font-size: 2.2rem; color: rgba(255, 255, 255, 0.18); }
.earn-card__platforms {
position: absolute; top: 0.45rem; right: 0.45rem;
display: flex; gap: 0.25rem; z-index: 2;
}
.earn-card__platform-tag {
width: 1.5rem; height: 1.5rem; border-radius: 0.4rem;
display: grid; place-items: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
color: #fff; font-size: 0.72rem;
}
.earn-card__body { padding: 0.6rem 0.7rem 0.75rem; display: grid; gap: 0.18rem; }
.earn-card__name {
margin: 0;
color: var(--text-primary, #f7fbff);
font-size: 0.88rem; font-weight: 700; line-height: 1.25;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
}
.earn-card__category {
margin: 0; color: var(--text-muted, #95a4bf); font-size: 0.74rem;
}
.earn-card__payout {
margin: 0.25rem 0 0;
color: var(--text-primary, #f7fbff); font-size: 1rem; font-weight: 800;
}
/* Partner card (iframe-wall fallback) — gradient cards w/ boost pill */
.earn-row--partners { grid-auto-columns: minmax(140px, 1fr); }
.earn-partner {
scroll-snap-align: start;
position: relative;
display: flex; flex-direction: column; justify-content: space-between;
padding: 0.85rem 0.7rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0.85rem;
text-decoration: none;
overflow: hidden;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
min-height: 11.5rem;
color: #f7f9ff;
box-shadow: 0 12px 28px -14px rgba(2, 8, 18, 0.5);
}
.earn-partner::after {
content: ""; position: absolute; inset: auto -22% -28% auto;
width: 7.5rem; height: 7.5rem; pointer-events: none;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 68%);
opacity: 0.55; z-index: 0;
}
.earn-partner > * { position: relative; z-index: 1; }
.earn-partner:hover {
transform: translateY(-3px);
border-color: rgba(52, 240, 181, 0.32);
box-shadow: 0 22px 42px -16px rgba(2, 8, 18, 0.6);
color: #f7f9ff;
}
.earn-partner__boost {
position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
background: rgba(26, 204, 130, 0.22); color: #6ef0c6;
border-radius: 0.45rem;
padding: 0.18rem 0.5rem;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em;
}
.earn-partner__logo {
flex: 1 1 auto;
display: grid; place-items: center;
min-height: 4.6rem;
padding: 0.4rem 0.2rem;
}
.earn-partner__logo img {
max-width: 100%;
max-height: 2.5rem;
object-fit: contain;
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}
.earn-partner__logo-fallback {
width: 3rem; height: 3rem; display: grid; place-items: center;
border-radius: 999px;
background: linear-gradient(135deg, #2ed7a8, #1eae85);
color: #07131b; font-size: 1.3rem; font-weight: 800;
}
.earn-partner__meta {
text-align: center;
padding-top: 0.6rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.earn-partner__name {
margin: 0;
color: #f7f9ff;
font-size: 0.86rem; font-weight: 700;
line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.earn-partner__rating {
color: #ffc928; font-size: 0.72rem; letter-spacing: 0.08em; margin-top: 0.25rem;
}
.earn-partner__rating .far { color: rgba(255, 201, 40, 0.22); }
/* Light-mode tweak: keep partner cards readable on the lighter page bg */
[data-theme="light"] .earn-partner { color: #f7f9ff; }
[data-theme="light"] .earn-partner__name { color: #f7f9ff; }
[data-theme="light"] .earn-partner__meta { border-top-color: rgba(255, 255, 255, 0.16); }
/* === Partner open-mode modal === */
.partner-open-modal {
position: fixed; inset: 0;
display: none; place-items: center;
z-index: 1000;
}
.partner-open-modal.is-open { display: grid; }
.partner-open-modal__backdrop {
position: absolute; inset: 0;
background: rgba(4, 8, 16, 0.72);
backdrop-filter: blur(6px);
}
.partner-open-modal__panel {
position: relative; z-index: 1;
width: min(440px, calc(100vw - 2rem));
padding: 1.6rem 1.4rem 1.4rem;
border-radius: 1.1rem;
background: linear-gradient(180deg, var(--bg-card, rgba(20, 28, 42, 0.98)), var(--bg-card-end, rgba(13, 19, 30, 0.99)));
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.22));
box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7);
text-align: center;
animation: partnerModalIn 180ms ease-out;
}
@keyframes partnerModalIn {
from { transform: translateY(8px) scale(0.97); opacity: 0; }
to { transform: none; opacity: 1; }
}
.partner-open-modal__close {
position: absolute; top: 0.65rem; right: 0.65rem;
width: 2rem; height: 2rem; display: grid; place-items: center;
border: 0; border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.04);
color: var(--text-muted, #95a4bf);
cursor: pointer;
transition: 140ms ease;
}
.partner-open-modal__close:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary, #f7fbff);
}
.partner-open-modal__icon {
width: 3.2rem; height: 3.2rem;
margin: 0 auto 0.85rem;
display: grid; place-items: center;
border-radius: 999px;
background: rgba(52, 240, 181, 0.14);
color: #34e2bf;
font-size: 1.25rem;
}
.partner-open-modal__title {
margin: 0 0 0.35rem;
color: var(--text-primary, #f7fbff);
font-size: 1.15rem; font-weight: 800;
}
.partner-open-modal__copy {
margin: 0 0 1.1rem;
color: var(--text-muted, #95a4bf);
font-size: 0.86rem; line-height: 1.45;
}
.partner-open-modal__actions {
display: grid; gap: 0.55rem;
}
.partner-open-modal__btn {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: 0.18rem;
padding: 0.75rem 1rem 0.85rem 2.95rem;
border-radius: 0.7rem;
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.22));
background: rgba(255, 255, 255, 0.03);
color: var(--text-body, #dbe7fb);
text-align: left;
cursor: pointer;
transition: 140ms ease;
}
.partner-open-modal__btn > i {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
font-size: 1rem; color: var(--text-muted, #95a4bf);
}
.partner-open-modal__btn span {
color: var(--text-primary, #f7fbff);
font-weight: 700; font-size: 0.92rem;
}
.partner-open-modal__btn small {
color: var(--text-muted, #95a4bf);
font-size: 0.74rem;
}
.partner-open-modal__btn:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(96, 114, 146, 0.4);
}
.partner-open-modal__btn--primary {
background: linear-gradient(135deg, rgba(52, 240, 181, 0.16), rgba(36, 208, 160, 0.12));
border-color: rgba(52, 240, 181, 0.42);
}
.partner-open-modal__btn--primary > i,
.partner-open-modal__btn--primary span { color: #34e2bf; }
.partner-open-modal__btn--primary:hover {
background: linear-gradient(135deg, rgba(52, 240, 181, 0.22), rgba(36, 208, 160, 0.18));
border-color: rgba(52, 240, 181, 0.6);
}
/* === Embedded offerwall iframe wrapper === */
/* Make embedded offerwall page use the full content-wrap width */
body.offerwall-embedded .content-wrap { max-width: none; padding: 0 1rem; }
.offerwall-embed {
display: flex; flex-direction: column; gap: 0.7rem;
width: 100%;
}
.offerwall-embed__back {
display: inline-flex; align-items: center; gap: 0.45rem;
align-self: flex-start;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.22));
color: var(--text-body, #dbe7fb);
font-size: 0.84rem; font-weight: 600;
text-decoration: none;
transition: 140ms ease;
}
.offerwall-embed__back:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary, #f7fbff);
}
.offerwall-embed__frame {
background: var(--bg-card, rgba(20, 28, 42, 0.95));
border: 1px solid var(--border-subtle, rgba(96, 114, 146, 0.22));
border-radius: 1rem;
overflow: hidden;
min-height: 80vh;
padding: 0;
}
.offerwall-embed__frame .cc-embed {
border: 0;
background: transparent;
padding: 0;
border-radius: inherit;
}
.offerwall-embed__frame iframe {
width: 100% !important;
min-height: 80vh;
height: 80vh;
border: 0;
display: block;
}
/* Surveys */
.earn-row--surveys { grid-auto-columns: minmax(120px, 130px); }
.earn-survey-card {
position: relative;
scroll-snap-align: start;
display: flex; flex-direction: column; gap: 0.45rem;
padding: 0.65rem;
background: linear-gradient(180deg, rgba(34, 63, 39, 0.4), rgba(20, 30, 22, 0.5));
border: 1px solid rgba(94, 134, 88, 0.32);
border-radius: 0.65rem;
text-decoration: none;
min-height: 9rem;
}
.earn-survey-card--featured {
background: linear-gradient(180deg, rgba(180, 110, 30, 0.45), rgba(120, 70, 25, 0.55));
border-color: rgba(245, 158, 11, 0.6);
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4) inset, 0 14px 26px -12px rgba(245, 158, 11, 0.5);
}
.earn-survey-card__icon, .earn-survey-card__bag { display: grid; place-items: center; height: 3rem; color: rgba(255, 255, 255, 0.55); font-size: 1.5rem; }
.earn-survey-card__icon { color: #fff7d6; }
.earn-survey-card__meta { display: grid; gap: 0.1rem; color: var(--text-body, #dbe7fb); font-size: 0.76rem; }
.earn-survey-card__meta strong { color: #fff; font-size: 0.9rem; }
.earn-survey-card__meta small { color: rgba(255, 255, 255, 0.7); }
.earn-survey-card__payout { color: #fff7d6; font-weight: 800; font-size: 0.95rem; }
.earn-survey-card--locked .earn-survey-card__bag { opacity: 0.35; }
.earn-survey-card__locked-overlay {
position: absolute; inset: 0;
display: grid; align-content: center; justify-items: center; gap: 0.3rem;
padding: 0.6rem;
background: rgba(8, 12, 20, 0.78);
backdrop-filter: blur(6px);
color: var(--text-body, #dbe7fb); text-align: center;
border-radius: inherit;
width: max(34rem, 100%);
left: 50%; transform: translateX(-50%);
z-index: 5;
}
.earn-survey-card__locked-overlay i { font-size: 1.3rem; color: var(--text-muted, #95a4bf); }
.earn-survey-card__locked-overlay strong { color: #fff; font-size: 1rem; }
.earn-survey-card__locked-overlay span { font-size: 0.82rem; max-width: 22rem; }
@media (max-width: 720px) {
.earn-section { padding: 0.85rem 0.7rem 0.95rem; }
.earn-row { grid-auto-columns: minmax(150px, 165px); }
.earn-survey-card__locked-overlay { width: 100%; left: 0; transform: none; }
}
/* === Daily Login Bonus (redesigned) === */
.daily-bonus-section {
background:
radial-gradient(circle at top right, rgba(255, 213, 109, 0.08), transparent 40%),
linear-gradient(180deg, rgba(14, 19, 30, 0.92) 0%, rgba(10, 14, 23, 0.96) 100%);
border-color: rgba(255, 213, 109, 0.18);
}
.daily-bonus__head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 0.85rem;
margin-bottom: 0.85rem; flex-wrap: wrap;
}
.daily-bonus__head h3 { margin: 0 0 0.18rem; color: #f6f8ff; font-size: 1.08rem; font-weight: 700; }
.daily-bonus__head p { margin: 0; color: #95a4bf; font-size: 0.85rem; }
.daily-bonus__streak-pill {
display: inline-flex; align-items: center; gap: 0.45rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(251, 146, 60, 0.18));
border: 1px solid rgba(251, 146, 60, 0.28);
color: #fbbf24; font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.daily-bonus__streak-pill i { color: #fb923c; }
.daily-bonus__streak-pill strong { color: #fff7d6; font-size: 1rem; font-weight: 800; }
.daily-bonus__streak-pill span { color: #fde68a; }
.daily-bonus__stage {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 1rem 1.1rem;
border-radius: 1rem;
background:
radial-gradient(circle at top left, rgba(52, 240, 181, 0.12), transparent 50%),
linear-gradient(135deg, rgba(20, 28, 42, 0.95), rgba(13, 19, 30, 0.95));
border: 1px solid rgba(96, 114, 146, 0.2);
margin-bottom: 0.85rem; flex-wrap: wrap;
}
.daily-bonus__amount-block { display: grid; gap: 0.25rem; min-width: 0; }
.daily-bonus__amount-label {
color: #95a4bf; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.daily-bonus__amount-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.daily-bonus__amount-value {
display: inline-flex; align-items: center; gap: 0.45rem;
color: #ffd56d; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.daily-bonus__amount-value i { color: #f59e0b; font-size: 1.6rem; }
.daily-bonus__amount-base { color: #8597b6; font-size: 0.75rem; }
.daily-bonus__multiplier-pill {
display: inline-flex; align-items: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(99, 102, 241, 0.22));
border: 1px solid rgba(168, 85, 247, 0.4);
color: #d8b4fe; font-size: 0.7rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
box-shadow: 0 0 18px -2px rgba(168, 85, 247, 0.35);
animation: dailyBonusPulseGlow 2.4s ease-in-out infinite;
}
@keyframes dailyBonusPulseGlow {
0%, 100% { box-shadow: 0 0 18px -2px rgba(168, 85, 247, 0.35); }
50% { box-shadow: 0 0 26px -2px rgba(168, 85, 247, 0.6); }
}
.daily-bonus__claim-form { margin: 0; }
.daily-bonus__claim-btn {
min-height: 3rem; padding: 0.85rem 1.4rem; font-size: 0.95rem;
border-radius: 999px; white-space: nowrap;
}
.daily-bonus__stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.55rem; margin-bottom: 0.9rem;
}
.daily-bonus__stat {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.6rem 0.75rem;
border-radius: 0.7rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(96, 114, 146, 0.15);
}
.daily-bonus__stat--next {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(99, 102, 241, 0.06));
border-color: rgba(168, 85, 247, 0.22);
}
.daily-bonus__stat-icon {
width: 2rem; height: 2rem; flex-shrink: 0;
border-radius: 0.55rem;
display: grid; place-items: center;
background: rgba(255, 213, 109, 0.12);
color: #ffd56d;
font-size: 0.85rem;
}
.daily-bonus__stat-icon--freeze { background: rgba(110, 86, 248, 0.16); color: #c4b5fd; }
.daily-bonus__stat-icon--next { background: rgba(168, 85, 247, 0.16); color: #d8b4fe; }
.daily-bonus__stat small {
display: block; color: #8597b6;
font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.daily-bonus__stat strong { display: block; color: #f6f8ff; font-size: 0.88rem; font-weight: 700; }
.daily-bonus__progress { margin-top: 0.5rem; }
.daily-bonus__progress-track {
position: relative; width: 100%; height: 0.5rem;
background: rgba(255, 255, 255, 0.06);
border-radius: 999px; overflow: hidden; margin-bottom: 0.55rem;
}
.daily-bonus__progress-fill {
height: 100%; border-radius: inherit;
background: linear-gradient(90deg, #34f0b5 0%, #facc15 60%, #fb923c 100%);
transition: width 320ms ease;
}
.daily-bonus__progress-dots { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.daily-bonus__dot {
width: 1.85rem; height: 1.85rem; border-radius: 999px;
border: 1px solid rgba(104, 122, 154, 0.22);
background: rgba(16, 22, 35, 0.96);
color: #8f9db8;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.78rem; font-weight: 700;
position: relative;
}
.daily-bonus__dot.is-filled {
background: linear-gradient(135deg, rgba(52, 240, 181, 0.32), rgba(52, 240, 181, 0.16));
color: #07131b; border-color: rgba(52, 240, 181, 0.55);
font-weight: 800;
}
.daily-bonus__dot.is-frozen {
background: rgba(110, 86, 248, 0.18); color: #d7d1ff;
border-color: rgba(110, 86, 248, 0.4);
}
.daily-bonus__dot.is-milestone {
border-color: rgba(255, 213, 109, 0.55);
box-shadow: 0 0 12px -2px rgba(255, 213, 109, 0.5);
color: #ffd56d;
}
.daily-bonus__dot.is-milestone.is-filled {
background: linear-gradient(135deg, #ffd56d, #fb923c);
color: #1f1300;
border-color: #fbbf24;
}
.daily-bonus__progress-legend {
margin: 0.7rem 0 0; color: #8f9db8; font-size: 0.72rem; line-height: 1.5;
display: flex; align-items: flex-start; gap: 0.4rem;
}
@media (max-width: 640px) {
.daily-bonus__amount-value { font-size: 2rem; }
.daily-bonus__amount-value i { font-size: 1.3rem; }
.daily-bonus__claim-btn { width: 100%; }
}